feat: add dark mdode (#3 from w3cj/main)

saurabhdaware · web-flow · commit 862da58caeb9 · 2024-11-16T20:15:52.000+05:30
feat: add dark mode
diff --git a/index.html b/index.html
@@ -21,7 +21,6 @@
   <meta name="description" content="Bluesky Widget: Cute Bluesky Profile Cards for your websites!!" />
   <link rel="icon" type="image/png" sizes="32x32" href="/bsky-icon-32.png">
   <link rel="stylesheet" href="./playground/playground.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
 </head>
 
 <body>
@@ -118,7 +117,7 @@ <h3>In Frameworks</h3>
 
   <a href="https://github.com/saurabhdaware/bsky-widget" target="_blank" class="github-corner"
     aria-label="View source on GitHub">
-    <svg width="80" height="80" viewBox="0 0 250 250"
+    <svg class="octo" width="80" height="80" viewBox="0 0 250 250"
       style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path
diff --git a/lib/styles.css b/lib/styles.css
@@ -167,6 +167,22 @@ a:hover {
   right: 14px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .widget-container {
+    --bsky-text-on-theme: #E0E2E6;
+    --bsky-dark: #161C23;
+    color: var(--bsky-text-on-theme);
+  }
+  
+  .card-content-container {
+    background-color: var(--bsky-dark);
+    box-shadow: 1px 1px 8px 1px #000;
+  }
+  
+  .avatar {
+    border: 2px solid var(--bsky-dark);
+  }
+}
 .bluesky-flutter {
   display: inline-flex;
   gap: 0.5em;
diff --git a/playground/playground.css b/playground/playground.css
@@ -1,3 +1,6 @@
+@import "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" screen;
+@import "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" screen and (prefers-color-scheme: dark);
+
 * {
   box-sizing: border-box;
 }
@@ -326,3 +329,103 @@ footer {
     animation: octocat-wave 560ms ease-in-out;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dark: #161C23;
+    --light: #E0E2E6;
+    --mid: #aaa;
+  }
+
+  html {
+    background: var(--dark);
+  }
+
+  svg.octo {
+    fill: #fff !important;
+    color:#151513 !important;
+  }
+
+  a:not(.button) {
+    color: var(--light);
+    border-bottom: 2px solid var(--light);
+  }
+
+  .sidebar {
+    color: var(--light);
+  }
+
+  .preview-code-container {
+    background: var(--dark);
+    color: var(--light);
+  }
+  
+  .sb-embed {
+    border: 1px solid var(--dark);
+  }
+  
+  .sidebar {
+    background-color: var(--dark);
+    box-shadow: 1px 1px 12px 4px #000;
+  }
+
+  .input-container label {
+    color: var(--mid);
+  }
+  
+  .input-container input {
+    border: 1px solid var(--mid);
+    background-color: var(--light);
+  }
+  
+  .input-container input::placeholder {
+    color: var(--mid);
+  }
+  
+  .input-container input:focus {
+    border-color: var(--mid);
+  }
+  
+  .button {
+    color: var(--dark);
+    background-color: var(--light);
+  }
+  
+  .button:hover {
+    background-color: var(--mid);
+  }
+  
+  .code-output {
+    background-color: #0F1217;
+    border: 1px solid #000;
+  }
+  
+  .copy-button {
+    background-color: var(--light);
+    border: 1px solid var(--light);
+    color: var(--dark);
+  }
+
+  .slider {
+    background-color: var(--mid);
+  }
+
+  .slider:before {
+    background-color: var(--dark);
+  }
+
+  input:checked + .slider {
+    background-color: var(--light);
+  }
+
+  input:focus + .slider {
+    box-shadow: 0 0 1px var(--light);
+  }
+}
+
+@media (prefers-color-scheme: dark) and (max-width: 768px) {
+  .sidebar {
+    box-shadow: none;
+    background-color: transparent;
+  }
+}
