feat: create new css-only ThemeSwitcher

src/components/ThemeSwitcher@CSSOnly.astro

@@ -0,0 +1,63 @@
+---
+
+---
+<div class="theme-switcher">
+    <input type="checkbox" id="theme-toggle" class="theme-toggle" />
+    <label for="theme-toggle" class="theme-label">
+        <span>Theme</span>
+    </label>
+</div>
+<style>
+    .theme-switcher {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Hide the checkbox but keep it accessible */
+    .theme-toggle {
+        opacity: 0;
+        cursor: pointer;
+        height: 1px;
+        width: 1px;
+        margin: -1px;
+    }
+
+    .theme-label span {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: normal;
+        font-size: 0.9rem;
+    }
+
+    /* Theme Switch */
+    /* light theme (when nojs checkbox is checked) */
+    /* TODO: more compatible way */
+    body:has(.theme-toggle:checked) {
+        --bg-color: #eceff4;
+        --text-color: #2e3440;
+        --secondary-text-color: #4c566a;
+        --accent-color: #486090;
+        --border-color: #d1d5db;
+        --header-color: #2e3440;
+        --terminal-green: #4b644b;
+        --terminal-yellow: #ebcb8b;
+        --terminal-red: #bf616a;
+    }
+    @media (prefers-color-scheme: light) {
+        /* Dark theme (when nojs checkbox is checked) */
+        body:has(.theme-toggle:checked) {
+            --bg-color: #2e3440;
+            --text-color: #d8dee9;
+            --secondary-text-color: #c8c8c8;
+            --accent-color: #90a8c0;
+            --border-color: #3b4351;
+            --header-color: #eceff4;
+            --terminal-green: #a3be8c;
+            --terminal-yellow: #ebcb8b;
+            --terminal-red: #bf616a;
+        }
+    }
+</style>

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import '../styles/global.css';
 import Search from '../components/Search.astro';
 import ThemeSwitcher from '../components/ThemeSwitcher.astro';
+import ThemeSwitcher_CSSOnly from '../components/ThemeSwitcher@CSSOnly.astro';
 import BackToTop from "../components/BackToTop.astro";
 import Meta from "../components/helper/head/Meta.astro";
 
@@ -66,7 +67,7 @@ const { title = pageTitle, description = siteConfig.description, ogImage = "" }
     <footer class="footer">
       <div class="floating">
         <BackToTop/>
-        <ThemeSwitcher/>
+        {noscript ? <ThemeSwitcher_CSSOnly/> : <ThemeSwitcher/>}
       </div>
       <div class="container">
         <Fragment set:html={customFooter} />