Add light/dark mode toggle to the preview

preview/assets/main.css

@@ -1,103 +1,34 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-
 /* Theme style variables */
 :root {
   --highlight-color-main: #dd7230;
   --highlight-color-secondary: #eb5160;
   --highlight-color-tertiary: #2b7fff;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --background-color: #fff;
-    --brighter-background-color: #fbfbfb;
-    --muted-background-color: #fff;
-    --dim-background-color: #F8F8F8;
-    --hover-background-color: #f5f5f5;
-    --hover-border-color: #b0b0b0;
-    --hover-border-color-more: #d0d0d0;
-    --focused-background-color: #f5f5f5;
-    --contrast-background-color: #0d0d0d;
-    --bright-text-color: #000;
-    --text-color: #111;
-    --dim-text-color: rgb(43, 43, 43);
-    --border-color: #000;
-    --dim-border-color: #E5E5E5;
-    --muted-text-color: #848484;
-    --focused-border-color: #2b7fff;
-    --success-background-color: #ecfdf5;
-    --success-text-color: #10b981;
-    --warning-background-color: #fffbeb;
-    --warning-text-color: #f59e0b;
-    --error-background-color: #ef4444;
-    --error-background-color-focused: #dc2626;
-    --error-border-color: var(--error-background-color);
-    --error-text-color: var(--text-color);
-    --info-background-color: var(--background-color);
-    --info-text-color: var(--dim-text-color);
-  }
+html[data-theme="dark"] {
+  --dark: initial;
+  --light: ;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color: #000;
-    --brighter-background-color: #0e0e0e;
-    --muted-background-color: #0A0A0A;
-    --dim-background-color: #141313;
-    --hover-background-color: #1a1a1a;
-    --hover-border-color: #3E3E3E;
-    --hover-border-color-more: #5D5D5D;
-    --focused-background-color: #262626;
-    --contrast-background-color: #e6e6e6;
-    --bright-text-color: #fAfAfA;
-    --text-color: #D4D4D4;
-    --dim-text-color: rgb(220, 220, 220);
-    --border-color: #fff;
-    --dim-border-color: #232323;
-    --muted-text-color: #A1A1A1;
-    --focused-border-color: #2b7fff;
-    --success-background-color: #02271c;
-    --success-text-color: #b6fae3;
-    --warning-background-color: #342203;
-    --warning-text-color: #feeac7;
-    --error-background-color: #a22e2e;
-    --error-background-color-focused: #9b1c1c;
-    --error-border-color: var(--error-background-color);
-    --error-text-color: var(--dim-text-color);
-    --info-background-color: var(--focused-background-color);
-    --info-text-color: var(--hover-border-color);
-  }
+html[data-theme="light"] {
+  --dark: ;
+  --light: initial;
 }
 
