Dark mode for HZ+ Options pages & popup window (#1028)

extesy · Sep 25, 2022 · 1aac3f3 · 1aac3f3
1 parent e3b2efe
commit 1aac3f3
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 11 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -83,6 +83,10 @@
         "message": "Enable Hover Zoom",
         "description": "[options] Enable Hover Zoom+ option"
     },
+    "optDarkMode": {
+        "message": "Dark mode",
+        "description": "[options] Enable dark mode for Options & Popup"
+    },
     "optSectionView": {
         "message": "Viewer",
         "description": "[options] Page section for viewer options"

diff --git a/css/style.css b/css/style.css
@@ -62,18 +62,28 @@ select.picker {
 
 legend {
     font-weight: bold;
+    border-style: solid;
+    border-radius: 10px;
+    border: solid;
+    border-width: thin;
+    border-color: #D8D8D8F0;
 }
 
 label { margin: 3px; }
 
-/* popup styling */
-.popup table { width: max-content; margin-bottom: 0px;}
+/* Popup styling */
+body.popup { overflow: overlay; }
+body.popup.darkmode { background-color: #101010F0; } /* dark grey */
+.popup table { width: max-content; margin-bottom: 0px; }
 .popup table tr:nth-child(even) { background-color: #FFCF0940; } /* light yellow */
+.popup.darkmode table tr:nth-child(even) { background-color: #DCB200F0; } /* yellow */
 .popup table tr:nth-child(odd) { background-color: #85B7E740; } /* light blue */
-.popup table tr td { font-size: 12px; padding-left: 5px; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; }
+.popup.darkmode table tr:nth-child(odd) { background-color: #0360B9F0; } /* blue */
+.popup table tr td { font-size: 12px; padding-left: 5px; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; border-top: 0px; color: #202020F0; }
 .popup table tr td.ttip { padding-right: 30px; }
 
 .popup .picker { height: auto; padding-right: 5px; }
+.popup.darkmode .picker { background-image: linear-gradient(#606060F0, #101010F0); color: #F0F0F0F0; background-color: #101010F0; }
 
 .popup .tab-content, .popup .checkbox { padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; }
 
@@ -85,9 +95,11 @@ label { margin: 3px; }
 
 .popup a { font-size: 115%; }
 
+.popup.darkmode #lblTitle, .popup.darkmode #lblToggle { color: #B0B0B0F0; } /* light grey */
 .popup #aMoreOptions { color: #2644D0FF; } /* strong blue */
 
 .popup .ttip:after,.ttip:before { display: block; font-size: 12px; margin-left: 0px; padding-left: 3px; padding-top: 0px; padding-bottom: 0px; text-align: left; }
+.popup.darkmode .ttip { color: #101010F0; } /* dark grey */
 
 .popup #messages { margin-top: 0px; margin-bottom: 0px; }
 
@@ -100,17 +112,36 @@ label { margin: 3px; }
 .popup div.field { margin-bottom: 0px; }
 
 .popup .noscrollbars::-webkit-scrollbar { display: none; }
+
 .popup body { padding: 0px; margin: 0px; }
 
 .popup .enableForSite { color: limegreen; }
 .popup .disableForSite { color: red; }
 
-/* highlight user modification(s) in popup & options pages */
-div.modified, select.modified, span.modified, input[type=text].modified, input[type=range].modified { outline-color: orange; outline-style: solid; outline-width: medium; }
-span.added { outline-color: orange; outline-style: solid; outline-width: medium; padding-left: 3px; padding-right: 3px; border-radius: 4px; }
+/* Options styling */
+body, h1, h2, h3, h4, h5, h6, a, p, .tab-nav li a { font-family: Lucida Sans Unicode, Tahoma, Geneva, sans-serif; }
+
+body.options.darkmode { background-color: #101010F0; color: #B0B0B0F0; }
+.options.darkmode fieldset, .options.darkmode table { background-color: #404040F0; }
+.options.darkmode i { color: black; }
+.options.darkmode legend { background-color: #202020F0; }
+.options.darkmode .picker { background-image: linear-gradient(#606060F0, #101010F0); color: #F0F0F0F0; background-color: #101010F0; }
+
+.options.darkmode.select::-webkit-scrollbar-track {
+  border: rgb(180, 180, 180);
+  background-color: #ff6536;
+}
+
+.options.darkmode.select::-webkit-scrollbar-thumb {
+  background-color: #3677ef;
+  border: 1px solid rgb(193, 193, 193);
+}
 
 /* FAQ */
 .faq.question { font-weight: bold; margin-top: 10px; }
 .faq.answer, .formats { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
 
 .format a { padding-left: 5px; padding-right: 5px; }
+/* highlight user modification(s) in popup & options pages */
+div.modified, select.modified, span.modified, input[type=text].modified, input[type=range].modified { outline-color: orange; outline-style: solid; outline-width: medium; }
+span.added { outline-color: orange; outline-style: solid; outline-width: medium; padding-left: 3px; padding-right: 3px; border-radius: 4px; }
diff --git a/html/options.html b/html/options.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../css/style.css" />
     <script src="../js/libs/modernizr-2.7.1.js"></script>
 </head>
-<body>
+<body class="options">
     <div class="pretty container">
         <div class="row">
             <div class="two columns text-center"><img src="../images/icon128.png"></div>
@@ -26,11 +26,15 @@ <h1 class="ten columns text-center" data-i18n="optTitle"></h1>
                 </ul>
                 <div class="tab-content active">
                     <form>
-                        <div class="field">
+                        <div class="field" style="display:flex; justify-content:space-between;">
                             <label class="checkbox" for="chkExtensionEnabled">
                                 <input type="checkbox" id="chkExtensionEnabled"><span></span>
                                 <div style="display:inline" data-i18n="optExtensionEnabled"></div>
                             </label>
+                            <label class="checkbox" for="chkDarkMode">
+                                <input type="checkbox" id="chkDarkMode"><span></span>
+                                <div style="display:inline" data-i18n="optDarkMode"></div>
+                            </label>
                         </div>
                         <fieldset>
                             <legend data-i18n="optSectionView"></legend>

diff --git a/html/popup.html b/html/popup.html
@@ -12,11 +12,11 @@
     </style>
     <script src="../js/libs/modernizr-2.7.1.js"></script>
 </head>
-<body>
-    <div class="pretty container popup noscrollbars">
+<body class="popup">
+    <div class="pretty container noscrollbars">
         <div class="header">
             <div><img src="../images/icon48.png"></div>
-            <h5 data-i18n="optTitle"></h5>
+            <h5 id="lblTitle" data-i18n="optTitle"></h5>
         </div>
         <div class="field">
             <label class="checkbox" for="chkExcludeSite">

diff --git a/js/common.js b/js/common.js
@@ -1,5 +1,6 @@
 var factorySettings = {
     extensionEnabled : true,
+    darkMode : false,
     zoomFactor : 1,
     zoomVideos : true,
     videoPositionStep : 10,
@@ -85,6 +86,7 @@ function loadOptions() {
     options = JSON.parse(localStorage.options);  // TODO: Migrate to https://developer.chrome.com/extensions/storage
 
     options.extensionEnabled = options.hasOwnProperty('extensionEnabled') ? options.extensionEnabled : factorySettings.extensionEnabled;
+    options.darkMode = options.hasOwnProperty('darkMode') ? options.darkMode : factorySettings.darkMode;
     options.zoomFactor = options.hasOwnProperty('zoomFactor') ? options.zoomFactor : factorySettings.zoomFactor;
     options.zoomVideos = options.hasOwnProperty('zoomVideos') ? options.zoomVideos : factorySettings.zoomVideos;
     options.videoPositionStep = options.hasOwnProperty('videoPositionStep') ? options.videoPositionStep : factorySettings.videoPositionStep;
@@ -234,3 +236,9 @@ function i18n() {
         elem.attr('data-tooltip', chrome.i18n.getMessage(elem.attr('data-i18n-tooltip')));
     });
 }
+
+// enable/disable dark mode for Options & Popup
+function chkDarkMode() {
+    if (options.darkMode) $('body').addClass('darkmode');
+    else $('body').removeClass('darkmode');
+}
diff --git a/js/options.js b/js/options.js
@@ -78,6 +78,7 @@ function loadKeys(sel) {
 // TODO: Migrate to https://developer.chrome.com/extensions/storage
 function saveOptions() {
     options.extensionEnabled = $('#chkExtensionEnabled')[0].checked;
+    options.darkMode = $('#chkDarkMode')[0].checked;
     options.zoomFactor = $('#txtZoomFactor')[0].value;
     options.zoomVideos = $('#chkZoomVideos')[0].checked;
     options.videoPositionStep = $('#txtVideoPositionStep')[0].value;
@@ -168,6 +169,7 @@ function restoreOptions(optionsFromFactorySettings) {
     options = optionsFromFactorySettings || loadOptions();
 
     $('#chkExtensionEnabled').trigger(options.extensionEnabled ? 'gumby.check' : 'gumby.uncheck');
+    $('#chkDarkMode').trigger(options.darkMode ? 'gumby.check' : 'gumby.uncheck');
     $('#txtZoomFactor')[0].value = options.zoomFactor;
     $('#chkZoomVideos').trigger(options.zoomVideos ? 'gumby.check' : 'gumby.uncheck');
     $('#txtVideoPositionStep')[0].value = options.videoPositionStep;
@@ -551,6 +553,14 @@ function updateRngAudioVolume() {
     $('#rngAudioVolume').val(this.value);
 }
 
+function updateDarkMode() {
+    if ($('#chkDarkMode')[0].checked) {
+        $('body').addClass('darkmode');
+    } else {
+        $('body').removeClass('darkmode');
+    }
+}
+
 function onMessage(message, sender, callback) {
     switch (message.action) {
         case 'optionsChanged':
@@ -643,6 +653,7 @@ $(function () {
     initEnableDownloads();
     initAddToHistory();
     initAllowHeadersRewrite();
+    chkDarkMode();
     $("#version").text(chrome.i18n.getMessage("optFooterVersionCopyright", [chrome.runtime.getManifest().version, localStorage['HoverZoomLastUpdate'] ? localStorage['HoverZoomLastUpdate'] : localStorage['HoverZoomInstallation']]));
     $('#btnSave').click(function() { removeModifications(); saveOptions(); displayMsg(Saved); return false; }); // "return false" needed to prevent page scroll
     $('#btnCancel').click(function() { removeModifications(); restoreOptions(); displayMsg(Cancel); return false; });
@@ -672,6 +683,7 @@ $(function () {
     $('#txtDownloadFolder').change(downloadFolderOnChange);
     $('#chkUseSeparateTabOrWindowForUnloadableUrlsEnabled').parent().on('gumby.onChange', updateUseSeparateTabOrWindowForUnloadableUrls);
     $('#chkHideMouseCursor').parent().on('gumby.onChange', updateDivHideMouseCursor);
+    $('#chkDarkMode').parent().on('gumby.onChange', updateDarkMode);
 
     restoreOptions();
     loadPlugins();

diff --git a/js/popup.js b/js/popup.js
@@ -200,6 +200,7 @@ $(function () {
     initActionKeys();
     i18n();
     options = loadOptions();
+    chkDarkMode();
 
     $('#btnSave').click(function() { removeModifications(); saveOptions(); displayMsg(Saved); return false; }); // "return false" needed to prevent page scroll
     $('#btnCancel').click(function() { removeModifications(); restoreOptions(); displayMsg(Cancel); return false; });