fix(enhancement): align options UI with dark theme #162 (#163)

jeevatkm · Aug 6, 2024 · 1a48d04 · 1a48d04
1 parent 9717e81
commit 1a48d04
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 18 deletions.
diff --git a/options/options.css b/options/options.css
@@ -7,26 +7,114 @@
  * https://github.com/jeevatkm/ReplyWithHeaderMozilla/blob/master/LICENSE
  */
 
-fieldset {
-    border: 1px solid var(--color-gray-20);
-    border-top-width: 26px;
-    margin: 1ex 0 1ex 0;
+@media (prefers-color-scheme: dark) {
+    :root {
+        --border-color: color-mix(in srgb, var(--background-color-box) 93%, white);
+        --background-color: color-mix(in srgb, var(--background-color-box) 90%, white);
+        --hover-color: color-mix(in srgb, var(--background-color-box) 90%, black);
+    }
+
+    body {
+        color: rgb(228, 228, 229);
+    }
+
+    fieldset {
+        border: 1px solid var(--color-gray-30);
+    }
+
+    fieldset legend {
+        background: var(--color-gray-30);
+        color: #000;
+        line-height: 26px;
+    }
+
+    #accountSelectImg, #hdrLocaleImg {
+        filter: invert(80%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(105%);
+    }
+
+    #tabList li {
+        border: 1px solid var(--color-gray-30);
+        font-size: 92%;
+        font-weight: bold;
+    }
+
+    #tabList li:focus,
+    #tabList li:hover {
+        background-color: #3c3c3f !important;
+    }
+
+    #tabList li[aria-selected="true"] {
+        background-color: var(--background-color-box) !important;
+        color: #3478f7;
+    }
+
+    #tabList li[aria-selected="false"] {
+        background-color: #3c3c3f !important;
+        font-size: 85%;
+    }
+
+    #tabcontent {
+        border: 1px solid var(--color-gray-30);
+    }
+
+    #multiselectCheckboxes {
+        background-color: var(--background-color-box) !important;
+        border: 1px solid #474748 !important;
+        box-shadow:0 0 10px #000000 !important;
+    }
+
+    #multiselectCheckboxes label:hover {
+        background: #3c3c3f !important;
+        border-radius: 4px !important;
+    }
+
+    #buttonPaypal, #buttonGithub {
+        background-color: var(--color-gray-20) !important;
+    }
+
+    #buttonPaypal:hover, #buttonGithub:hover {
+        background-color: var(--color-gray-30) !important;
+        color: #3478f7;
+    }
+
 }
 
-fieldset legend {
-    background: var(--color-gray-20);
-    line-height: 26px;
+@media (prefers-color-scheme: light) {
+    :root {
+        --border-color: color-mix(in srgb, var(--background-color-box) 93%, black);
+        --background-color: color-mix(in srgb, var(--background-color-box) 90%, black);
+        --hover-color: color-mix(in srgb, var(--background-color-box) 90%, white);
+    }
+
+    fieldset {
+        border: 1px solid var(--color-gray-20);
+    }
+
+    fieldset legend {
+        background: var(--color-gray-20);
+        line-height: 26px;
+    }
+
 }
 
-/* html,
-body {
-    background-color: var(--color-gray-10);
-} */
+html {
+    color-scheme: light dark;
+    background-color: var(--background-color-box);
+}
 
 body {
     margin: 1em;
 }
 
+button {
+    margin: 3px;
+}
+
+fieldset {
+    border-top-width: 26px !important;
+    margin: 1ex 0 1ex 0;
+}
+
 .vbox {
     display: flex;
     flex-direction: column;
@@ -35,10 +123,6 @@ body {
     align-items: center;
 }
 
-button {
-    margin: 3px;
-}
-
 .hbox {
     display: flex;
     flex-direction: row;
@@ -90,10 +174,10 @@ button {
 }
 
 #tabcontent {
-    /* background-color: white; */
     border: 1px solid var(--color-gray-20);
     margin: 0px;
     padding: 1em;
+    margin-top: 2px;
 }
 
 [aria-hidden="true"] {

diff --git a/options/options.html b/options/options.html
@@ -14,14 +14,15 @@
     <meta charset="UTF-8">
     <title>RWH Preferences</title>
     <link rel="stylesheet" href="chrome://messenger/skin/colors.css">
+    <link rel="stylesheet" href="chrome://global/skin/design-system/tokens-shared.css" />
     <link rel="stylesheet" href="options.css">
     <script src="options.js" type="module"></script>
 </head>
 
 <body>
 
     <div class="hbox" style="margin-bottom: 1.5em">
-        <img src='/images/mail-accounts.svg' width='21' height='21' title="Mail Accounts" />
+        <img id="accountSelectImg" src='/images/mail-accounts.svg' width='21' height='21' title="Mail Accounts" />
         <div id="multiselectAccount" class="multiselect">
             <div id="selectBox" class="selectBox">
                 <select><option>Select an Accounts</option></select>
@@ -30,7 +31,7 @@
             <div id="multiselectCheckboxes"></div>
         </div>
         <div class="spacer"></div>
-        <img src='/images/language.svg' width='21' height='21' title="Locale" />
+        <img id="hdrLocaleImg" src='/images/language.svg' width='21' height='21' title="Locale" />
         <select id="hdrLocale" data-preference="header.locale" style="width: 175px;">
         </select>
     </div>