...

src/Navigation.svelte

@@ -4,7 +4,7 @@
     import moonIcon from "./assets/icons/moon.svg";
     import { slide } from "svelte/transition";
     import Toggle from "./lib/components/Toggle.svelte";
-    import { darkTheme } from "./lib/stores/theme.svelte";
+    import { darkTheme } from "./lib/stores/theme";
     import { Routes } from "./lib/global/routes";
     import { isCurrentPath } from "./lib/components/Router.svelte";
 

src/app.css

@@ -1,5 +1,77 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+:root {
+    --mb-color-primary-100: rgb(250 250 250);
+    --mb-color-primary-200: rgb(240 240 240);
+    --mb-color-primary-300: rgb(230 230 230);
+    --mb-color-primary-400: rgb(220 220 220);
+    --mb-color-primary-500: rgb(210 210 210);
+    --mb-color-primary-600: rgb(200 200 200);
+    --mb-color-primary-700: rgb(190 190 190);
+    --mb-color-primary-800: rgb(180 180 180);
+    --mb-color-primary-900: rgb(170 170 170);
+
+    --mb-color-contrast-100: rgb(220 220 220);
+    --mb-color-contrast-200: rgb(200 200 200);
+    --mb-color-contrast-300: rgb(180 180 180);
+    --mb-color-contrast-400: rgb(160 160 160);
+    --mb-color-contrast-500: rgb(140 140 140);
+    --mb-color-contrast-600: rgb(110 110 110);
+    --mb-color-contrast-700: rgb(80 80 80);
+    --mb-color-contrast-800: rgb(60 60 60);
+    --mb-color-contrast-900: rgb(30 30 30);
+}
+
+[data-theme="dark"] {
+    --mb-color-primary-100: rgb(28 28 28);
+    --mb-color-primary-200: rgb(32 32 32);
+    --mb-color-primary-300: rgb(38 38 38);
+    --mb-color-primary-400: rgb(44 44 44);
+    --mb-color-primary-500: rgb(50 50 50);
+    --mb-color-primary-600: rgb(56 56 56);
+    --mb-color-primary-700: rgb(62 62 62);
+    --mb-color-primary-800: rgb(68 68 68);
+    --mb-color-primary-900: rgb(74 74 74);
+
+    --mb-color-contrast-100: rgb(25 25 25);
+    --mb-color-contrast-200: rgb(50 50 50);
+    --mb-color-contrast-300: rgb(80 80 80);
+    --mb-color-contrast-400: rgb(110 110 110);
+    --mb-color-contrast-500: rgb(140 140 140);
+    --mb-color-contrast-600: rgb(160 160 160);
+    --mb-color-contrast-700: rgb(180 180 180);
+    --mb-color-contrast-800: rgb(200 200 200);
+    --mb-color-contrast-900: rgb(220 220 220);
+}
+
+@theme inline {
+    --color-accent: rgb(255 29 37);
+
+    --color-primary-100: var(--mb-color-primary-100);
+    --color-primary-200: var(--mb-color-primary-200);
+    --color-primary-300: var(--mb-color-primary-300);
+    --color-primary-400: var(--mb-color-primary-400);
+    --color-primary-500: var(--mb-color-primary-500);
+    --color-primary-600: var(--mb-color-primary-600);
+    --color-primary-700: var(--mb-color-primary-700);
+    --color-primary-800: var(--mb-color-primary-800);
+    --color-primary-900: var(--mb-color-primary-900);
+
+    --color-contrast-100: var(--mb-color-contrast-100);
+    --color-contrast-200: var(--mb-color-contrast-200);
+    --color-contrast-300: var(--mb-color-contrast-300);
+    --color-contrast-400: var(--mb-color-contrast-400);
+    --color-contrast-500: var(--mb-color-contrast-500);
+    --color-contrast-600: var(--mb-color-contrast-600);
+    --color-contrast-700: var(--mb-color-contrast-700);
+    --color-contrast-800: var(--mb-color-contrast-800);
+    --color-contrast-900: var(--mb-color-contrast-900);
+
+    --shadow-t-lg: 0px -4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
 @layer base {
     *,
     *::before,
@@ -19,29 +91,8 @@
             serif;
     }
 
-    body,
-    h1,
-    h2,
-    h3,
-    h4,
-    p,
-    figure,
-    blockquote,
-    dl,
-    dd {
-        margin: 0;
-    }
-
-    html,
-    body {
-        background-color: rgb(var(--primary-100));
-    }
-
-    html:focus-within {
-        scroll-behavior: smooth;
-    }
-
     body {
+        @apply bg-primary-100;
         text-rendering: optimizeSpeed;
         line-height: 1.5;
     }
@@ -97,29 +148,3 @@
         @apply text-base text-contrast-800 md:text-lg;
     }
 }
