Skip to content

Commit 1494c07

Browse files
Guerra24Guerra24
committed
Fix accent color
1 parent bb99101 commit 1494c07

22 files changed

+153
-145
lines changed

‎README.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ A theme that follows UWP styling.
77
Select the appropriate file:
88

99
- [Firefox Nightly](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/nightly.zip)
10-
- [Firefox 96-101](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/firefox-96.zip)
10+
- [Firefox 96-102](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/firefox-96.zip)
1111
- [Firefox 89-95](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/firefox-89.zip)
1212

1313
Copy the content inside the folder where userChrome.css file is located into your *chrome* folder.
@@ -53,10 +53,18 @@ All the theme vars `--uwp-*` can be overridden, Firefox vars too but only if the
5353

5454
If you want to override the accent color create two new prefs, both string type set to RGB Hex values.
5555

56+
#### Firefox 102 and older
57+
5658
`ui.-moz-accent-color`=`#FF00FF` Accent color
5759

5860
`ui.-moz-accent-color-foreground`=`#FFFFFF` Text color when the background is the accent color.
5961

62+
#### Firefox 103 and newer
63+
64+
`ui.accentcolor`=`#FF00FF` Accent color
65+
66+
`ui.accentcolortext`=`#FFFFFF` Text color when the background is the accent color.
67+
6068
## Screenshots (Sun Valley)
6169

