astro-accelerator 6.0.18 → 6.0.20

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "6.0.18",
+    "version": "6.0.20",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/css/vars.css

@@ -98,7 +98,7 @@
         --fore-link-alt: #FF0;
         --aft-link-alt: #232323;
 
-        --fore-input: #var(--fore);
+        --fore-input: var(--fore);
         --aft-input: var(--aft);
 
         --fore-block: #DFF;
@@ -113,3 +113,51 @@
         --aft-table-row-even: #466;
     }
 }
+
+body.mode-light {
+    --fore: #233;
+    --aft: #DFF;
+    --aft-image: #DFF;
+
+    --fore-link: #355;
+    --fore-link-alt: #699;
+    --aft-link-alt: #e6e6eC;
+    
+    --fore-input: var(--fore);
+    --aft-input: var(--aft);
+
+    --fore-block: #333;
+    --aft-block: #BEE;
+    --icon-block: #FF0;
+
+    --fore-table-head: #DFF;
+    --aft-table-head: #233;
+    --fore-table-row-odd: #333;
+    --aft-table-row-odd: #DFF;
+    --fore-table-row-even: #333;
+    --aft-table-row-even: #CFF;
+}
+
+body.mode-dark {
+    --fore: #DFF;
+    --aft: #233;
+    --aft-image: #DDD;
+
+    --fore-link: #AFF;
+    --fore-link-alt: #FF0;
+    --aft-link-alt: #232323;
+
+    --fore-input: var(--fore);
+    --aft-input: var(--aft);
+
+    --fore-block: #DFF;
+    --aft-block: #011;
+    --icon-block: #FF0;
+
+    --fore-table-head: #DFF;
+    --aft-table-head: #244; 
+    --fore-table-row-odd: #DFF;
+    --aft-table-row-odd: #355;
+    --fore-table-row-even: #DFF;
+    --aft-table-row-even: #466;
+}

package/src/themes/accelerator/components/Header.astro

@@ -36,8 +36,8 @@ stats.stop();
         text-align: center;
         font-size: 2rem;
         gap: 2rem;
-        display: grid;
-        grid-template-columns: auto 40px 40px;
+        display: flex;
+        flex-wrap: wrap;
         align-items: center;
         padding-block: 2rem;
         width: var(--content-width);
@@ -47,6 +47,7 @@ stats.stop();
     }
 
     .site-header .site-title {
+        margin-inline-end: auto;
         text-align: left;
         text-decoration: none;
         letter-spacing: -0.03em;
@@ -55,6 +56,23 @@ stats.stop();
         flex-shrink: 0;
     }
 
+    @media (max-width: 680px) {
+        .site-header {
+            justify-content: space-between;
+            padding-block: 1rem;
+            gap: 1rem;
+        }
+        .site-header .site-title {
+            flex-basis: 100%;
+            text-align: center;
+            margin-inline-end: 0;
+            order: 2;
+        }
+        .site-header .header-icon {
+            order: 1;
+        }
+    }
+
     .site-header .site-title:hover,
     .site-header .site-title:focus {
         color: var(--fore-link-alt);
@@ -84,6 +102,29 @@ stats.stop();
     <a href={(SITE.subfolder ?? "") + "/"} class="site-title" translate="no"
         >{SITE.title}</a
     >
+    <a
+        href="#"
+        class="header-icon theme-toggle"
+        title={_(Translations.header.toggle_theme)}
+        style="display: none;">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke-width="1"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M12 2v2"></path>
+            <path d="M12 20v2"></path>
+            <path d="M2 12h2"></path>
+            <path d="M4.93 4.93l1.41 1.41"></path>
+            <path d="M4.93 19.07l1.41 -1.41"></path>
+            <path d="M12 6 A 6 6 0 0 0 12 18 A 6 6 0 0 0 12 6 A 8 8 0 0 1 12 18"
+            ></path>
+        </svg>
+    </a>
     <a
         href={searchUrl}
         class="header-icon"
@@ -121,3 +162,58 @@ stats.stop();
         </svg>
     </a>
 </header>
+
+<script is:inline>
+    const themeToggle = document.querySelector(".theme-toggle");
+    if (themeToggle) {
+        themeToggle.style.display = "inline-flex";
+        themeToggle.style.alignItems = "center";
+        themeToggle.style.justifyContent = "center";
+
+        const applyTheme = (theme) => {
+            if (theme === "dark") {
+                document.body.classList.remove("mode-light");
+                document.body.classList.add("mode-dark");
+            } else {
+                document.body.classList.remove("mode-dark");
+                document.body.classList.add("mode-light");
+            }
+        };
+
+        const getPreferredTheme = () => {
+            const savedTheme = localStorage.getItem("theme");
+            if (savedTheme) {
+                return savedTheme;
+            }
+            return window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+        };
+
+        const toggleTheme = (e) => {
+            if (e) e.preventDefault();
+            const currentTheme = document.body.classList.contains("mode-dark")
+                ? "dark"
+                : document.body.classList.contains("mode-light")
+                  ? "light"
+                  : getPreferredTheme();
+            const newTheme = currentTheme === "dark" ? "light" : "dark";
+            applyTheme(newTheme);
+            localStorage.setItem("theme", newTheme);
+        };
+
+        themeToggle.addEventListener("click", toggleTheme);
+
+        // Initial setup
+        applyTheme(getPreferredTheme());
+
+        // Listen for OS changes if no preference is saved
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", (e) => {
+                if (!localStorage.getItem("theme")) {
+                    applyTheme(e.matches ? "dark" : "light");
+                }
+            });
+    }
+</script>

package/src/themes/accelerator/utilities/language.json

@@ -35,10 +35,13 @@
     },
     "header": {
         "toggle_menu": {
-            "en": "Toggle menu"
+            "en": "View menu"
         },
         "toggle_search": {
-            "en": "Toggle site search"
+            "en": "Site search"
+        },
+        "toggle_theme": {
+            "en": "Toggle theme"
         }
     },
     "navigation": {
@@ -126,4 +129,4 @@
             "en": "author"
         }
     }
-}
+}