less terrible theme code

Faithful-Resource-Pack · Jul 7, 2024 · 51cb1c3 · 51cb1c3
1 parent d8c9f92
commit 51cb1c3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -254,7 +254,7 @@
 					</li>
 
 					<li class="nav-item theme-switch-wrapper">
-						<btn id="ThemeBtn" onclick="changeMod(true)" class="nav-link">
+						<btn id="ThemeBtn" onclick="cycleTheme()" class="nav-link">
 							<i class="fas"></i> Auto Theme
 						</btn>
 					</li>

diff --git a/js/theme.js b/js/theme.js
@@ -42,25 +42,31 @@ window.theme = {
   get nextTheme() {
     return THEME_VALUES[(this.currentThemeIndex + 1) % THEME_VALUES.length].value
   },
-  set nextTheme(_v) {}
+  set nextTheme(_v) {},
+
+  get isDark() {
+    return (
+      theme.currentTheme === 'dark' ||
+      (theme.currentTheme === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches)
+    )
+  },
+
+  get isLight() {
+    return !this.isDark;
+  }
 }
 
 // update btn
 btn.innerHTML = theme.currentThemeHTML
 
-window.changeMod = (change) => {
-  // true if the btn calls the method, false otherwise
-  if (change) {
-    window.theme.currentTheme = theme.nextTheme
-    btn.innerHTML = theme.currentThemeHTML
-  }
+window.cycleTheme = () => {
+  window.theme.currentTheme = theme.nextTheme
+  btn.innerHTML = theme.currentThemeHTML
+  updateTheme()
+}
 
-  // update theme
-  const isDark = (
-    theme.currentTheme === 'dark' ||
-    (theme.currentTheme === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches)
-  )
-  css.href = isDark ? '/css/dark.css' : '/css/light.css'
+window.updateTheme = () => {
+  css.href = theme.isDark ? '/css/dark.css' : '/css/light.css'
 }
 
-changeMod(false)
+updateTheme()