Improved dark mode

pages/options/options.css

@@ -94,6 +94,10 @@ body {
 
 .input-text {
     max-width: 320px;
+    border-radius: 3px;
+    border: 1px solid darkgrey;
+    padding: 5px !important;
+    color: #555;
 }
 
 /**
@@ -266,18 +270,17 @@ body[dir="rtl"] .input-text {
 
     body {
         background-color: #202023;
-        color: #f9f9fa;
     }
 
-    .title-option {
-        color: #f9f9fa;
+    body, .title-option {
+        color: #aeaeae;
     }
 
     .description-option {
         color: #b1b1b3;
     }
 
-    #last-mapping-update, .badge-warning, .notice-message, .button-warning {
+    .notice-head > span, #last-mapping-update, .badge-warning, .notice-message, .button-warning {
         color: #4b3000;
     }
 }

pages/options/options.html

@@ -168,7 +168,7 @@
                 <p class="without-checkbox" data-i18n-content="generateRuleSetDescription"></p>
             </div>
             <div class="ruleset-generator">
-                <p id="last-mapping-update" class="description-option last-update without-checkbox" data-i18n-content="lastUpdate">Last update: </p>
+                <p id="last-mapping-update" class="description-option last-update without-checkbox" data-i18n-content="lastUpdate">Last update:</p>
             </div>
             <div class="ruleset-generator">
                 <input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">

pages/options/options.js

@@ -67,7 +67,7 @@ options._renderOptionsPanel = function () {
         options._renderLocaleNotice();
     }
 
-    document.getElementById('last-mapping-update').textContent += lastMappingUpdate;
+    document.getElementById('last-mapping-update').textContent += ' ' + lastMappingUpdate;
 };
 
 options._renderBlockMissingNotice = function () {

pages/popup/popup.css

@@ -19,7 +19,7 @@ header {
     border-bottom: solid #d3d3d3 1px;
     display: flex;
     position: relative;
-    padding: 8px 15px 15px 4px;
+    padding: 8px 15px 8px 4px;
 }
 
 .panel {

pages/statistics/statistics.css

@@ -19,7 +19,7 @@ header {
     border-bottom: solid #d3d3d3 1px;
     display: flex;
     position: relative;
-    padding: 8px 15px 15px 4px;
+    padding: 8px 15px 8px 4px;
 }
 
 .panel {
@@ -317,6 +317,11 @@ footer {
         color: #717171;
     }
 
+    #label-donate {
+        background-color: #404040;
+        color: #bbb;
+    }
+
     .panel:not(:last-child) {
         border-bottom-color: #292929;
     }

pages/style.css

@@ -257,3 +257,17 @@ hr {
         min-height: unset;
     }
 }
+@media (prefers-color-scheme: dark) {
+
+    /**
+     * Sections
+     */
+
+    body {
+        background-color: #404040;
+    }
+
+    body, p, h3, .subtle-hint {
+        color: #aeaeae !important;
+    }
+}

pages/updates/updates.html

@@ -26,6 +26,7 @@
                             <li>Updated: jQueryUI to v1.12.1</li>
                             <li>Added: MooTools v1.4.5 (<a href="https://codeberg.org/nobody/LocalCDN/issues/32">#32</a>)</li>
                             <li>Release notes: Open new tab in background (<a href="https://addons.mozilla.org/addon/localcdn-fork-of-decentraleyes/reviews/1554950/">Review</a>)</li>
+                            <li>Improved: Dark Mode</li>
                         </ul>
                     <div class="topic-label">
                         Generate rule sets for uBlock or uMatrix