Blog Update

public/toggle-theme.js

@@ -1,4 +1,4 @@
-const primaryColorScheme = ""; // "light" | "dark"
+const primaryColorScheme = "mocha"; // "light" | "dark" | "mocha"
 
 // Get theme data from local storage
 const currentTheme = localStorage.getItem("theme");
@@ -10,9 +10,9 @@ function getPreferTheme() {
   // return primary color scheme if it is set
   if (primaryColorScheme) return primaryColorScheme;
 
-  // return user device's prefer color scheme
+  // return user device's prefer color scheme (fallback to mocha for dark preference)
   return window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? "dark"
+    ? "mocha"
     : "light";
 }
 
@@ -56,7 +56,8 @@ window.onload = () => {
 
     // now this script can find and listen for clicks on the control
     document.querySelector("#theme-btn")?.addEventListener("click", () => {
-      themeValue = themeValue === "light" ? "dark" : "light";
+        // Toggle between mocha and light
+        themeValue = themeValue === "mocha" ? "light" : "mocha";
       setPreference();
     });
   }
@@ -83,6 +84,6 @@ document.addEventListener("astro:before-swap", event => {
 window
   .matchMedia("(prefers-color-scheme: dark)")
   .addEventListener("change", ({ matches: isDark }) => {
-    themeValue = isDark ? "dark" : "light";
+    themeValue = isDark ? "mocha" : "light";
     setPreference();
   });