feat: better dark mode switch

src/components/ThemeSwitcher.astro

@@ -5,18 +5,38 @@
 </button>
 
 <script>
+  // Inspired by https://blog.skk.moe/post/hello-darkmode-my-old-friend/
   const themeSwitcher = document.getElementById('theme-switcher');
   const root = document.documentElement;
-  
+  const preferredTheme =  window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light'
   // Check for saved theme preference or default to dark
-  const savedTheme = localStorage.getItem('theme') || 'dark';
+  const savedTheme = localStorage.getItem('theme');
+  // If the saved theme is the same as the system preferred theme, set it and remove it from localStorage
+  if (savedTheme === preferredTheme) {
+    root.removeAttribute('data-theme');
+    localStorage.removeItem('theme');
+  } else if (savedTheme) {
+    // Or if another saved theme is found, set it
     root.setAttribute('data-theme', savedTheme);
+  } else {
+    // Or if no saved theme is found, use the system preferred theme until the theme is toggled
+    root.removeAttribute('data-theme');
+    localStorage.removeItem('theme');
+  }
 
   themeSwitcher?.addEventListener('click', () => {
-    const currentTheme = root.getAttribute('data-theme');
+    // get current theme from localStorage
+    const currentTheme = localStorage.getItem('theme');
+    // check if the current theme is correctly set, toggles it and saves it to localStorage
+    if (currentTheme !== null && ['dark', 'light'].includes(currentTheme)) {
       const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-    
       root.setAttribute('data-theme', newTheme);
       localStorage.setItem('theme', newTheme);
+    } else {
+      // if not set, toggle from the system preferred theme and save it to localStorage
+      const newTheme = preferredTheme === 'dark' ? 'light' : 'dark';
+      root.setAttribute('data-theme', newTheme);
+      localStorage.setItem('theme', newTheme);
+    }
   });
 </script>

src/styles/global.css

@@ -11,7 +11,30 @@
   --terminal-red: #ef4444;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
-
+/* Light theme */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg-color: #f3f4f6;
+    --text-color: #374151;
+    --accent-color: #3b82f6;
+    --border-color: #d1d5db;
+    --header-color: #1f2937;
+    --terminal-green: #059669;
+    --terminal-yellow: #d97706;
+    --terminal-red: #dc2626;
+  }
+  :root:not([data-theme="light"]) {
+    --bg-color: #1f2937;
+    --text-color: #a5b4cf;
+    --accent-color: #64a0ff;
+    --border-color: #3b4351;
+    --header-color: #83a2ce;
+    --terminal-green: #4ade80;
+    --terminal-yellow: #fbbf24;
+    --terminal-red: #ef4444;
+  }
+}
+/* Light theme override (for switch) */
 :root[data-theme="light"] {
   --bg-color: #f3f4f6;
   --text-color: #374151;
@@ -116,6 +139,10 @@ main {
   opacity: 0.7;
 }
 
+.footer img {
+  vertical-align: middle;
+}
+
 /* Post styles */
 .post-title {
   color: var(--header-color);