fix: correct theme toggle icon

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
 import sitemap from "@astrojs/sitemap";
+import Icons from 'unplugin-icons/vite'
 import mdx from '@astrojs/mdx';
 import glsl from 'vite-plugin-glsl';
 
@@ -24,6 +25,9 @@ export default defineConfig({
   vite: {
     plugins: [
       glsl(),
+      Icons({
+        compiler: 'svelte',
+      }),
     ],
   },
   integrations: [

package.json

@@ -37,6 +37,7 @@
     "prettier-plugin-astro": "^0.13.0",
     "sharp": "^0.33.3",
     "unocss": "^0.58.8",
+    "unplugin-icons": "^0.18.5",
     "vite-plugin-glsl": "^1.3.0"
   }
 }

pnpm-lock.yaml

@@ -82,6 +82,9 @@ devDependencies:
   unocss:
     specifier: ^0.58.8
     version: 0.58.8(postcss@8.4.35)(vite@5.1.6)
+  unplugin-icons:
+    specifier: ^0.18.5
+    version: 0.18.5
   vite-plugin-glsl:
     specifier: ^1.3.0
     version: 1.3.0(vite@5.1.6)
@@ -115,6 +118,12 @@ packages:
       find-up: 5.0.0
     dev: true
 
+  /@antfu/install-pkg@0.3.2:
+    resolution: {integrity: sha512-FFYqME8+UHlPnRlX/vn+8cTD4Wo/nG/lzRxpABs3XANBmdJdNImVz3QvjNAE/W3PSCNbG387FOz8o5WelnWOlg==}
+    dependencies:
+      execa: 8.0.1
+    dev: true
+
   /@antfu/utils@0.7.7:
     resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
     dev: true
@@ -5818,6 +5827,47 @@ packages:
       - supports-color
     dev: true
 
+  /unplugin-icons@0.18.5:
+    resolution: {integrity: sha512-KVNAohXbZ7tVcG1C3p6QaC7wU9Qrj7etv4XvsMMJAxr5LccQZ+Iuv5LOIv/7GtqXaGN1BuFCqRO1ErsHEgEXdQ==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.3.2
+      '@antfu/utils': 0.7.7
+      '@iconify/utils': 2.1.22
+      debug: 4.3.4
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      unplugin: 1.10.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /unplugin@1.10.1:
+    resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      acorn: 8.11.3
+      chokidar: 3.6.0
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.6.1
+    dev: true
+
   /update-browserslist-db@1.0.13(browserslist@4.23.0):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -6070,6 +6120,15 @@ packages:
   /web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
+  /webpack-sources@3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /webpack-virtual-modules@0.6.1:
+    resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
+    dev: true
+
   /which-pm-runs@1.1.0:
     resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
     engines: {node: '>=4'}

src/components/ThemeToggle.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { writable } from "svelte/store";
+  import IconSun from "~icons/tabler/Sun";
+  import IconMoon from "~icons/tabler/Moon";
 
   let theme = writable("");
 
@@ -20,45 +22,27 @@
 </script>
 
 <button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">
-  <svg
+  <IconMoon class="w-6 h-6 icon-tabler-moon" />
-    xmlns="http://www.w3.org/2000/svg"
+  <IconSun class="w-6 h-6 icon-tabler-sun" />
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    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
-      d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.q7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
-    /></svg
-  >
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    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) {
+  button :global(path) {
-    display: none;
+    stroke-width: 1.5px !important;
   }
-  :global(.dark .icon-tabler-sun) {
+
+  button > :global(.icon-tabler-moon) {
     display: block;
   }
+
+  button > :global(.icon-tabler-sun) {
+    display: none;
+  }
+
+  :global(.dark .icon-tabler-moon) {
+    display: none !important;
+  }
+  :global(.dark .icon-tabler-sun) {
+    display: block !important;
+  }
 </style>

src/env.d.ts

@@ -1,2 +1,3 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="unplugin-icons/types" />

tsconfig.json

@@ -6,7 +6,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "types": [
-      "vite-plugin-glsl/ext"
+      "vite-plugin-glsl/ext",
+      "unplugin-icons/types"
     ],
     "paths": {
       "@components/*": [