diff --git a/preview/assets/main.css b/preview/assets/main.css
index cba05596..98ed9c13 100644
--- a/preview/assets/main.css
+++ b/preview/assets/main.css
@@ -1,5 +1,3 @@
-@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;
@@ -7,89 +5,22 @@
   --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 {
@@ -97,7 +28,7 @@ body {
   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;
 }
 
diff --git a/preview/assets/theme.css b/preview/assets/theme.css
new file mode 100644
index 00000000..c95cb56d
--- /dev/null
+++ b/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));
+}
diff --git a/preview/src/components/alert_dialog/style.css b/preview/src/components/alert_dialog/style.css
index e27f22f8..5b57acc2 100644
--- a/preview/src/components/alert_dialog/style.css
+++ b/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);
 }
diff --git a/preview/src/components/calendar/style.css b/preview/src/components/calendar/style.css
index 54ebe9be..e8c80e97 100644
--- a/preview/src/components/calendar/style.css
+++ b/preview/src/components/calendar/style.css
@@ -29,7 +29,8 @@
   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;
@@ -37,13 +38,6 @@
   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(
diff --git a/preview/src/components/context_menu/style.css b/preview/src/components/context_menu/style.css
index c1f376f1..279e28e4 100644
--- a/preview/src/components/context_menu/style.css
+++ b/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));
 }
diff --git a/preview/src/components/dialog/style.css b/preview/src/components/dialog/style.css
index c1d98d4f..1caba201 100644
--- a/preview/src/components/dialog/style.css
+++ b/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);
 }
diff --git a/preview/src/components/dropdown_menu/style.css b/preview/src/components/dropdown_menu/style.css
index 63307b94..687b61bf 100644
--- a/preview/src/components/dropdown_menu/style.css
+++ b/preview/src/components/dropdown_menu/style.css
@@ -5,7 +5,7 @@
 }
 
 .dropdown-menu-trigger {
-  background-color: var(--background-color);
+  background-color: var(--dark, var(--dim-background-color)) var(--light, var(--background-color));
   color: var(--text-color);
   box-shadow: inset 0 0 0 1px var(--dim-border-color);
   border: none;
@@ -16,12 +16,6 @@
   transition: all 0.2s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dropdown-menu-trigger {
-    background-color: var(--dim-background-color);
-  }
-}
-
 .dropdown-menu-trigger:hover {
   color: var(--bright-text-color);
   background: var(--hover-background-color);
@@ -37,10 +31,12 @@
   left: 0;
   margin-top: 4px;
   min-width: 200px;
-  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: inset 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));
   animation: slideIn 0.1s ease-out;
   z-index: 1000;
   /* Animation properties */
