Merge pull request opengaming#474 from JG916/master

Dark Theme 3 Fixes
YancyW · Oct 2, 2017 · f95b8c3 · f95b8c3
2 parents 6f6ab0e + 86d36ec
commit f95b8c3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
 {% import 'templates/games.html' as games with context %}
 
 <body>
+  <script type="text/javascript" src="static/startInDarkMode.js"></script>
   <header>
     <div class="container">
       <input id="filter" type="search" placeholder="Type to filter">
@@ -43,10 +44,8 @@
             </div>
           </div>
         </li>
-        <li id='darkThemeButtonLi'>
-            <span id='darkThemeButton' class="nav-btn">Dark Theme</span>
-        </li>
       </ul>
+      <span id='darkThemeButton' class="nav-btn">Dark Theme</span>
     </div>
   </header>
 

diff --git a/static/main.css b/static/main.css
@@ -47,7 +47,7 @@ footer { text-align: center; margin-top: 2em; }
 #nav { display: inline-block; list-style: none; margin: 0; padding: 0; }
 #nav li { display: inline-block; }
 
-#nav .nav-btn {
+#nav .nav-btn, #darkThemeButton {
   display: inline-block;
   font-size: 14px;
   line-height: 30px;
@@ -200,12 +200,25 @@ dd + dt { margin-top: 1em; }
 
 .darkTheme #nav li.active .nav-btn {
    color: #000
-   }
+}
 
 .darkTheme #darkThemeButton {
-  background-color: #E3E3E3
+  background-color: #323232;
+  color: #E3E3E3;
 }
 
-#darkThemeButtonLi {
+#darkThemeButton {
   background-color: transparent;
+  float: right;
+}
+
+.darkTheme #nav .tag-group {
+  background-color:  #323232;
+  border-bottom: 1px solid #1C1C1C;
+}
+
+
+.darkTheme #nav li:hover .nav-btn, .darkTheme #nav li.active .nav-btn {
+  background-color:  #323232;
+  color: #E3E3E3;
 }
diff --git a/static/main.js b/static/main.js
@@ -247,8 +247,10 @@ var OSGC = window.OSGC = {};
   function toggleDarkTheme() {
     if (document.body.classList.contains('darkTheme')) {
       document.body.classList.remove('darkTheme');
+      localStorage.setItem('startInDarkTheme', 'false')
     } else {
       document.body.classList.add('darkTheme');
+      localStorage.setItem('startInDarkTheme', 'true')
     }
   }
 

diff --git a/static/startInDarkMode.js b/static/startInDarkMode.js
@@ -0,0 +1,17 @@
+function toggleDarkTheme() {
+    if (document.body.classList.contains('darkTheme')) {
+      document.body.classList.remove('darkTheme');
+      localStorage.setItem('startInDarkTheme', 'false')
+    } else {
+      document.body.classList.add('darkTheme');
+      localStorage.setItem('startInDarkTheme', 'true')
+    }
+  }
+
+  function checkIfShouldStartInDarkTheme() {
+    if (localStorage.getItem('startInDarkTheme') === 'true') {
+      toggleDarkTheme();
+    }
+  }
+
+  checkIfShouldStartInDarkTheme();