Skip to content

Commit 1a48d04

Browse files
jeevatkmjeevatkm
authored
fix(enhancement): align options UI with dark theme #162 (#163)
1 parent 9717e81 commit 1a48d04

File tree

2 files changed

+103
-18
lines changed

2 files changed

+103
-18
lines changed

‎options/options.css

+100-16
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,114 @@
77
* https://github.com/jeevatkm/ReplyWithHeaderMozilla/blob/master/LICENSE
88
*/
99

10-
fieldset {
11-
border: 1px solid var(--color-gray-20);
12-
border-top-width: 26px;
13-
margin: 1ex 0 1ex 0;
10+
@media (prefers-color-scheme: dark) {
11+
:root {
12+
--border-color: color-mix(in srgb, var(--background-color-box) 93%, white);
13+
--background-color: color-mix(in srgb, var(--background-color-box) 90%, white);
14+
--hover-color: color-mix(in srgb, var(--background-color-box) 90%, black);
15+
}
16+
17+
body {
18+
color: rgb(228, 228, 229);
19+
}
20+
21+
fieldset {
22+
border: 1px solid var(--color-gray-30);
23+
}
24+
25+
fieldset legend {
26+
background: var(--color-gray-30);
27+
color: #000;
28+
line-height: 26px;
29+
}
30+
31+
#accountSelectImg, #hdrLocaleImg {
32+
filter: invert(80%) sepia(100%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(105%);
33+
}
34+
35+
#tabList li {
36+
border: 1px solid var(--color-gray-30);
37+
font-size: 92%;
38+
font-weight: bold;
39+
}
40+
41+
#tabList li:focus,
42+
#tabList li:hover {
43+
background-color: #3c3c3f !important;
44+
}
45+
46+
#tabList li[aria-selected="true"] {
47+
background-color: var(--background-color-box) !important;
48+
color: #3478f7;
49+
}
50+
51+
#tabList li[aria-selected="false"] {
52+
background-color: #3c3c3f !important;
53+
font-size: 85%;
54+
}
55+
56+
#tabcontent {
57+
border: 1px solid var(--color-gray-30);
58+
}
59+
60+
#multiselectCheckboxes {
61+
background-color: var(--background-color-box) !important;
62+
border: 1px solid #474748 !important;
63+
box-shadow:0 0 10px #000000 !important;
64+
}
65+
66+
#multiselectCheckboxes label:hover {
67+
background: #3c3c3f !important;
68+
border-radius: 4px !important;
69+
}
70+
71+
#buttonPaypal, #buttonGithub {
72+
background-color: var(--color-gray-20) !important;
73+
}
74+
75+
#buttonPaypal:hover, #buttonGithub:hover {
76+
background-color: var(--color-gray-30) !important;
77+
color: #3478f7;
78+
}
79+
1480
}
1581

16-
fieldset legend {
17-
background: var(--color-gray-20);
18-
line-height: 26px;
82+
@media (prefers-color-scheme: light) {
83+
:root {
84+
--border-color: color-mix(in srgb, var(--background-color-box) 93%, black);
85+
--background-color: color-mix(in srgb, var(--background-color-box) 90%, black);
86+
--hover-color: color-mix(in srgb, var(--background-color-box) 90%, white);
87+
}
88+
89+
fieldset {
90+
border: 1px solid var(--color-gray-20);
91+
}
92+
93+
fieldset legend {
94+
background: var(--color-gray-20);
95+
line-height: 26px;
96+
}
97+
1998
}
2099

21-
/* html,
22-
body {
23-
background-color: var(--color-gray-10);
24-
} */
100+
html {
101+
color-scheme: light dark;
102+
background-color: var(--background-color-box);
103+
}
25104

26105
body {
27106
margin: 1em;
28107
}
29108

109+
button {
110+
margin: 3px;
111+
}
112+
113+
fieldset {
114+
border-top-width: 26px !important;
115+
margin: 1ex 0 1ex 0;
116+
}
117+
30118
.vbox {
31119
display: flex;
32120
flex-direction: column;
@@ -35,10 +123,6 @@ body {
35123
align-items: center;
36124
}
37125

38-
button {
39-
margin: 3px;
40-
}
41-
42126
.hbox {
43127
display: flex;
44128
flex-direction: row;
@@ -90,10 +174,10 @@ button {
90174
}
91175

92176
#tabcontent {
93-
/* background-color: white; */
94177
border: 1px solid var(--color-gray-20);
95178
margin: 0px;
96179
padding: 1em;
180+
margin-top: 2px;
97181
}
98182

99183
[aria-hidden="true"] {

‎options/options.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@
1414
<meta charset="UTF-8">
1515
<title>RWH Preferences</title>
1616
<link rel="stylesheet" href="chrome://messenger/skin/colors.css">
17+
<link rel="stylesheet" href="chrome://global/skin/design-system/tokens-shared.css" />
1718
<link rel="stylesheet" href="options.css">
1819
<script src="options.js" type="module"></script>
1920
</head>
2021

2122
<body>
2223

2324
<div class="hbox" style="margin-bottom: 1.5em">
24-
<img src='/images/mail-accounts.svg' width='21' height='21' title="Mail Accounts" />
25+
<img id="accountSelectImg" src='/images/mail-accounts.svg' width='21' height='21' title="Mail Accounts" />
2526
<div id="multiselectAccount" class="multiselect">
2627
<div id="selectBox" class="selectBox">
2728
<select><option>Select an Accounts</option></select>
@@ -30,7 +31,7 @@
3031
<div id="multiselectCheckboxes"></div>
3132
</div>
3233
<div class="spacer"></div>
33-
<img src='/images/language.svg' width='21' height='21' title="Locale" />
34+
<img id="hdrLocaleImg" src='/images/language.svg' width='21' height='21' title="Locale" />
3435
<select id="hdrLocale" data-preference="header.locale" style="width: 175px;">
3536
</select>
3637
</div>

0 commit comments

Comments
 (0)