@@ -49,13 +45,6 @@
   transition: all 0.2s ease;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dropdown-menu-content {
-    background: var(--focused-background-color);
-    box-shadow: inset 0 0 0 1px var(--hover-border-color);
-  }
-}
-
 /* Open state animations */
 .dropdown-menu-content[data-state="open"] {
   opacity: 1;
@@ -89,12 +78,6 @@
 .dropdown-menu-item:hover:not([data-disabled="true"]),
 .dropdown-menu-item:focus-visible {
   color: var(--bright-text-color);
-  background: var(--hover-background-color);
-}
-
-@media (prefers-color-scheme: dark) {
-  .dropdown-menu-item:hover:not([data-disabled="true"]),
-  .dropdown-menu-item:focus-visible {
-    background: var(--hover-border-color);
-  }
+  background: var(--dark, var(--hover-border-color))
+    var(--light, var(--hover-background-color));
 }
diff --git a/preview/src/components/hover_card/style.css b/preview/src/components/hover_card/style.css
index 3c54afe5..ff80aeb7 100644
--- a/preview/src/components/hover_card/style.css
+++ b/preview/src/components/hover_card/style.css
@@ -16,21 +16,13 @@
   min-width: 200px;
   border-radius: .5rem;
   padding: 5px;
-  background: var(--background-color);
+  background: var(--light, var(--background-color)) var(--dark, var(--focused-background-color));
    /* Semi transparent shadow effect in light mode */
-  box-shadow: 0 2px 10px #0000001a;
-  border: 1px solid var(--dim-border-color);
+  box-shadow: var(--light, 0 2px 10px #0000001a) var(--dark, none);
+  border: 1px solid var(--light, var(--dim-border-color)) var(--dark, var(--hover-border-color));
   animation: hoverCardFadeIn 0.1s ease-out;
 }
 
-@media (prefers-color-scheme: dark) {
-  .hover-card-content {
-    background: var(--focused-background-color);
-    box-shadow: 0 0 0 1px var(--hover-border-color);
-    border: none;
-  }
-}
-
 /* Positioning based on side */
 .hover-card-content[data-side="top"] {
   position: absolute;
diff --git a/preview/src/components/menubar/style.css b/preview/src/components/menubar/style.css
index 35f915a3..0d2e1d24 100644
--- a/preview/src/components/menubar/style.css
+++ b/preview/src/components/menubar/style.css
@@ -25,12 +25,8 @@
 
 .menubar-menu[data-state="open"] .menubar-trigger {
     color: var(--bright-text-color);
-    background-color: var(--hover-background-color);
-}
-@media (prefers-color-scheme: dark) {
-    .menubar-menu[data-state="open"] .menubar-trigger {
-        background-color: var(--hover-border-color);
-    }
+    background-color: var(--light, var(--hover-background-color)) 
+        var(--dark, var(--hover-border-color));
 }
 
 .menubar-trigger[data-disabled="true"] {
@@ -41,15 +37,10 @@
 .menubar-trigger:hover:not([data-disabled="true"]),
 .menubar-trigger:focus-visible {
     color: var(--bright-text-color);
-    background: var(--hover-background-color);
+    background: var(--light, var(--hover-background-color)) 
+        var(--dark, var(--hover-border-color));
     outline: none;
 }
-@media (prefers-color-scheme: dark) {
-    .menubar-trigger:hover:not([data-disabled="true"]),
-    .menubar-trigger:focus-visible {
-        background: var(--hover-border-color);
-    }
-}
 
 .menubar-content {
     position: absolute;
@@ -58,22 +49,16 @@
     min-width: 200px;
     margin-left: -.25rem;
     margin-top: .5rem;
-    background: var(--background-color);
+    background: var(--light, var(--background-color)) 
+        var(--dark, var(--focused-background-color));
     border-radius: .5rem;
     padding: .25rem;
-    box-shadow: inset 0 0 0 1px var(--dim-border-color);
+    box-shadow: inset 0 0 0 1px var(--light, var(--dim-border-color)) var(--dark, var(--hover-border-color));
     z-index: 1000;
     transform-origin: top;
     will-change: transform, opacity;
 }
 
-@media (prefers-color-scheme: dark) {
-    .menubar-content {
-        background: var(--focused-background-color);
-        box-shadow: inset 0 0 0 1px var(--hover-border-color);
-    }
-}
-
 .menubar-content[data-state="closed"] {
     pointer-events: none;
     opacity: 0;
@@ -103,15 +88,10 @@
 .menubar-item:hover:not([data-disabled="true"]),
 .menubar-item:focus-visible {
     color: var(--bright-text-color);
-    background: var(--hover-background-color);
+    background: var(--light, var(--hover-background-color)) 
+        var(--dark, var(--hover-border-color));
     outline: none;
 }
-@media (prefers-color-scheme: dark) {
-    .menubar-item:hover:not([data-disabled="true"]),
-    .menubar-item:focus-visible {
-        background: var(--hover-border-color);
-    }
-}
 
 [data-disabled="true"] {
     opacity: 0.5;
diff --git a/preview/src/components/radio_group/style.css b/preview/src/components/radio_group/style.css
index 08b07151..7cf95eac 100644
--- a/preview/src/components/radio_group/style.css
+++ b/preview/src/components/radio_group/style.css
@@ -21,8 +21,9 @@
     width: 1rem;
     height: 1rem;
     box-sizing: border-box;
-    box-shadow: 0 0 0 1px var(--dim-border-color);
-    background: var(--background-color);
+    box-shadow: 0 0 0 1px var(--light, var(--dim-border-color)) 
+      var(--dark, var(--hover-border-color));
+    background: var(--light, var(--background-color)) var(--dark, var(--dim-background-color));
     border-radius: 1.5rem;
     cursor: pointer;
   }
@@ -36,7 +37,7 @@
   }
 
   &[data-state="checked"]:before {
-    border: 0.25rem solid var(--background-color);
+    border: 0.25rem solid var(--light, var(--background-color)) var(--dark, var(--dim-background-color));
     background: var(--text-color);
   }
 
@@ -45,15 +46,3 @@
     cursor: not-allowed;
   }
 }
-
-@media (prefers-color-scheme: dark) {
-  .radio-item {
-    &:before {
-      background: var(--dim-background-color);
-      box-shadow: 0 0 0 1px var(--hover-border-color);
-    }
-    &[data-state="checked"]:before {
-      border: 0.25rem solid var(--dim-background-color);
-    }
-  }
-}
diff --git a/preview/src/components/select/style.css b/preview/src/components/select/style.css
index f27640d4..4857c054 100644
--- a/preview/src/components/select/style.css
+++ b/preview/src/components/select/style.css
@@ -14,15 +14,10 @@
   appearance: none;
   position: absolute;
   align-items: center;
+  background-color: var(--light, var(--background-color)) 
+    var(--dark, var(--dim-background-color));
 }
 
 .select:not([aria-activedescendant]) {
   color: var(--muted-text-color);
 }
