fix system theme following localstorage cache

ccrma · May 24, 2024 · a4a7e64 · a4a7e64
1 parent b500800
commit a4a7e64
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -150,7 +150,7 @@
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m1 1 4 4 4-4"/>
                   </svg>
                 </button>
-                <div id="viewDropdown" class="hidden dropdown w-50">
+                <div id="viewDropdown" class="hidden dropdown w-40">
                   <ul class="py-2 text-base text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
                     <li>
                       <button id="chuckNowToggle" type="button" class="dropdownItem">
@@ -159,13 +159,13 @@
                     </li>
                     <li class="divider dark:border-t-gray-400" data-content="THEME"></li>
                     <li>
-                      <button id="colorPreferenceToggle" type="button" class="dropdownItem">
-                        System: On
+                      <button id="darkModeToggle" type="button" class="dropdownItem disabled:opacity-50">
+                        Mode: Light
                       </button>
                     </li>
                     <li>
-                      <button id="darkModeToggle" type="button" class="dropdownItem disabled:opacity-50">
-                        Mode: Light
+                      <button id="colorPreferenceToggle" type="button" class="dropdownItem">
+                        System: On
                       </button>
                     </li>
                   </ul>
@@ -195,26 +195,26 @@
                 <div id="helpDropdown" class="hidden dropdown w-48">
                   <ul class="py-2 text-base text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
                     <li>
-                      <a href="https://chuck.stanford.edu/doc/reference" target="_blank" class="block px-4 py-2 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-light">ChucK Reference</a>
+                      <a href="https://chuck.stanford.edu/doc/reference" target="_blank" class="dropdownItem">ChucK Reference</a>
                     </li>
                     <li>
-                      <a href="https://chuck.stanford.edu/doc" target="_blank" class="block px-4 py-2 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-light">Documentation</a>
+                      <a href="https://chuck.stanford.edu/doc" target="_blank" class="dropdownItem">Documentation</a>
                     </li>
 
                     <li class="divider dark:border-t-gray-400" data-content="GITHUB"></li>
                     <li>
-                      <a href="https://github.com/ccrma/webchuck-ide" target="_blank" class="block px-4 py-2 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-light">Github Repo</a>
+                      <a href="https://github.com/ccrma/webchuck-ide" target="_blank" class="dropdownItem">GitHub Repo</a>
                     </li>
                     <li>
-                      <a href="https://github.com/ccrma/webchuck-ide/issues/new" target="_blank" class="block px-4 py-2 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-light">Report an Issue</a>
+                      <a href="https://github.com/ccrma/webchuck-ide/issues/new" target="_blank" class="dropdownItem">Report an Issue</a>
                     </li>
 
                     <li class="divider dark:border-t-gray-400" data-content="LINKS"></li>
                     <li>
-                      <a href="https://chuck.stanford.edu/webchuck" target="_blank" class="block px-4 py-2 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-light">Learn WebChucK</a>
+                      <a href="https://chuck.stanford.edu/webchuck" target="_blank" class="dropdownItem">Learn WebChucK</a>
                     </li>
                     <li>
-                      <a href="https://discord.gg/ENr3nurrx8" target="_blank" class="block px-4 py-2 font-medium hover:bg-gray-50 dark:hover:bg-gray-600 dark:hover:text-light">Discord Community</a>
+                      <a href="https://discord.gg/ENr3nurrx8" target="_blank" class="dropdownItem">Discord Community</a>
                     </li>
                   </ul>
                 </div>

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -70,11 +70,9 @@ export function initTheme() {
         toggleColorPreference();
     });
 
-    if (localStorage.getItem("colorPreference") == null)
-        localStorage.colorPreference = "true";
+    localStorage.colorPreference = localStorage.colorPreference || "true";
 
-    darkModeToggle =
-        document.querySelector<HTMLButtonElement>("#darkModeToggle")!;
+    darkModeToggle = document.querySelector<HTMLButtonElement>("#darkModeToggle")!;
     darkModeToggle.addEventListener("click", () => {
         toggleDarkMode();
     });