From 1a48d04c4c57328ba601b3142a97bdad294939a6 Mon Sep 17 00:00:00 2001
From: "Jeevanandam M." <jeeva@myjeeva.com>
Date: Mon, 5 Aug 2024 22:23:09 -0700
Subject: [PATCH] fix(enhancement): align options UI with dark theme #162
 (#163)

---
 options/options.css  | 116 +++++++++++++++++++++++++++++++++++++------
 options/options.html |   5 +-
 2 files changed, 103 insertions(+), 18 deletions(-)

diff --git a/options/options.css b/options/options.css
index be54d54..10ae798 100644
--- 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
index 46294fa..2fcfba4 100644
--- a/options/options.html
+++ b/options/options.html
@@ -14,6 +14,7 @@
     <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>
@@ -21,7 +22,7 @@
 <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>