-
-@media (prefers-color-scheme: dark) {
-  .select {
-    background-color: var(--dim-background-color);
-    background-color: var(--dim-background-color);
-  }
-}
diff --git a/preview/src/components/switch/style.css b/preview/src/components/switch/style.css
index e06b0fac..d1bd48ff 100644
--- a/preview/src/components/switch/style.css
+++ b/preview/src/components/switch/style.css
@@ -24,27 +24,16 @@
   display: block;
   width: calc(1.15rem - 2px);
   height: calc(1.15rem - 2px);
-  background-color: var(--background-color);
+  background-color: var(--light, var(--background-color)) var(--dark, var(--contrast-background-color));
   border-radius: 9999px;
   transition: transform 150ms;
   transform: translateX(1px);
   will-change: transform;
 }
 
-@media (prefers-color-scheme: dark) {
-  .switch-thumb {
-    background-color: var(--contrast-background-color);
-  }
-}
-
 .switch[data-state="checked"] .switch-thumb {
   transform: translateX(calc(2rem - 1px - (1.15rem - 2px)));
-}
-
-@media (prefers-color-scheme: dark) {
-  .switch[data-state="checked"] .switch-thumb {
-    background-color: var(--dim-background-color);
-  }
+  background-color: var(--light, var(--background-color)) var(--dark, var(--dim-background-color));
 }
 
 /* Only apply disabled styles when data-disabled is "true" */
diff --git a/preview/src/components/tabs/style.css b/preview/src/components/tabs/style.css
index 3d8a5fb3..3f1a9d5a 100644
--- a/preview/src/components/tabs/style.css
+++ b/preview/src/components/tabs/style.css
@@ -14,16 +14,11 @@
     padding: .25rem;
     border: none;
     border-radius: .5rem;
