feat: some stuff

.github/workflows/default.yaml

@@ -63,6 +63,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - name: Checkout LFS Files
+        run: git lfs pull
+
       - name: Install, build, and upload your site output
         run: pnpm i && pnpm build
 

src/components/ThemeToggle.svelte

@@ -20,7 +20,6 @@
 </script>
 
 <button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">
-  {#if $theme === "dark"}
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -31,14 +30,13 @@
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"
-      class="icon icon-tabler icons-tabler-outline icon-tabler-sun"
+    class="light 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
       d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
     /></svg
   >
-  {:else}
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -49,10 +47,9 @@
     stroke-width="1.25"
     stroke-linecap="round"
     stroke-linejoin="round"
-      class="icon icon-tabler icons-tabler-outline icon-tabler-moon"
+    class="dark hidden 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
   >
-  {/if}
 </button>

src/layouts/Layout.astro

@@ -64,6 +64,11 @@ const { title, width = "compact" } = Astro.props;
         --neutral-100: #d5d5d7;
         --neutral-000: #f1f1f4;
         --fill: #cb5a5a;
+
+        --border-radius-md: 20px;
+
+        --spacing-sm: 10px;
+        --spacing-md: 20px;
       }
 
       body {
@@ -74,16 +79,11 @@ const { title, width = "compact" } = Astro.props;
         --text: var(--neutral-800);
         --text-light: black;
 
-        --border-radius-md: 20px;
-
-        --spacing-sm: 10px;
-        --spacing-md: 20px;
-
-        background-color: var(--layer100);
+        background-color: var(--neutral-100);
         transition: background-color 0.1s;
         color: var(--text);
         font-family: "Nunito Sans", sans-serif;
-        background-color: var(--neutral-000);
+        background-color: var(--background-dark);
       }
 
       .dark body {
@@ -98,7 +98,15 @@ const { title, width = "compact" } = Astro.props;
         --outline: var(--neutral-300);
         --text: var(--neutral-100);
         --text-light: white;
-        background-color: var(--neutral-1000);
+      }
+
+      .dark .icon-tabler-sun,
+      .light .icon-tabler-moon {
+        display: none;
+      }
+      .dark .icon-tabler-moon,
+      .light .icon-tabler-sun {
+        display: block;
       }
     </style>
     <script>