disabled:opacity-50 and ordering

ccrma · May 12, 2024 · 35c0d9f · 35c0d9f
1 parent 7b6d9d5
commit 35c0d9f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -152,21 +152,20 @@
                 </button>
                 <div id="viewDropdown" class="hidden dropdown w-50">
                   <ul class="py-2 text-base text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
-                    <li class="divider dark:border-t-gray-400" data-content="DARK MODE"></li>
                     <li>
-                      <button id="colorPreferenceToggle" type="button" class="dropdownItem">
-                        System: On
+                      <button id="chuckNowToggle" type="button" class="dropdownItem">
+                        ChucK Time: Off
                       </button>
                     </li>
+                    <li class="divider dark:border-t-gray-400" data-content="THEME"></li>
                     <li>
-                      <button id="darkModeToggle" type="button" class="dropdownItem">
-                        Mode: Light
+                      <button id="colorPreferenceToggle" type="button" class="dropdownItem">
+                        System: On
                       </button>
                     </li>
-                    <li class="divider dark:border-t-gray-400" data-content="VIEW ELEMENTS"></li>
                     <li>
-                      <button id="chuckNowToggle" type="button" class="dropdownItem">
-                        ChucK Time: Off
+                      <button id="darkModeToggle" type="button" class="dropdownItem disabled:opacity-50">
+                        Mode: Light
                       </button>
                     </li>
                   </ul>

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -36,10 +36,10 @@ export function setColorScheme() {
     if (localStorage.colorPreference === "true") {
         setThemeFromPreference();
         colorPreferenceToggle.innerHTML = "System: On";
-        darkModeToggle.style.display = "none";
+        darkModeToggle.disabled = true;
     } else {
         colorPreferenceToggle.innerHTML = "System: Off";
-        darkModeToggle.style.display = "block";
+        darkModeToggle.disabled = false;
         switch (localStorage.theme) {
             case "dark":
                 darkModeOn();