Commit a7ee054

@@ -1,4 +1,6 @@
 ---
+import "../styles/global.scss";
+
 interface Props {
   title?: string;
 }

@@ -0,0 +1,16 @@
+$name: "dark";
+$variant: dark;
+
+@mixin theme-colors {
+  --color-base-100: oklch(15% 0.01 300);
+  --color-base-200: oklch(20% 0.01 275);
+  --color-base-300: oklch(30% 0.01 250);
+  --color-base-content: oklch(95% 0.005 225);
+  --color-primary: oklch(55% 0.07 240);
+  --color-primary-content: oklch(95% 0.05 225);
+}
+
+[data-theme="#{$name}"] {
+  color-scheme: $variant;
+  @include theme-colors;
+}

@@ -0,0 +1,16 @@
+$name: "light";
+$variant: light;
+
+@mixin theme-colors {
+  --color-base-100: oklch(97% 0.005 325);
+  --color-base-200: oklch(93% 0.005 300);
+  --color-base-300: oklch(88% 0.02 275);
+  --color-base-content: oklch(20% 0.01 325);
+  --color-primary: oklch(85% 0.07 240);
+  --color-primary-content: oklch(30% 0.05 225);
+}
+
+[data-theme="#{$name}"] {
+  color-scheme: $variant;
+  @include theme-colors;
+}

@@ -0,0 +1,29 @@
+/* Theme */
+@use "./themes/light.scss" as light;
+@use "./themes/dark.scss" as dark;
+
+:root {
+  color-scheme: light;
+  @include light.theme-colors;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    @include dark.theme-colors;
+  }
+}
+
+:root,
+[data-theme] {
+  background-color: var(--root-bg);
+  color: var(--color-base-content);
+}
+
+:root {
+  background-color: var(--page-scroll-bg, var(--root-bg));
+}
+
+:where(:root, [data-theme]) {
+  --root-bg: var(--color-base-100);
+}