6270
![01](https://s3.guerra24.net/projects/firefox-uwp/screenshots/01.png)

‎css/base.css

+12-12
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@
7878
--tab-line-color: rgb(128, 128, 128) !important;
7979
}
8080
#tabbrowser-tabs {
81-
--tab-line-color: -moz-accent-color !important;
82-
--tab-loading-fill: -moz-accent-color !important;
81+
--tab-line-color: AccentColor !important;
82+
--tab-loading-fill: AccentColor !important;
8383
}
8484
.tabbrowser-tab {
8585
padding: 0px !important;
@@ -153,7 +153,7 @@
153153
margin-top: 0px !important;
154154
}
155155
.tabbrowser-tab:not([class*="identity-color"]) .tab-context-line {
156-
background: -moz-accent-color !important;
156+
background: AccentColor !important;
157157
}
158158
.tabbrowser-tab .tab-context-line:-moz-window-inactive {
159159
background: rgb(128, 128, 128) !important;
@@ -345,7 +345,7 @@ findbar[hidden] {
345345
margin: 0px !important;
346346
}
347347
panel .text-link {
348-
color: -moz-accent-color !important;
348+
color: AccentColor !important;
349349
}
350350
/* Various Panels */
351351
#PopupAutoComplete {
@@ -579,7 +579,7 @@ panel[position*="bottomleft"] {
579579
width: 0 !important;
580580
display: block !important;
581581
position: absolute !important;
582-
background-color: -moz-accent-color !important;
582+
background-color: AccentColor !important;
583583
padding: 8px 1.5px !important;
584584
border-radius: var(--uwp-nav-item-selector-radius) !important;
585585
margin-right: 7px !important;
@@ -645,8 +645,8 @@ panel[position*="bottomleft"] {
645645
margin-bottom: 6px !important;
646646
}
647647
#appMenu-tp-toggle[enabled="true"] {
648-
background-color: -moz-accent-color !important;
649-
border: 1px solid -moz-accent-color !important;
648+
background-color: AccentColor !important;
649+
border: 1px solid AccentColor !important;
650650
}
651651
#appMenu-tp-toggle > .toolbarbutton-text {
652652
padding: 0px !important;
@@ -657,7 +657,7 @@ panel[position*="bottomleft"] {
657657
}
658658
/* Sync Icon */
659659
#appMenu-fxa-icon[syncstatus="active"] > .toolbarbutton-icon, #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon {
660-
fill: -moz-accent-color !important;
660+
fill: AccentColor !important;
661661
}
662662
/* Sidebar */
663663
#sidebar-box {
@@ -730,7 +730,7 @@ notification {
730730
border-color: var(--uwp-tags-button-hover-active) !important;
731731
}
732732
#PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon {
733-
fill: -moz-accent-color !important;
733+
fill: AccentColor !important;
734734
}
735735
#fullscreen-warning {
736736
border: none !important;
@@ -795,7 +795,7 @@ notification {
795795
display: none !important;
796796
}
797797
.infobar > .icon {
798-
color: -moz-accent-color !important;
798+
color: AccentColor !important;
799799
margin-left: 8px !important;
800800
}
801801
#urlbar-zoom-button {
@@ -823,11 +823,11 @@ notification {
823823
--toolbarbutton-active-background: var(--uwp-navbar-button-hover) !important;
824824
--tab-border-radius: var(--uwp-tags-control-radius) !important;
825825
--panel-font-size: 12px !important;
826-
--lwt-toolbarbutton-icon-fill-attention: -moz-accent-color !important;
826+
--lwt-toolbarbutton-icon-fill-attention: AccentColor !important;
827827

828828
--zoom-controls-bgcolor: transparent !important;
829829
--toolbar-bgimage: none !important;
830-
--panel-banner-item-update-supported-bgcolor: -moz-accent-color !important;
830+
--panel-banner-item-update-supported-bgcolor: AccentColor !important;
831831

832832
--toolbar-field-focus-background-color: var(--uwp-button-background) !important;
833833
--urlbar-box-focus-bgcolor: var(--uwp-button-background) !important;

‎css/context.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,12 @@
8080
}
8181
@media (prefers-color-scheme: light) {
8282
menupopup menu[open], menupopup menuitem[selected="true"], select > option:checked {
83-
background-color: color-mix(in srgb, -moz-accent-color 60%, white) !important;
83+
background-color: color-mix(in srgb, AccentColor 60%, white) !important;
8484
}
8585
}
8686
@media (prefers-color-scheme: dark) {
8787
menupopup menu[open], menupopup menuitem[selected="true"], select > option:checked {
88-
background-color: color-mix(in srgb, -moz-accent-color 60%, black) !important;
88+
background-color: color-mix(in srgb, AccentColor 60%, black) !important;
8989
}
9090
}
9191
menupopup menuitem:hover:active, menupopup menu:hover:active, button[role="menuitem"]:hover:active, .autocomplete-richlistitem:hover:active, menupopup menuitem[selected] {

‎css/pagesChrome.css

+10-10
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
}
101101
@supports not -moz-bool-pref("uwp.sun-valley") {
102102
.dialogBox {
103-
border: 1px solid -moz-accent-color !important;
103+
border: 1px solid AccentColor !important;
104104
}
105105
}
106106
}
@@ -170,7 +170,7 @@
170170
#clearDownloadsButton {
171171
-moz-appearance: none !important;
172172
margin-left: 8px !important;
173-
color: -moz-accent-color !important;
173+
color: AccentColor !important;
174174
}
175175
#clearDownloadsButton:hover {
176176
color: #999999 !important;
@@ -209,24 +209,24 @@
209209
}
210210
@media (prefers-color-scheme: light) {
211211
.text-link {
212-
color: color-mix(in srgb, -moz-accent-color 80%, black) !important;
212+
color: color-mix(in srgb, AccentColor 80%, black) !important;
213213
}
214214
.text-link:hover {
215-
color: color-mix(in srgb, -moz-accent-color 65%, black) !important;
215+
color: color-mix(in srgb, AccentColor 65%, black) !important;
216216
}
217217
.text-link:hover:active {
218-
color: color-mix(in srgb, -moz-accent-color 50%, black) !important;
218+
color: color-mix(in srgb, AccentColor 50%, black) !important;
219219
}
220220
}
221221
@media (prefers-color-scheme: dark) {
222222
.text-link {
223-
color: color-mix(in srgb, -moz-accent-color 80%, white) !important;
223+
color: color-mix(in srgb, AccentColor 80%, white) !important;
224224
}
225225
.text-link:hover {
226-
color: color-mix(in srgb, -moz-accent-color 65%, white) !important;
226+
color: color-mix(in srgb, AccentColor 65%, white) !important;
227227
}
228228
.text-link:hover:active {
229-
color: color-mix(in srgb, -moz-accent-color 50%, white) !important;
229+
color: color-mix(in srgb, AccentColor 50%, white) !important;
230230
}
231231
}
232232
}
@@ -377,7 +377,7 @@
377377
#viewGroup > radio[selected="true"] {
378378
background-color: transparent !important;
379379
color: var(--uwp-global-front) !important;
380-
border-bottom: 3px solid -moz-accent-color;
380+
border-bottom: 3px solid AccentColor;
381381
padding-bottom: 6.5px !important;
382382
}
383383
#viewGroup > radio > .radio-label-box {
@@ -433,7 +433,7 @@
433433
body {
434434
background: transparent !important;
435435
--disabled-fill-color: var(--uwp-button-background-disabled) !important;
436-
--selected-fill-color: -moz-accent-color !important;
436+
--selected-fill-color: AccentColor !important;
437437
--border: var(--uwp-button-border) !important;
438438
}
439439
.spinner {

‎css/pagesContent.css

+15-15
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
}
8585
@supports not -moz-bool-pref("uwp.sun-valley") {
8686
.dialogBox {
87-
border: 1px solid -moz-accent-color !important;
87+
border: 1px solid AccentColor !important;
8888
}
8989
@supports(backdrop-filter: blur(1px)) {
9090
body[role="dialog"], dialog[subdialog="true"], window[role="dialog"]:not([chromehidden]) {
@@ -259,12 +259,12 @@
259259

260260
@media (prefers-color-scheme: light) {
261261
#categories > .category:is([selected], .selected)::before {
262-
background: color-mix(in srgb, -moz-accent-color 60%, black) !important;
262+
background: color-mix(in srgb, AccentColor 60%, black) !important;
263263
}
264264
}
265265
@media (prefers-color-scheme: dark) {
266266
#categories > .category:is([selected], .selected)::before {
267-
background: color-mix(in srgb, -moz-accent-color 60%, white) !important;
267+
background: color-mix(in srgb, AccentColor 60%, white) !important;
268268
}
269269
}
270270

@@ -416,7 +416,7 @@
416416
background: var(--newtab-card-background-color) !important;
417417
}
418418
.ds-card .meta .source, .ds-card .ds-card-link:hover header {
419-
color: -moz-accent-color !important;
419+
color: AccentColor !important;
420420
}
421421
.ds-card .ds-card-link:is(:active, :focus) header {
422422
color: #666666 !important;
@@ -455,13 +455,13 @@
455455
}
456456
@supports not -moz-bool-pref("uwp.sun-valley") {
457457
.edit-topsites-wrapper .modal {
458-
border: 1px solid -moz-accent-color !important;
458+
border: 1px solid AccentColor !important;
459459
}
460460
.customize-menu {
461461
background: var(--uwp-sidebar) !important;
462462
}
463463
.modal {
464-
border: 1px solid -moz-accent-color !important;
464+
border: 1px solid AccentColor !important;
465465
}
466466
}
467467
@supports -moz-bool-pref("uwp.sun-valley") {
@@ -605,7 +605,7 @@
605605
border-color: #505050 !important;
606606
}
607607
.fxaProfileImage.actionable:hover:active {
608-
border-color: -moz-accent-color !important;
608+
border-color: AccentColor !important;
609609
}
610610
#categories > scrollbox > box {
611611
padding: 0px !important;
@@ -709,7 +709,7 @@
709709
cursor: default !important;
710710
text-decoration: underline !important;
711711
margin: 0px !important;
712-
color: -moz-accent-color !important;
712+
color: AccentColor !important;
713713
}
714714
button.button-link:hover {
715715
color: #999999 !important;
@@ -729,7 +729,7 @@
729729
text-shadow: none !important;
730730
}
731731
.icon[src=""] {
732-
fill: -moz-accent-color-foreground !important;
732+
fill: AccentColorText !important;
733733
-moz-context-properties: fill !important;
734734
}
735735
.addon-view[notification], .addon-view[pending] {
@@ -767,7 +767,7 @@
767767
/* New HTML-based addons page */
768768
@-moz-document url("chrome://mozapps/content/extensions/aboutaddons.html"), url-prefix("about:addons") {
769769
.rating-star {
770-
fill: -moz-accent-color !important;
770+
fill: AccentColor !important;
771771
}
772772
.card.addon {
773773
background: transparent !important;
@@ -799,8 +799,8 @@
799799
}
800800
@supports not -moz-bool-pref("uwp.sun-valley") {
801801
.card-heading-icon {
802-
fill: -moz-accent-color-foreground !important;
803-
background-color: -moz-accent-color !important;
802+
fill: AccentColorText !important;
803+
background-color: AccentColor !important;
804804
padding: 4px !important;
805805
}
806806
}
@@ -856,7 +856,7 @@
856856
.firstrun-sign-in {
857857
background: rgba(0, 0, 0, 0.5) !important;
858858
color: white !important;
859-
border: 1px solid -moz-accent-color !important;
859+
border: 1px solid AccentColor !important;
860860
}
861861
.firstrun-sign-in .extra-links {
862862
color: darkgray !important;
@@ -1002,12 +1002,12 @@
10021002

10031003
@media (prefers-color-scheme: light) {
10041004
.login-list-item.selected::before {
1005-
background: color-mix(in srgb, -moz-accent-color 60%, black) !important;
1005+
background: color-mix(in srgb, AccentColor 60%, black) !important;
10061006
}
10071007
}
10081008
@media (prefers-color-scheme: dark) {
10091009
.login-list-item.selected::before {
1010-
background: color-mix(in srgb, -moz-accent-color 60%, white) !important;
1010+
background: color-mix(in srgb, AccentColor 60%, white) !important;
10111011
}
10121012
}
10131013
}

‎css/styles/mdl2.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@
232232
textarea:focus,
233233
input:not(#urlbar-input):not(.searchbar-textbox):not(.fake-editable):not([type="radio"]):not([type="checkbox"]):not([type="range"]):focus,
234234
.findbar-textbox:focus {
235-
border: 2px solid -moz-accent-color !important;
235+
border: 2px solid AccentColor !important;
236236
}
237237
}
238238
}

‎css/styles/mdl2/base-dark.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@
3030
--chrome-secondary-background-color: #2A2A2A !important;
3131
--toolbar-bgcolor: #2A2A2A !important;
3232
--toolbar-color: var(--uwp-global-front) !important;
33-
--toolbarbutton-icon-fill-attention: -moz-accent-color !important;
33+
--toolbarbutton-icon-fill-attention: AccentColor !important;
3434

3535
--uwp-bottom-background: #161616;
3636

3737
--uwp-titlebar: white;
3838

3939
--autocomplete-popup-background: #2A2A2A !important;
4040
--autocomplete-popup-color: var(--uwp-global-front) !important;
41-
--autocomplete-popup-highlight-background: -moz-accent-color !important;
42-
--autocomplete-popup-highlight-color: -moz-accent-color-foreground !important;
41+
--autocomplete-popup-highlight-background: AccentColor !important;
42+
--autocomplete-popup-highlight-color: AccentColorText !important;
4343

4444
--panelview-toolbarbutton-hover-bgcolor: #404040 !important;
4545
--panelview-toolbarbutton-active-bgcolor: #606060 !important;

‎css/styles/mdl2/base-light.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@
3030
--chrome-secondary-background-color: #2A2A2A !important;
3131
--toolbar-bgcolor: white !important;
3232
--toolbar-color: var(--uwp-global-front) !important;
33-
--toolbarbutton-icon-fill-attention: -moz-accent-color !important;
33+
--toolbarbutton-icon-fill-attention: AccentColor !important;
3434

3535
--uwp-bottom-background: #E6E6E6;
3636

3737
--uwp-titlebar: black;
3838

3939
--autocomplete-popup-background: white !important;
4040
--autocomplete-popup-color: var(--uwp-global-front) !important;
41-
--autocomplete-popup-highlight-background: -moz-accent-color !important;
42-
--autocomplete-popup-highlight-color: -moz-accent-color-foreground !important;
41+
--autocomplete-popup-highlight-background: AccentColor !important;
42+
--autocomplete-popup-highlight-color: AccentColorText !important;
4343
--autocomplete-popup-hover-background: #cccccc !important;
4444
--urlbar-result-hover-bgcolor: #CDCDCD !important;
4545

0 commit comments

Comments
 (0)