add dark mode support

[chrome-ext/tabs-backup.git] / options.js

diff --git a/options.js b/options.js
index 26d6d1ce1941024ff02f4d426c97a5d6517118ab..e014be8c154196c7fc444b5b9807ddb9d7ed3856 100644 (file)
--- 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);
 }