From 68553004ff7c79cbd2be8dc97750d1ed19592510 Mon Sep 17 00:00:00 2001 From: Mike Frysinger Date: Tue, 21 Apr 2020 01:01:34 -0400 Subject: [PATCH] add dark mode support --- dark.css | 7 +++++++ light.css | 7 +++++++ manifest.json | 2 +- options.html | 31 ++++++++++++++++++++++++++++++- options.js | 34 ++++++++++++++++++++++++++++++++++ popup.html | 13 +++++++++++++ theme-init.js | 11 +++++++++++ 7 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 dark.css create mode 100644 light.css create mode 100644 theme-init.js diff --git a/dark.css b/dark.css new file mode 100644 index 0000000..09a977e --- /dev/null +++ b/dark.css @@ -0,0 +1,7 @@ +:root { + /* NB: No space after colon. */ + --theme:dark; + --body-color: black; + --body-filter: invert(1); + --img-filter: invert(1); +} diff --git a/light.css b/light.css new file mode 100644 index 0000000..c4b4801 --- /dev/null +++ b/light.css @@ -0,0 +1,7 @@ +:root { + /* NB: No space after colon. */ + --theme:light; + --body-color: white; + --body-filter:; + --img-filter:; +} diff --git a/manifest.json b/manifest.json index a4e71fe..d1eb95e 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "vapier tabs backup", - "version": "0.2.1.3", + "version": "0.2.1.4", "manifest_version": 2, "description": "With 'Tabs Backup & Restore' you will never lose your work again! Backup an entire Chrome session (windows and tabs).", "icons": { "16": "icon_16.png", diff --git a/options.html b/options.html index 87f638e..70d614c 100644 --- a/options.html +++ b/options.html @@ -3,10 +3,18 @@ Tabs Backup & Restore - Options + + + + + + + @@ -201,6 +214,22 @@ The maximum number of backups to keep. Old backups will be deleted when this number is reached. + + + Theme + + + + + + + + + + The color scheme to use in this extension. + + + diff --git a/options.js b/options.js index 26d6d1c..e014be8 100644 --- a/options.js +++ b/options.js @@ -4,6 +4,10 @@ document.addEventListener('DOMContentLoaded', function () { document.querySelector('#saveBtn').addEventListener('click', saveOptions); document.querySelector('#restoreDefaultBtn').addEventListener('click', restoreToDefault); + ['light', 'system', 'dark'].forEach((theme) => { + document.getElementById(`theme-${theme}`).addEventListener('click', setThemeClick); + }); + //document.querySelector('body').addEventListener('click', restoreOptions); }); @@ -25,6 +29,30 @@ function setSelectValue (selectId, value) { } } +function setThemeClick() { + const theme = this.textContent.toLowerCase(); + setThemeValue(theme); + switchTheme(theme); +} + +function setThemeValue(value) { + const element = document.getElementById('prefsTheme'); + switch (value) { + case 'light': + case 'dark': + break; + default: + value = 'system'; + break; + } + element.value = value; + + ['light', 'system', 'dark'].forEach((theme) => { + document.getElementById(`theme-${theme}`).className = + value == theme ? 'selected' : ''; + }); +} + function saveOptions () { var backupPeriodMinutes = getSelectValue("prefsSelectBackupPeriod"); localStorage.prefsBackupTimer = backupPeriodMinutes; @@ -32,6 +60,9 @@ function saveOptions () { var backupMaxItems = getSelectValue("prefsSelectMaxBackups"); localStorage.prefsMaxBackupItems = backupMaxItems; + var theme = document.getElementById('prefsTheme').value; + localStorage.prefsTheme = theme; + // Re-initialize the backup alarm chrome.runtime.getBackgroundPage((bg) => bg.initAlarm()); @@ -47,6 +78,7 @@ function restoreToDefault() { // those values are also set in background.js.. setSelectValue ("prefsSelectBackupPeriod", "5"); setSelectValue ("prefsSelectMaxBackups", "30"); + setThemeValue("system"); saveOptions(); } @@ -54,7 +86,9 @@ function restoreToDefault() { function restoreOptions() { var backupPeriodMinutes = localStorage.prefsBackupTimer; var backupMaxItems = localStorage.prefsMaxBackupItems; + var theme = localStorage.prefsTheme; setSelectValue ("prefsSelectBackupPeriod", backupPeriodMinutes); setSelectValue ("prefsSelectMaxBackups", backupMaxItems); + setThemeValue(theme); } diff --git a/popup.html b/popup.html index fba1063..b7fe4d2 100644 --- a/popup.html +++ b/popup.html @@ -3,6 +3,13 @@ Tabs Backup & Restore + + + + + + +