feat: some stuff

src/components/ThemeToggle.svelte

@@ -30,7 +30,7 @@
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="light icon icon-tabler icons-tabler-outline icon-tabler-sun"
+    class="hidden icon icon-tabler icons-tabler-outline icon-tabler-sun"
     ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
       d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
     /><path
@@ -47,9 +47,18 @@
     stroke-width="1.25"
     stroke-linecap="round"
     stroke-linejoin="round"
-    class="dark hidden icon icon-tabler icons-tabler-outline icon-tabler-moon"
+    class="icon icon-tabler icons-tabler-outline icon-tabler-moon"
     ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
       d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
     /></svg
   >
 </button>
+
+<style>
+  :global(.dark .icon-tabler-moon) {
+    display: none;
+  }
+  :global(.dark .icon-tabler-sun) {
+    display: block;
+  }
+</style>

src/layouts/Layout.astro

@@ -54,7 +54,7 @@ const { title, width = "compact" } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <!-- <meta http-equiv="refresh" content="0;url=/" /> -->
     <title>{title}</title>
-    <style>
+    <style is:inline>
       :root {
         --neutral-1000: #000000;
         --neutral-800: #16161e;
@@ -100,14 +100,14 @@ const { title, width = "compact" } = Astro.props;
         --text-light: white;
       }
 
-      .dark .icon-tabler-sun,
-      .light .icon-tabler-moon {
-        display: none;
-      }
-      .dark .icon-tabler-moon,
-      .light .icon-tabler-sun {
-        display: block;
-      }
+      /* .dark .icon-tabler-sun, */
+      /* .light .icon-tabler-moon { */
+      /*   display: none; */
+      /* } */
+      /* .dark .icon-tabler-moon, */
+      /* .light .icon-tabler-sun { */
+      /*   display: block; */
+      /* } */
     </style>
     <script>
       (function () {