_app.tsx: set initial light or dark mode based on browser instead of defaulting to light mode

Author: arnavbhate

.github/workflows/nextjs.yml

@@ -56,7 +56,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "23"
+          node-version: "22"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v5

pages/_app.tsx

@@ -25,9 +25,11 @@ let darkSwitch: HTMLInputElement;
  */
 function initTheme() {
   if(darkSwitch){
+  const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
   const darkThemeSelected =
-    localStorage.getItem('darkSwitch') !== null &&
-    localStorage.getItem('darkSwitch') === 'dark';
+    (localStorage.getItem("darkSwitch") !== null &&
+      localStorage.getItem("darkSwitch") === "dark") ||
+    (localStorage.getItem("darkSwitch") === null && darkThemeMq.matches);
   darkSwitch['checked'] = darkThemeSelected;
   darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') :
     document.body.removeAttribute('data-theme');
@@ -47,7 +49,7 @@ function resetTheme() {
     localStorage.setItem('darkSwitch', 'dark');
   } else {
     document.body.removeAttribute('data-theme');
-    localStorage.removeItem('darkSwitch');
+    localStorage.setItem("darkSwitch", "light");
   }
 }