Show icons for dark/light theme #1166

opengaming · Jul 24, 2023 · 9d1d8ea · 9d1d8ea
1 parent 4255614
commit 9d1d8ea
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/static/dark-theme.js b/static/dark-theme.js
@@ -5,13 +5,11 @@ const DARK_THEME_KEY = 'startInDarkTheme';
 function setDarkTheme() {
   document.body.classList.remove(LIGHT_THEME_CLASS);
   document.body.classList.add(DARK_THEME_CLASS);
-  setThemeButtonText("Light Theme");
 }
 
 function setLightTheme() {
   document.body.classList.remove(DARK_THEME_CLASS);
   document.body.classList.add(LIGHT_THEME_CLASS);
-  setThemeButtonText("Dark Theme");
 }
 
 function toggleDarkTheme() {
@@ -24,17 +22,6 @@ function toggleDarkTheme() {
   }
 }
 
-/**
- * Safely modify theme button text only if it exists
- * @param {string} text label for button
- */
-function setThemeButtonText(text) {
-  const button = document.getElementById('dark-theme-button')
-  if (button) {
-    button.innerHTML = text
-  }
-}
-
 // enable dark theme as soon as possible so first paint is already dark mode
 (function () {
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
@@ -54,6 +41,5 @@ function setThemeButtonText(text) {
 // handle theme button label and listener once DOM fully loaded
 window.addEventListener('DOMContentLoaded', function () {
   const isDarkTheme = document.body.classList.contains(DARK_THEME_CLASS)
-  setThemeButtonText(isDarkTheme ? "Light Theme" : "Dark Theme")
   document.getElementById('dark-theme-button').addEventListener('click', toggleDarkTheme)
 })
diff --git a/static/main.css b/static/main.css
@@ -199,6 +199,11 @@ dd + dt { margin-top: 1em; }
   background-color: #fff;
 }
 
+.dark-theme #dark-theme-label { display: none; }
+.dark-theme #light-theme-label { display: block; }
+.light-theme #dark-theme-label { display: block; }
+.light-theme #light-theme-label { display: none; }
+
 .light-theme .tag.playable { color: #28a745; }
 .light-theme .tag.semi-playable { color: #CB9423; }
 .light-theme .tag.unplayable { color: #dc3545; }
@@ -360,3 +365,18 @@ dd + dt { margin-top: 1em; }
 .game-spacer {
   margin: 10px;
 }
+
+.lg-view{
+   display:inline-block;
+}
+.sm-view{
+   display:none;
+}
+@media screen and (max-width: 500px) {
+    .lg-view{
+       display:none;
+    }
+    .sm-view{
+       display:inline-block;
+    }
+}
diff --git a/templates/common.html b/templates/common.html
@@ -102,7 +102,10 @@
         <span class="nav-count">xxxx/yyyy games</span>
       </li>
     </ul>
-    <span id="dark-theme-button" class="nav-btn">Dark Theme</span>
+    <span id="dark-theme-button" class="nav-btn">
+      <span id="dark-theme-label"><i class="fa-solid fa-moon"></i></span>
+      <span id="light-theme-label"><i class="fa-solid fa-sun"></i></span>
+    </span>
     <span id='sortButton' class="nav-btn">Sort by ........</span>
   </div>
 </header>