-@media (prefers-color-scheme: light) {
-  .dark-mode-only {
-    display: none;
-  }
+.dark-mode-only {
+  display: var(--dark, initial) var(--light, none);
 }
 
-@media (prefers-color-scheme: dark) {
-  .light-mode-only {
-    display: none;
-  }
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-family: "Inter", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
+.light-mode-only {
+  display: var(--dark, none) var(--light, initial);
 }
 
 .navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   top: 0;
   z-index: 1000;
   background-color: var(--background-color);
@@ -109,7 +40,7 @@ body {
   text-decoration: none;
   font-size: 1.2em;
   font-weight: bold;
-  padding: 0.5em 1em;
+  padding: 0.5em none;
 }
 
 .navbar-link:hover {
@@ -133,13 +64,13 @@ body {
 /* Code block styles */
 .code-block {
   font-family: "Courier New", Courier, monospace;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   overflow: scroll;
   width: 100%;
   height: 100%;
   max-height: 80vh;
   box-sizing: border-box;
-  padding: .5rem;
+  padding: 0.5rem;
   margin: 0;
 }
 
@@ -157,6 +88,13 @@ body {
   -webkit-user-select: none;
 }
 
+.dark-mode-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color);
+}
+
 .copy-button {
   display: flex;
   align-items: center;
@@ -167,7 +105,7 @@ body {
   background: none;
   color: var(--text-color);
   border: none;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   cursor: pointer;
 }
 

preview/assets/theme.css

@@ -0,0 +1,60 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+body {
+  margin: 0;
+  padding: 0;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dark: initial;
+    --light: ;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --dark: ;
+    --light: initial;
+  }
+}
+
+:root {
+  --background-color: var(--dark, #000) var(--light, #fff);
+  --brighter-background-color: var(--dark, #0e0e0e) var(--light, #fbfbfb);
+  --muted-background-color: var(--dark, #0a0a0a) var(--light, #fff);
+  --dim-background-color: var(--dark, #141313) var(--light, #f8f8f8);
+  --hover-background-color: var(--dark, #1a1a1a) var(--light, #f5f5f5);
+  --hover-border-color: var(--dark, #3e3e3e) var(--light, #b0b0b0);
+  --hover-border-color-more: var(--dark, #5d5d5d) var(--light, #d0d0d0);
+  --focused-background-color: var(--dark, #262626) var(--light, #f5f5f5);
+  --contrast-background-color: var(--dark, #e6e6e6) var(--light, #0d0d0d);
+  --bright-text-color: var(--dark, #fafafa) var(--light, #000);
+  --text-color: var(--dark, #d4d4d4) var(--light, #111);
+  --dim-text-color: var(--dark, rgb(220, 220, 220))
+    var(--light, rgb(43, 43, 43));
+  --border-color: var(--dark, #fff) var(--light, #000);
+  --dim-border-color: var(--dark, #232323) var(--light, #e5e5e5);
+  --muted-text-color: var(--dark, #a1a1a1) var(--light, #848484);
+  --focused-border-color: var(--dark, #2b7fff) var(--light, #2b7fff);
+  --success-background-color: var(--dark, #02271c) var(--light, #ecfdf5);
+  --success-text-color: var(--dark, #b6fae3) var(--light, #10b981);
+  --warning-background-color: var(--dark, #342203) var(--light, #fffbeb);
+  --warning-text-color: var(--dark, #feeac7) var(--light, #f59e0b);
+  --error-background-color: var(--dark, #a22e2e) var(--light, #ef4444);
+  --error-background-color-focused: var(--dark, #9b1c1c) var(--light, #dc2626);
+  --error-border-color: var(--dark, var(--error-background-color))
+    var(--light, var(--error-background-color));
+  --error-text-color: var(--dark, var(--dim-text-color))
+    var(--light, var(--text-color));
+  --info-background-color: var(--dark, var(--focused-background-color))
+    var(--light, var(--background-color));
+  --info-text-color: var(--dark, var(--hover-border-color))
+    var(--light, var(--dim-text-color));
+}

preview/src/components/alert_dialog/style.css

@@ -79,7 +79,8 @@
 }
 
 .alert-dialog-cancel {
-  background-color: var(--background-color);
+  background-color: var(--light, var(--background-color)) 
+    var(--dark, var(--dim-background-color));
   color: var(--text-color);
   border: 1px solid var(--dim-border-color);
   border-radius: 0.5rem;
@@ -89,12 +90,6 @@
   transition: all 0.2s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  .alert-dialog-cancel {
-    background-color: var(--dim-background-color);
-  }
-}
-
 .alert-dialog-cancel:hover {
   background-color: var(--hover-background-color);
 }
@@ -123,7 +118,8 @@
 }
 
 .alert-dialog-trigger {
-  background-color: var(--background-color);
+  background-color: var(--light, var(--background-color)) 
+    var(--dark, var(--dim-background-color));
   color: var(--text-color);
   border: 1px solid var(--dim-border-color);
   border-radius: 0.5rem;
@@ -133,12 +129,6 @@
   transition: all 0.2s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  .alert-dialog-trigger {
-    background-color: var(--dim-background-color);
-  }
-}
-
 .alert-dialog-trigger:hover {
   background-color: var(--hover-background-color);
 }

preview/src/components/calendar/style.css

@@ -29,21 +29,15 @@
   justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
-  background-color: transparent;
+  background-color: var(--light, transparent)
+    var(--dark, var(--dim-background-color));
   color: var(--muted-text-color);
   border: 1px solid var(--dim-border-color);
   border-radius: 0.5rem;
   font-size: 1rem;
   cursor: pointer;
 }
 
-@media (prefers-color-scheme: dark) {
-  .calendar-nav-prev,
-  .calendar-nav-next {
-    background-color: var(--dim-background-color);
-  }
-}
-
 .calendar-nav-prev:hover,
 .calendar-nav-next:hover {
   background-color: var(--hover-background-color);
@@ -115,17 +109,11 @@
   background-color: var(--contrast-background-color);
   color: var(--background-color);
 }
-@media (prefers-color-scheme: dark) {
-  .calendar-grid-cell[data-month="current"][data-selected="true"]:hover {
-    background-color: var(--focused-background-color);
-    color: var(--muted-background-color);
-  }
-}
-@media (prefers-color-scheme: light) {
-  .calendar-grid-cell[data-month="current"][data-selected="true"]:hover {
-    background-color: var(--contrast-background-color);
-    font-weight: 520;
-  }
+.calendar-grid-cell[data-month="current"][data-selected="true"]:hover {
+  background-color: var(--light, var(--contrast-background-color))
+    var(--dark, var(--focused-background-color));
+  color: var(--light, var(--background-color)) var(--dark, var(--muted-background-color));
+  font-weight: var(--light, 520) var(--dark, inherit);
 }
 
 .calendar-grid-cell[data-month="current"][data-today="true"]:not(

preview/src/components/context_menu/style.css

@@ -1,21 +1,16 @@
 .context-menu-content {
   min-width: 220px;
-  background: var(--background-color);
+  background: var(--dark, var(--focused-background-color))
+    var(--light, var(--background-color));
   border-radius: 0.5rem;
   padding: 0.25rem;
-  box-shadow: 0 0 0 1px var(--dim-border-color);
+  box-shadow: inset 0 0 0 1px var(--dark, var(--hover-border-color))
+    var(--light, var(--dim-border-color));
   z-index: 1000;
   transform-origin: var(--radix-context-menu-content-transform-origin);
   will-change: transform, opacity;
 }
 
-@media (prefers-color-scheme: dark) {
-  .context-menu-content {
-    background: var(--focused-background-color);
-    box-shadow: 0 0 0 1px var(--hover-border-color);
-  }
-}
-
 .context-menu-content[data-state="closed"] {
   pointer-events: none;
   opacity: 0;
@@ -50,13 +45,8 @@
 
 .context-menu-item:hover:not([data-disabled="true"]),
 .context-menu-item:focus-visible {
-  color: var(--bright-text-color);
-  background: var(--hover-background-color);
-}
-
-@media (prefers-color-scheme: dark) {
-  .context-menu-item:hover:not([data-disabled="true"]),
-  .context-menu-item:focus-visible {
-    background: var(--hover-border-color);
-  }
+  color: var(--light, var(--bright-text-color)) 
+    var(--dark, var(--text-color));
+  background: var(--light, var(--hover-background-color))
+    var(--dark, var(--hover-border-color));
 }

preview/src/components/dialog/style.css

@@ -68,7 +68,8 @@
 }
 
 .dialog-trigger {
-  background-color: var(--background-color);
+  background-color: var(--light, var(--background-color)) 
+    var(--dark, var(--dim-background-color));
   color: var(--text-color);
   border: 1px solid var(--dim-border-color);
   border-radius: 0.5rem;
@@ -78,12 +79,6 @@
   transition: all 0.2s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dialog-trigger {
-    background-color: var(--dim-background-color);
-  }
-}
-
 .dialog-trigger:hover {
   background-color: var(--hover-background-color);
 }