feat: move theme inline

public/app.css

@@ -24,47 +24,6 @@ article a {
   color: var(--fill) !important;
 }
 
-:root {
-  --neutral-1000: #000000;
-  --neutral-800: #16161E;
-  --neutral-500: #252530;
-  --neutral-400: #2C2C3A;
-  --neutral-300: #414152;
-  --neutral-100: #D5D5D7;
-  --neutral-000: #F1F1F4;
-  --fill: #cb5a5a;
-}
-
-body {
-  --background-dark: var(--neutral-800);
-  --background: var(--neutral-000);
-  --background-light: var(--neutral-400);
-  --outline: var(--neutral-300);
-  --text: var(--neutral-800);
-  --text-light: black;
-
-  --border-radius-md: 20px;
-
-  --spacing-sm: 10px;
-  --spacing-md: 20px;
-
-  background-color: var(--layer100);
-  transition: background-color 0.1s;
-  color: var(--text);
-  font-family: 'Nunito Sans', sans-serif;
-  background-color: var(--neutral-000);
-}
-
-.dark body {
-  --background-dark: var(--neutral-800);
-  --background: var(--neutral-500);
-  --background-light: var(--neutral-400);
-  --background-gradient: linear-gradient(-30deg, var(--neutral-500) 0%, var(--neutral-400) 100%);
-  --outline: var(--neutral-300);
-  --text: var(--neutral-100);
-  --text-light: white;
-  background-color: var(--neutral-1000);
-}
 
 .dark .noise::before {
   opacity: 1;

src/components/ImageGallery.svelte

@@ -136,7 +136,6 @@
     );
 
     images = wrappers.map((image, i: number) => {
-      console.log({ image });
       image.classList.add("image-active");
       image.addEventListener("click", () => setIndex(i));
       image.addEventListener("touch", () => setIndex(i));

src/layouts/Layout.astro

@@ -54,6 +54,53 @@ const { title, width = "compact" } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <!-- <meta http-equiv="refresh" content="0;url=/" /> -->
     <title>{title}</title>
+    <style>
+      :root {
+        --neutral-1000: #000000;
+        --neutral-800: #16161e;
+        --neutral-500: #252530;
+        --neutral-400: #2c2c3a;
+        --neutral-300: #414152;
+        --neutral-100: #d5d5d7;
+        --neutral-000: #f1f1f4;
+        --fill: #cb5a5a;
+      }
+
+      body {
+        --background-dark: var(--neutral-800);
+        --background: var(--neutral-000);
+        --background-light: var(--neutral-400);
+        --outline: var(--neutral-300);
+        --text: var(--neutral-800);
+        --text-light: black;
+
+        --border-radius-md: 20px;
+
+        --spacing-sm: 10px;
+        --spacing-md: 20px;
+
+        background-color: var(--layer100);
+        transition: background-color 0.1s;
+        color: var(--text);
+        font-family: "Nunito Sans", sans-serif;
+        background-color: var(--neutral-000);
+      }
+
+      .dark body {
+        --background-dark: var(--neutral-800);
+        --background: var(--neutral-500);
+        --background-light: var(--neutral-400);
+        --background-gradient: linear-gradient(
+          -30deg,
+          var(--neutral-500) 0%,
+          var(--neutral-400) 100%
+        );
+        --outline: var(--neutral-300);
+        --text: var(--neutral-100);
+        --text-light: white;
+        background-color: var(--neutral-1000);
+      }
+    </style>
     <script>
       (function () {
         try {