light/dark/black themes

3 files changed, 50 insertions, 4 deletions

diff --git a/static/style.css b/static/style.css
index 8956e97..bcb4678 100644
--- a/static/style.css
+++ b/static/style.css
@@ -283,3 +283,30 @@ button {
         width: 100%;
     }
 }
+
+body.dark {
+    color: #fff;
+    background-color: #24292e;
+}
+
+body.black {
+    color: #fff;
+    background-color: black;
+}
+
+body.dark a, body.black a {
+    color: rgb(90, 200, 250);
+}
+
+body.dark button, body.dark #controls li a {
+    color: black;
+}
+
+
+body.black button, body.black #controls li a {
+    color: black;
+}
+
+.themes button {
+    width: 30%;
+}
diff --git a/static/ui.html b/static/ui.html
index 13d102e..752d177 100644
--- a/static/ui.html
+++ b/static/ui.html
@@ -34,7 +34,6 @@
             <li><a href="/export/text">text</a></li>
             <li><a href="/export/json">json</a></li>
         </ul>
-
       </div>
         
     </div>
@@ -108,9 +107,11 @@
         <li>
            <input id="search" type="search" /><button class="search_go">search</button>
         </li>
-		<li>
+	    <li class="themes">
+            <button class="light_theme">light</button>
+            <button class="dark_theme">dark</button>
+            <button class="black_theme">black</button>
 		</li>
-
 	  </ul>
    </script>  
    
diff --git a/static/ui.js b/static/ui.js
index b35e948..9742314 100644
--- a/static/ui.js
+++ b/static/ui.js
@@ -4,6 +4,7 @@ $(document).ready(function() {
     if ( $(window).width() < 1024 ) {
         $('#filters').addClass('hidden');
     }
+    document.body.className = localStorage.getItem('theme');
     boot();
 });
 
@@ -170,6 +171,9 @@ var ControlsView = Backbone.View.extend({
         'click .unread_filter': 'filterToUnread',
         'click .new_feed': 'newFeed',
         'click .search_go': 'filterToSearch',
+        'click .light_theme': 'lightTheme',
+        'click .dark_theme': 'darkTheme',
+        'click .black_theme': 'blackTheme',
     },
 
     initialize: function() {
@@ -206,6 +210,21 @@ var ControlsView = Backbone.View.extend({
         return this;
     },
 
+    lightTheme: function() {
+        document.body.className = "light";
+        localStorage.setItem("theme", "light");
+    },
+
+    darkTheme: function() {
+        document.body.className = "dark";
+        localStorage.setItem("theme", "dark");
+    },
+
+    blackTheme: function() {
+        document.body.className = "black";
+        localStorage.setItem("theme", "black");
+    },
+    
 });
 
 
@@ -638,7 +657,6 @@ function infini_scroll() {
     window.setTimeout(infini_scroll, 1000);
 }
 
-
 var ItemSelector =  {
     selected_index: 0,
 }