From 00a6ceea845df36c7596b1922c1989c509226886 Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Tue, 31 Mar 2020 23:26:57 -0400 Subject: [PATCH] add dark/light themes --- common.js | 4 ++++ css/dark.css | 11 +++++++++++ css/light.css | 11 +++++++++++ options.html | 14 +++++++++++++- options.js | 30 ++++++++++++++++++++++++++++-- popup.html | 17 +++++++++++++++++ popup.js | 31 +++++++++++++++++++++++++------ theme-init.js | 9 +++++++++ 8 files changed, 118 insertions(+), 9 deletions(-) create mode 100644 css/dark.css create mode 100644 css/light.css create mode 100644 theme-init.js diff --git a/common.js b/common.js index 0912905..9abdd95 100644 --- a/common.js +++ b/common.js @@ -1,15 +1,19 @@ // Written by Mike Frysinger . Released into the public domain. +function $(s) { return document.querySelector(s); } + var storage = chrome.storage.sync; var settings_keys = [ 'url', 'user', 'pass', + 'theme', ]; var settings_defaults = { 'url': 'http://192.168.0.100', 'user': 'admin', 'pass': '1234', + 'theme': 'system', }; diff --git a/css/dark.css b/css/dark.css new file mode 100644 index 0000000..0650976 --- /dev/null +++ b/css/dark.css @@ -0,0 +1,11 @@ +@charset "utf-8"; + +/* Written by Mike Frysinger . Released into the public domain. */ + +:root { + /* NB: No space after colon. */ + --theme:dark; + --body-color: black; + --body-filter: invert(1); + --theme-text: '☼'; +} diff --git a/css/light.css b/css/light.css new file mode 100644 index 0000000..9399b81 --- /dev/null +++ b/css/light.css @@ -0,0 +1,11 @@ +@charset "utf-8"; + +/* Written by Mike Frysinger . Released into the public domain. */ + +:root { + /* NB: No space after colon. */ + --theme:light; + --body-color: white; + --body-filter:; + --theme-text: '☀'; +} diff --git a/options.html b/options.html index 1ea430a..e672b76 100644 --- a/options.html +++ b/options.html @@ -7,7 +7,10 @@ Web Power Switch Manager Options - + @@ -27,6 +30,15 @@   + + Theme: + + + + + + +

diff --git a/options.js b/options.js index 540d7cc..4df24aa 100644 --- a/options.js +++ b/options.js @@ -55,14 +55,40 @@ function toggle_visible_pass() { return false; } +function theme_select(theme, init) { + const theme_system = $('#theme-system'); + const theme_light = $('#theme-light'); + const theme_dark = $('#theme-dark'); + + theme_system.className = theme == 'system' ? 'selected' : ''; + theme_light.className = theme == 'light' ? 'selected' : ''; + theme_dark.className = theme == 'dark' ? 'selected' : ''; + + if (init) { + theme_system.onclick = theme_click; + theme_light.onclick = theme_click; + theme_dark.onclick = theme_click; + } +} + +function theme_click() { + const theme = this.textContent.toLowerCase(); + theme_select(theme); + storage.set({theme}); +} + window.onload = function() { - storage.get(settings_keys, function(settings) { + storage.get(settings_keys, function(settings_storage) { + const settings = Object.assign({}, settings_defaults, settings_storage); + + theme_select(settings['theme'], true); + var field = document.getElementById('save'); field.onclick = update_settings; settings_keys.forEach(function(key) { var field = document.getElementById(key); - field.value = settings[key] || settings_defaults[key]; + field.value = settings[key]; field.onkeydown = keydown; }); }); diff --git a/popup.html b/popup.html index 7ea22fe..b8abe51 100644 --- a/popup.html +++ b/popup.html @@ -5,15 +5,32 @@ Web Power Switch Manager + + + + + + +