-
-@theme {
-    --color-accent: rgb(255 29 37);
-
-    --color-primary-100: light-dark(rgb(250 250 250), rgb(28 28 28));
-    --color-primary-200: light-dark(rgb(240 240 240), rgb(32 32 32));
-    --color-primary-300: light-dark(rgb(230 230 230), rgb(38 38 38));
-    --color-primary-400: light-dark(rgb(220 220 220), rgb(44 44 44));
-    --color-primary-500: light-dark(rgb(210 210 210), rgb(50 50 50));
-    --color-primary-600: light-dark(rgb(200 200 200), rgb(56 56 56));
-    --color-primary-700: light-dark(rgb(190 190 190), rgb(62 62 62));
-    --color-primary-800: light-dark(rgb(180 180 180), rgb(68 68 68));
-    --color-primary-900: light-dark(rgb(170 170 170), rgb(74 74 74));
-
-    --color-contrast-100: light-dark(rgb(220 220 220), rgb(25 25 25));
-    --color-contrast-200: light-dark(rgb(200 200 200), rgb(50 50 50));
-    --color-contrast-300: light-dark(rgb(180 180 180), rgb(80 80 80));
-    --color-contrast-400: light-dark(rgb(160 160 160), rgb(110 110 110));
-    --color-contrast-500: light-dark(rgb(140 140 140), rgb(140 140 140));
-    --color-contrast-600: light-dark(rgb(110 110 110), rgb(160 160 160));
-    --color-contrast-700: light-dark(rgb(80 80 80), rgb(180 180 180));
-    --color-contrast-800: light-dark(rgb(60 60 60), rgb(200 200 200));
-    --color-contrast-900: light-dark(rgb(30 30 30), rgb(220 220 220));
-
-    --shadow-t-lg: 0px -4px 6px -1px rgba(0, 0, 0, 0.1);
-}

src/lib/components/ContactForm.svelte

@@ -26,7 +26,7 @@
         </Link>
 
         <MapPoint
-            class="card mt-5 min-h-96 grow overflow-hidden rounded-md border-2"
+            class="card mt-5 min-h-140 grow overflow-hidden rounded-md border-2"
             coordinates={[
                 {
                     latitude: 62.48303957042255,

src/lib/stores/theme.ts

@@ -14,9 +14,9 @@ function createThemeToggler() {
   }
 
   if (defaultValue) {
-    document.documentElement.style.colorScheme = "dark";
+    document.body.dataset.theme = "dark";
   } else {
-    document.documentElement.style.colorScheme = "light";
+    document.body.dataset.theme = "light";
   }
 
   const { subscribe, update } = writable(defaultValue);
@@ -26,9 +26,9 @@ function createThemeToggler() {
     set: (value: boolean) => {
       update(() => value);
       if (value) {
-        document.documentElement.style.colorScheme = "dark";
+        document.body.dataset.theme = "dark";
       } else {
-        document.documentElement.style.colorScheme = "light";
+        document.body.dataset.theme = "light";
       }
 
       localStorage.setItem("dark_theme", JSON.stringify(value));