From: Mike Frysinger Date: Tue, 21 Apr 2020 05:01:34 +0000 (-0400) Subject: add dark mode support X-Git-Tag: v0.3~8 X-Git-Url: https://git.wh0rd.org/?a=commitdiff_plain;h=68553004ff7c79cbd2be8dc97750d1ed19592510;p=chrome-ext%2Ftabs-backup.git add dark mode support --- 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 + + + + + + +