-    background: var(--dim-background-color);
+    background: var(--light, var(--dim-background-color)) 
+        var(--dark, var(--focused-background-color));
     box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-    .tabs-list {
-        background: var(--focused-background-color);
-    }
-}
-
 .tabs-trigger {
     padding: 4px 8px;
     border: none;
@@ -35,15 +30,9 @@
 
 .tabs-trigger[data-state="active"] {
     color: var(--bright-text-color);
-    background-color: var(--background-color);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
-}
-
-@media (prefers-color-scheme: dark) {
-    .tabs-trigger[data-state="active"] {
-        box-shadow: inset 0 0 0 1px var(--hover-border-color);
-        background-color: var(--dim-border-color);
-    }
+    background-color: var(--light, var(--background-color)) var(--dark, var(--dim-border-color));
+    box-shadow: var(--dark, inset 0 0 0 1px var(--hover-border-color)) 
+        var(--light, 0 1px 2px rgba(0, 0, 0, 0.18));
 }
 
 .tabs-trigger[data-disabled="true"] {
@@ -58,22 +47,14 @@
 
 .tabs-content {
     width: 100%;
-    background: var(--background-color);
+    background: var(--light, var(--background-color)) var(--dark, var(--dim-background-color));
     border-radius: .5rem;
     padding: .25rem;
-    border: 1px solid var(--dim-border-color);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+    border: 1px solid var(--light, var(--dim-border-color)) var(--dark, var(--hover-border-color));
+    box-shadow: var(--light, 0 1px 2px rgba(0, 0, 0, 0.18)) var(--dark, none);
     box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
-    .tabs-content {
-        border: none;
-        background: var(--dim-background-color);
-        box-shadow: inset 0 0 0 1px var(--hover-border-color);
-    }
-}
-
 .tabs-content[data-state="inactive"] {
     display: none;
 }
diff --git a/preview/src/components/toast/style.css b/preview/src/components/toast/style.css
index 22f6fc92..18400460 100644
--- a/preview/src/components/toast/style.css
+++ b/preview/src/components/toast/style.css
@@ -28,18 +28,17 @@
   padding: 12px 16px;
   border-radius: 0.5rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--dim-border-color);
+  border: 1px solid var(--light, var(--dim-border-color))
+    var(--dark, var(--hover-border-color));
+  filter: var(--light, none)
+    var(
+      --dark,
+      brightness(calc(0.5 + 0.5 * (1 - ((var(--toast-index) + 1) / 4))))
+    );
   box-sizing: border-box;
   --toast-hidden: calc(min(max(0, var(--toast-index) - 2), 1));
 }
 
-@media (prefers-color-scheme: dark) {
-  .toast {
-    border: 1px solid var(--hover-border-color);
-    filter: brightness(calc(0.5 + 0.5 * (1 - ((var(--toast-index) + 1) / 4))));
-  }
-}
-
 .toast-container:not(:hover):not(:focus-within)
   .toast[data-toast-even]:not([data-top]) {
   animation: slide-up-even 0.2s ease-out;
diff --git a/preview/src/components/toolbar/style.css b/preview/src/components/toolbar/style.css
index e841086d..c0717fd3 100644
--- a/preview/src/components/toolbar/style.css
+++ b/preview/src/components/toolbar/style.css
@@ -11,16 +11,6 @@
     border-radius: .5rem;
 }
 
