From 6293bf85123c57c4ead5dee7cdce7a07a4290a22 Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Sat, 11 Mar 2017 21:57:59 -0800 Subject: [PATCH] add a light/dark theme selector --- js/main.js | 4 ++++ js/theme.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ main.html | 9 +++++++++ 3 files changed, 66 insertions(+) create mode 100644 js/theme.js diff --git a/js/main.js b/js/main.js index b6ce2a9..0978f8f 100644 --- 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 index 0000000..78e585c --- /dev/null +++ b/js/theme.js @@ -0,0 +1,53 @@ +// Written by Mike Frysinger . +// 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 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': ['☀', 'black', 'white', 'black'], + 'dark': ['☼', '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 3174f0c..83b563a 100644 --- a/main.html +++ b/main.html @@ -7,6 +7,7 @@ +