add a light/dark theme selector

diff --git a/js/main.js b/js/main.js
index b6ce2a9f6d184677d098dca4300a5a27fc64a0fa..0978f8faf0999fa434c5e2642aeedadcdb9e7821 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -199,12 +199,14 @@ var settings_keys = [
        'mac',
        'pass',
        'port',
+       'theme',
 ];
 
 function load_settings() {
        var storage = chrome.storage.local;
 
        chrome.storage.local.get(settings_keys, function(settings) {
+               set_theme(settings['theme'] || 'dark');
                var form = $$('form[name=settings]');
                form.host.value = settings['host'] || '192.168.0.255';
                form.port.value = settings['port'] || '40000';
@@ -227,6 +229,7 @@ function store_settings() {
                'mac': form.mac.value,
                'pass': form.pass.value,
                'port': form.port.value,
+               'theme': curr_theme,
        };
        chrome.storage.local.set(settings);
 }
@@ -238,6 +241,7 @@ window.onload = function() {
        $$('form[name=settings]').onsubmit = send;
        $$('a[name=mac-paste]').onclick = paste_mac;
        $$('a[name=pass-paste]').onclick = paste_pass;
+       $$('input[name=theme]').onclick = toggle_theme;
 
        load_settings();
 };

diff --git a/js/theme.js b/js/theme.js
new file mode 100644 (file)
index 0000000..78e585c
--- /dev/null
+++ b/js/theme.js
@@ -0,0 +1,53 @@
+// Written by Mike Frysinger <vapier@gmail.com>.
+// Released into the public domain.
+
+/*
+ * This code is all very simple/dumb.  If we want to ever support more
+ * complicated theme logic, then it should be thrown away entirely.
+ */
+
+var curr_theme;
+
+function _set_theme(txt, fg, bg, a) {
+       var b = $$('body');
+       b.style.color = fg;
+       b.style.backgroundColor = bg;
+
+       // This gets a bit tricky as we want to update the style sheet
+       // to quickly apply to all <a> tags.
+       var s, sheet, sheets, r, rule, rules;
+       sheets = document.styleSheets;
+       for (s = 0; s < sheets.length; ++s) {
+               sheet = sheets[s];
+               rules = sheet.cssRules;
+               for (r = 0; r < rules.length; ++r) {
+                       rule = rules[r];
+                       if (rule.selectorText == 'a') {
+                               rule.style.color = a;
+                               break;
+                       }
+               }
+       }
+
+       // We can't set UTF8 text, or set HTML entities directly.  Ugh.
+       var span = document.createElement('span');
+       span.innerHTML = txt;
+       $$('input[name=theme]').value = span.innerText;
+}
+
+function set_theme(name) {
+       var themes = {
+               'light': ['&#9728;', 'black', 'white', 'black'],
+               'dark': ['&#9788;', 'white', 'black', 'grey']
+       };
+       curr_theme = name;
+       _set_theme.apply(this, themes[name]);
+       chrome.storage.local.set({'theme': curr_theme});
+}
+
+function toggle_theme() {
+       if (curr_theme == 'light')
+               set_theme('dark');
+       else
+               set_theme('light');
+}

diff --git a/main.html b/main.html
index 3174f0cee0a0c70d46629551f9821d2d26ebf1f3..83b563accbb5fbff67ed305ecfca90f10e6dcec9 100644 (file)
--- a/main.html
+++ b/main.html
@@ -7,6 +7,7 @@
 <script src='js/net_error_list.js'></script>
 <script src='js/common.js'></script>
 <script src='js/main.js'></script>
+<script src='js/theme.js'></script>
 <style>
 body {
        background-color: black;
@@ -23,6 +24,13 @@ input[name=port] {
        text-align: center;
 }
 
+input[name=theme] {
+       text-align: center;
+       position: absolute;
+       top: 3px;
+       left: 3px;
+}
+
 a {
        color: grey;
 }
@@ -35,6 +43,7 @@ a {
  <a href='https://en.wikipedia.org/wiki/Wake-on-LAN' target='_blank'>
  Wake-On-Lan (WOL) Magic Packet Generator
  </a>
+ <input type='button' name='theme' value='&#9788;'>
 </p>
 
 <div class='settings'>