-/* .toolbar button {
-    padding: 8px 12px;
-    border: 1px solid var(--dim-border-color);
-    border-radius: 4px;
-    color: var(--text-color);
-    background-color: var(--background-color);
-    cursor: pointer;
-    font-size: 14px;
-} */
-
 .toolbar button {
     padding: 8px 12px;
     border: none;
@@ -33,16 +23,10 @@
 .toolbar button:hover:not([disabled]),
 .toolbar button:focus-visible {
     color: var(--bright-text-color);
-    background: var(--hover-background-color);
-}
-@media (prefers-color-scheme: dark) {
-    .toolbar button:hover:not([disabled]),
-    .toolbar button:focus-visible {
-        background: var(--hover-border-color);
-    }
+    background: var(--light, var(--hover-background-color)) 
+        var(--dark, var(--hover-border-color));
 }
 
-
 .toolbar button:disabled {
     color: var(--muted-text-color);
     cursor: not-allowed;
diff --git a/preview/src/main.rs b/preview/src/main.rs
index d34b47c1..e9e7417e 100644
--- a/preview/src/main.rs
+++ b/preview/src/main.rs
@@ -35,10 +35,11 @@ pub(crate) enum Route {
 #[component]
 fn NavigationLayout() -> Element {
     rsx! {
-        Navbar {}
         document::Link { rel: "stylesheet", href: asset!("/assets/main.css") }
+        document::Link { rel: "stylesheet", href: asset!("/assets/theme.css") }
         document::Link { rel: "stylesheet", href: asset!("/assets/hero.css") }
         document::Link { rel: "stylesheet", href: asset!("/src/components/tabs/style.css") }
+        Navbar {}
         Outlet::<Route> {}
     }
 }
@@ -57,9 +58,20 @@ fn Navbar() -> Element {
             }
             div { class: "navbar-links",
                 Link {
-                    to: "https://docs.rs/crate/dioxus-components/latest",
+                    to: "https://crates.io/crates/dioxus-components",
                     class: "navbar-link",
-                    "Docs.rs"
+                    aria_label: "Dioxus components crates.io",
+                    svg {
+                        "viewBox": "0 0 576 512",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        path {
+                            d: "M290.8 48.6l78.4 29.7L288 109.5 206.8 78.3l78.4-29.7c1.8-.7 3.8-.7 5.7 0zM136 92.5l0 112.2c-1.3 .4-2.6 .8-3.9 1.3l-96 36.4C14.4 250.6 0 271.5 0 294.7L0 413.9c0 22.2 13.1 42.3 33.5 51.3l96 42.2c14.4 6.3 30.7 6.3 45.1 0L288 457.5l113.5 49.9c14.4 6.3 30.7 6.3 45.1 0l96-42.2c20.3-8.9 33.5-29.1 33.5-51.3l0-119.1c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-1.3-.5-2.6-.9-3.9-1.3l0-112.2c0-23.3-14.4-44.1-36.1-52.4l-96-36.4c-12.8-4.8-26.9-4.8-39.7 0l-96 36.4C150.4 48.4 136 69.3 136 92.5zM392 210.6l-82.4 31.2 0-89.2L392 121l0 89.6zM154.8 250.9l78.4 29.7L152 311.7 70.8 280.6l78.4-29.7c1.8-.7 3.8-.7 5.7 0zm18.8 204.4l0-100.5L256 323.2l0 95.9-82.4 36.2zM421.2 250.9c1.8-.7 3.8-.7 5.7 0l78.4 29.7L424 311.7l-81.2-31.1 78.4-29.7zM523.2 421.2l-77.6 34.1 0-100.5L528 323.2l0 90.7c0 3.2-1.9 6-4.8 7.3z",
+                            fill: "currentColor",
+                            fill_rule: "nonzero",
+                        }
+                    }
                 }
                 Link {
                     to: "https://github.com/DioxusLabs/components",
@@ -79,6 +91,7 @@ fn Navbar() -> Element {
                         height: "24",
                     }
                 }
+                DarkModeToggle {}
             }
         }
     }
@@ -131,6 +144,74 @@ fn CopyIcon() -> Element {
     }
 }
 
+#[component]
+fn DarkModeToggle() -> Element {
+    let mut is_dark_mode = use_signal(|| false);
+
+    rsx! {
+        button {
+            class: "dark-mode-toggle dark-mode-only",
+            onclick: move |_| {
+                is_dark_mode.toggle();
+                _ = document::eval("document.documentElement.setAttribute('data-theme', 'light');");
+            },
+            aria_label: "Enable light mode",
+            DarkModeIcon {}
+        }
+        button {
+            class: "dark-mode-toggle light-mode-only",
+            onclick: move |_| {
+                is_dark_mode.toggle();
+                _ = document::eval("document.documentElement.setAttribute('data-theme', 'dark');");
+            },
+            aria_label: "Enable dark mode",
+            LightModeIcon {}
+        }
+    }
+}
+
+#[component]
+fn DarkModeIcon() -> Element {
+    rsx! {
+        svg {
+            width: "24",
+            height: "24",
+            view_box: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            path { d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" }
+        }
+    }
+}
+
+#[component]
+fn LightModeIcon() -> Element {
+    rsx! {
+        svg {
+            width: "24",
+            height: "24",
+            view_box: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "2",
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            circle { cx: "12", cy: "12", r: "4" }
+            line { x1: "12", y1: "1", x2: "12", y2: "3" }
+            line { x1: "12", y1: "21", x2: "12", y2: "23" }
+            line { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }
+            line { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }
+            line { x1: "1", y1: "12", x2: "3", y2: "12" }
+            line { x1: "21", y1: "12", x2: "23", y2: "12" }
+            line { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }
+            line { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" }
+        }
+    }
+}
+
 #[component]
 fn ComponentCode(rs_highlighted: HighlightedCode, css_highlighted: HighlightedCode) -> Element {
     let mut collapsed = use_signal(|| true);