diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/style.css | 27 | ||||
-rw-r--r-- | static/ui.html | 7 | ||||
-rw-r--r-- | static/ui.js | 20 |
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, } |