]> git.wh0rd.org - chrome-ext/tabs-backup.git/commitdiff
git.wh0rd.org / chrome-ext / tabs-backup.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 3b8161c)
add dark mode support
authorMike Frysinger <vapier@gentoo.org>
Tue, 21 Apr 2020 05:01:34 +0000 (01:01 -0400)
committerMike Frysinger <vapier@gentoo.org>
Tue, 21 Apr 2020 05:01:34 +0000 (01:01 -0400)
dark.css [new file with mode: 0644] patch | blob
light.css [new file with mode: 0644] patch | blob
manifest.json patch | blob | blame | history
options.html patch | blob | blame | history
options.js patch | blob | blame | history
popup.html patch | blob | blame | history
theme-init.js [new file with mode: 0644] patch | blob

diff --git a/dark.css b/dark.css
new file mode 100644 (file)
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 (file)
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 a4e71fe6194d0a637da0642c702a5b833be2e42c..d1eb95ed1c66681431fe0d92636496a1f2466722 100644 (file)
--- 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 87f638e340f25ac0ae6c45bc30898897ed0da8fb..70d614c6b9861dfc0f62bab040326c71628aca7b 100644 (file)
--- a/options.html
+++ b/options.html
@@ -3,10 +3,18 @@
   <head>
     <meta charset='utf-8'/>
     <title>Tabs Backup & Restore - Options</title>
+
+    <link rel='stylesheet' href='dark.css' media='(prefers-color-scheme: dark)'/>
+    <link rel='stylesheet' href='light.css' media='(prefers-color-scheme: light), (prefers-color-scheme: no-preference)'/>
+    <!-- Load theme override asap to help with initial loading/flashing. -->
+    <link rel='stylesheet' href='' id='theme-override'/>
+    <script src="theme-init.js"></script>
+
     <style>
       body {
                font-family: Arial;
-
+               background-color: var(--body-color);
+               filter: var(--body-filter);
         overflow-x:hidden;
       }
 
@@ -22,6 +30,7 @@
         vertical-align:middle;
         width:75px;
         height:75px;
+               filter: var(--img-filter);
       }
 
          .menuItem {
@@ -137,6 +146,10 @@
          select {
                padding: 5px;
          }
+
+         button.selected {
+               filter: invert(1);
+         }
     </style>
 
        <!-- <script src="jquery-1.8.2.min.js"></script> -->
@@ -201,6 +214,22 @@
                                The maximum number of backups to keep. Old backups will be deleted when this number is reached.
                        </td>
                </tr>
+
+               <tr class="prefsRow">
+                       <td width="200">Theme</td>
+                       <td>
+                       <input type="text" id="prefsTheme" hidden>
+                       <button id="theme-light">Light</button>
+                       <button id="theme-system">System</button>
+                       <button id="theme-dark">Dark</button>
+                       </td>
+               </tr>
+               <tr>
+                       <td colspan="2" class="prefsDescription">
+                               The color scheme to use in this extension.
+                       </td>
+               </tr>
+
          </table>
 
          </div>
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);
 }
diff --git a/popup.html b/popup.html
index fba1063abc864e96a6d94e8292016851622dc5d5..b7fe4d22a2cf43ec52c61d93f6509424a5fa9e56 100644 (file)
--- a/popup.html
+++ b/popup.html
@@ -3,6 +3,13 @@
   <head>
     <meta charset='utf-8'/>
     <title>Tabs Backup & Restore</title>
+
+    <link rel='stylesheet' href='dark.css' media='(prefers-color-scheme: dark)'/>
+    <link rel='stylesheet' href='light.css' media='(prefers-color-scheme: light), (prefers-color-scheme: no-preference)'/>
+    <!-- Load theme override asap to help with initial loading/flashing. -->
+    <link rel='stylesheet' href='' id='theme-override'/>
+    <script src="theme-init.js"></script>
+
     <style>
 
        ::-webkit-scrollbar {
@@ -18,6 +25,11 @@
        }
 
 
+         html {
+               background-color: var(--body-color);
+               filter: var(--body-filter);
+         }
+
       body {
                font-family: Arial;
         min-width:357px;
@@ -35,6 +47,7 @@
         vertical-align:middle;
         width:75px;
         height:75px;
+               filter: var(--img-filter);
       }
 
          .menuItem {
diff --git a/theme-init.js b/theme-init.js
new file mode 100644 (file)
index 0000000..ade6ae2
--- /dev/null
+++ b/theme-init.js
@@ -0,0 +1,11 @@
+// Load the theme override asap to help with initial loading/flashing.
+function switchTheme(theme) {
+       const css = document.querySelector('link#theme-override');
+       if (theme == 'light' || theme == 'dark') {
+               css.href = `${theme}.css`;
+       } else {
+               css.href = '';
+       }
+}
+
+switchTheme(localStorage.prefsTheme);
With 'Tabs Backup & Restore' you will never lose your work again! Backup an entire Chrome session (windows and tabs).