aboutsummaryrefslogtreecommitdiff
path: root/arc-firefox-theme
diff options
context:
space:
mode:
Diffstat (limited to 'arc-firefox-theme')
-rw-r--r--arc-firefox-theme/chrome/browser/sass/_browser-sass.scss6
-rw-r--r--arc-firefox-theme/chrome/browser/sass/_colors.scss56
-rw-r--r--arc-firefox-theme/chrome/browser/sass/browser-dark.css138
-rw-r--r--arc-firefox-theme/chrome/browser/sass/browser-darker.css102
-rw-r--r--arc-firefox-theme/chrome/browser/sass/browser-light.css88
5 files changed, 195 insertions, 195 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
index 90b5124..0a24e88 100644
--- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
+++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
@@ -3837,7 +3837,7 @@ html|*.pointerlockfswarning-exit-button {
border-radius: 25px / 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-width: 0;
background-color: #353535;
@@ -3852,7 +3852,7 @@ html|*.pointerlockfswarning-exit-button {
-moz-appearance: none;
padding: 20px;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-width: 0;
@@ -3945,7 +3945,7 @@ html|*.pointerlockfswarning-exit-button {
#browser-bottombox[devtoolstheme="light"] #developer-toolbar {
--gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
--gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
- --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
+ --gcli-input-focused-background: #fdf6e3; /* --theme-sidebar-background */
--gcli-input-color: #393f4c; /* --theme-body-color */
--gcli-border-color: #dde1e4; /* --theme-splitter-color */
--selection-background: #4c9ed9; /* --theme-selection-background */
diff --git a/arc-firefox-theme/chrome/browser/sass/_colors.scss b/arc-firefox-theme/chrome/browser/sass/_colors.scss
index 47daa0f..c709fe4 100644
--- a/arc-firefox-theme/chrome/browser/sass/_colors.scss
+++ b/arc-firefox-theme/chrome/browser/sass/_colors.scss
@@ -2,13 +2,13 @@
// it gets @if ed depending on $variant
-$base_color: if($variant =='light', #ffffff, #404552);
-$text_color: if($variant == 'light', #5c616c, #D3DAE3);
-$bg_color: if($variant =='light', #F5F6F7, #383C4A);
-$fg_color: if($variant =='light', #5c616c, #D3DAE3);
+$base_color: if($variant =='light', #fdf6e3, #073642);
+$text_color: if($variant == 'light', #5c616c, #657b83);
+$bg_color: if($variant =='light', #F5F6F7, #002b36);
+$fg_color: if($variant =='light', #5c616c, #657b83);
-$selected_fg_color: #ffffff;
-$selected_bg_color: #5294E2;
+$selected_fg_color: #fdf6e3;
+$selected_bg_color: #268bd2;
$selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%));
@@ -18,31 +18,31 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%),
lighten($selected_bg_color,10%));
$selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color);
-$warning_color: #F27835;
-$error_color: #FC4138;
-$success_color: #73d216;
-$destructive_color: #F04A50;
-$suggested_color: #4DADD4;
+$warning_color: #cb4b16;
+$error_color: #dc322f;
+$success_color: #859900;
+$destructive_color: #dc322f;
+$suggested_color: #2aa198;
//insensitive state derived colors
$insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55));
$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
$header_bg: red;
-@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); }
-@if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; }
-@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); }
-@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; }
+@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#eee8d5, 0.05); }
+@if $transparency=='false' and $variant=='light' { $header_bg: #eee8d5; }
+@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#002b36, 0.03); }
+@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #002b36; }
$header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%));
$header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%));
$header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%));
-$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg);
+$header_fg: if($darker == 'true', saturate(transparentize(#657b83, 0.2), 10%), $header_fg);
-$dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945);
-$dark_sidebar_fg: #BAC3CF;
+$dark_sidebar_bg: if($transparency == 'true', transparentize(#073642, 0.05), #073642);
+$dark_sidebar_fg: #657b83;
$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%));
$osd_fg_color: $dark_sidebar_fg;
@@ -62,7 +62,7 @@ $panel_bg: darken($dark_sidebar_bg, 4.7%);
$panel_fg: $dark_sidebar_fg;
$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%));
-$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%));
+$entry_border: if($variant == 'light', #657b83, darken($borders_color, 0%));
$header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1));
$header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7));
@@ -76,19 +76,19 @@ $header_button_border: if($darker == 'true' or $variant == 'dark', transparentiz
//WM Buttons
// Close
-$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d);
-$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d);
-$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841);
+$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #dc322f);
+$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #cb4b16);
+$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #dc322f);
-$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f);
+$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#657b83 , #002b36);
// Minimize, Maximize
-$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C);
+$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #657b83);
$wm_button_active_bg: $selected_bg_color;
-$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932);
+$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #002b36);
-$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B);
-$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74);
-$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC);
+$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #93a1a1);
+$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #657b83);
+$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #93a1a1);
$wm_icon_active_bg: $selected_fg_color;
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
index 1171e26..8fb6d6a 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
@@ -7,13 +7,13 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* navbarInsetHighlight is tightly coupled to the toolbarHighlight constant. */
:root {
- --toolbarbutton-hover-background: #444a58;
+ --toolbarbutton-hover-background: #083e4b;
--toolbarbutton-hover-boxshadow: none;
- --toolbarbutton-hover-bordercolor: #2b2e39;
+ --toolbarbutton-hover-bordercolor: #001317;
--toolbarbutton-active-boxshadow: none;
- --toolbarbutton-active-bordercolor: #2b2e39;
- --toolbarbutton-active-background: #5294E2;
- --toolbarbutton-checkedhover-backgroundcolor: #5294E2;
+ --toolbarbutton-active-bordercolor: #001317;
+ --toolbarbutton-active-background: #268bd2;
+ --toolbarbutton-checkedhover-backgroundcolor: #268bd2;
--toolbarbutton-combined-boxshadow: none;
--toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px);
--verified-identity-box-backgroundcolor: transparent;
@@ -42,7 +42,7 @@
-moz-box-ordinal-group: 101;
/* tabs toolbar is 100 */
height: 1px;
- background-color: #2b2e39; }
+ background-color: #001317; }
#navigator-toolbox:-moz-lwtheme::after {
background-color: rgba(0, 0, 0, 0.3); }
@@ -50,7 +50,7 @@
#navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) {
-moz-appearance: none;
border-style: none;
- background-color: #383C4A; }
+ background-color: #002b36; }
#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
padding-top: 1px;
@@ -67,7 +67,7 @@
transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; }
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
- border-top: 1px solid rgba(38, 42, 51, 0.97) !important;
+ border-top: 1px solid rgba(0, 27, 34, 0.97) !important;
background-clip: padding-box;
/* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */
margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
@@ -76,11 +76,11 @@
z-index: 1; }
#main-window[htitlemode=always] #TabsToolbar {
- box-shadow: inset 0 1px rgba(54, 59, 72, 0.97) !important; }
+ box-shadow: inset 0 1px rgba(0, 55, 69, 0.97) !important; }
#nav-bar {
background-image: none !important;
- background-color: #383C4A !important;
+ background-color: #002b36 !important;
box-shadow: none;
padding-top: 3px;
padding-bottom: 3px; }
@@ -137,19 +137,19 @@ toolbarbutton.bookmark-item {
border: 1px solid transparent;
border-radius: 2px;
background: none;
- color: #D3DAE3; }
+ color: #657b83; }
toolbarbutton.bookmark-item:not([disabled=true]):hover {
-moz-appearance: none;
- color: #D3DAE3;
- background-color: #505666;
- border: 1px solid #2b2e39; }
+ color: #657b83;
+ background-color: #0a5062;
+ border: 1px solid #001317; }
toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
-moz-appearance: none;
- color: #ffffff;
- background-color: #5294E2;
- border: 1px solid #2b2e39; }
+ color: #fdf6e3;
+ background-color: #268bd2;
+ border: 1px solid #001317; }
/* ----- BOOKMARK STAR ANIMATION ----- */
@keyframes animation-bookmarkAdded {
@@ -356,9 +356,9 @@ menuitem.bookmark-item {
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon {
background-color: none;
- color: rgba(207, 218, 231, 0.8);
- border-color: rgba(21, 23, 28, 0.37);
- background-color: rgba(95, 105, 127, 0.37);
+ color: rgba(89, 128, 143, 0.8);
+ border-color: rgba(0, 0, 0, 0.37);
+ background-color: rgba(0, 132, 166, 0.37);
background-clip: padding-box; }
.findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text,
@@ -378,9 +378,9 @@ menuitem.bookmark-item {
#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon {
background: none;
- color: #ffffff;
- border-color: rgba(21, 23, 28, 0.37);
- background-color: #5294E2;
+ color: #fdf6e3;
+ border-color: rgba(0, 0, 0, 0.37);
+ background-color: #268bd2;
background-clip: padding-box; }
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
@@ -413,11 +413,11 @@ menuitem.bookmark-item {
#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
- background: #2b2e39; }
+ background: #001317; }
#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
- background: rgba(207, 218, 231, 0.15); }
+ background: rgba(89, 128, 143, 0.15); }
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
margin-inline-start: -4px; }
@@ -942,16 +942,16 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
border-radius: 3px;
margin: 0 3px;
min-height: 28px;
- color: #D3DAE3;
- background-color: #404552;
- border: 1px solid #2b2e39; }
+ color: #657b83;
+ background-color: #073642;
+ border: 1px solid #001317; }
#urlbar[focused],
.searchbar-textbox[focused] {
- color: #D3DAE3;
- background-color: #404552;
- border: 1px solid #2b2e39;
- box-shadow: inset 0 1px #5294E2, inset 0 -1px #5294E2, inset 1px 0 #5294E2, inset -1px 0 #5294E2; }
+ color: #657b83;
+ background-color: #073642;
+ border: 1px solid #001317;
+ box-shadow: inset 0 1px #268bd2, inset 0 -1px #268bd2, inset 1px 0 #268bd2, inset -1px 0 #268bd2; }
.searchbar-textbox {
border-radius: 20px;
@@ -1210,7 +1210,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
#identity-box {
--identity-box-verified-color: #479900;
--identity-box-chrome-color: #e57300;
- border-inline-end: 1px solid rgba(43, 46, 57, 0.5);
+ border-inline-end: 1px solid rgba(0, 19, 23, 0.5);
font-size: .9em;
padding: 3px 9px 3px 7px;
margin-inline-end: 5px;
@@ -1807,7 +1807,7 @@ html|span.ac-emphasize-text-url {
list-style-image: url("chrome://browser/skin/reload-stop-go.png");
padding: 0 7px 0 10px;
margin-inline-start: 5px;
- border-inline-start: 1px solid rgba(43, 46, 57, 0.5); }
+ border-inline-start: 1px solid rgba(0, 19, 23, 0.5); }
#urlbar-reload-button {
-moz-image-region: rect(0, 14px, 14px, 0); }
@@ -2008,33 +2008,33 @@ html|span.ac-emphasize-text-url {
/* Findbar */
.browserContainer > findbar {
- background-color: #383C4A;
- color: #D3DAE3;
+ background-color: #002b36;
+ color: #657b83;
border-top: 1px solid;
- -moz-border-top-colors: #2b2e39;
+ -moz-border-top-colors: #001317;
text-shadow: none; }
.browserContainer > findbar .findbar-textbox {
-moz-appearance: none;
- color: #D3DAE3;
- border: 1px solid #2b2e39;
- background-color: #404552;
+ color: #657b83;
+ border: 1px solid #001317;
+ background-color: #073642;
box-shadow: none;
margin: 0;
padding: 5px;
width: 14em; }
.browserContainer > findbar .findbar-textbox[focused="true"] {
- border-color: #2b2e39;
- box-shadow: inset 0 1px #5294E2, inset 0 -1px #5294E2, inset 1px 0 #5294E2, inset -1px 0 #5294E2; }
+ border-color: #001317;
+ box-shadow: inset 0 1px #268bd2, inset 0 -1px #268bd2, inset 1px 0 #268bd2, inset -1px 0 #268bd2; }
.browserContainer > findbar .findbar-textbox[status="notfound"] {
- background-color: #FC4138;
- border-color: #2b2e39;
- color: #ffffff;
+ background-color: #dc322f;
+ border-color: #001317;
+ color: #fdf6e3;
box-shadow: none; }
.browserContainer > findbar .findbar-textbox[flash="true"] {
- background-color: #F27835;
- border-color: #2b2e39;
- color: #ffffff;
+ background-color: #cb4b16;
+ border-color: #001317;
+ color: #fdf6e3;
box-shadow: none; }
.browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) {
border-radius: 3px 0 0 3px;
@@ -2048,8 +2048,8 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-find-previous,
.browserContainer > findbar .findbar-find-next {
- background: #444a58;
- border: 1px solid #2b2e39;
+ background: #083e4b;
+ border: 1px solid #001317;
box-shadow: none; }
.browserContainer > findbar .findbar-find-previous {
@@ -2057,15 +2057,15 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-find-previous:focus,
.browserContainer > findbar .findbar-find-next:focus {
- outline: 1px dashed rgba(211, 218, 227, 0.3);
+ outline: 1px dashed rgba(101, 123, 131, 0.3);
outline-offset: -3px;
box-shadow: none; }
.browserContainer > findbar .findbar-find-previous:not([disabled]):active,
.browserContainer > findbar .findbar-find-next:not([disabled]):active {
- outline-color: rgba(255, 255, 255, 0.3);
- background: #5294E2;
- border-color: #2b2e39;
+ outline-color: rgba(253, 246, 227, 0.3);
+ background: #268bd2;
+ border-color: #001317;
box-shadow: none; }
/* Tabstrip */
@@ -2102,7 +2102,7 @@ html|span.ac-emphasize-text-url {
.tabbrowser-tab[selected="true"],
.tabbrowser-tab[selected="true"]:hover,
.tabbrowser-tab:not([selected="true"]):hover {
- color: #D3DAE3; }
+ color: #657b83; }
/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
.tabbrowser-tab[visuallyselected=true] {
@@ -2306,9 +2306,9 @@ html|span.ac-emphasize-text-url {
color: inherit; }
.tabbrowser-tab:not([selected="true"]) {
- color: rgba(207, 218, 231, 0.6); }
+ color: rgba(89, 128, 143, 0.6); }
.tabbrowser-tab:not([selected="true"]):hover {
- color: rgba(207, 218, 231, 0.8); }
+ color: rgba(89, 128, 143, 0.8); }
/* Selected tab */
/*
@@ -2459,8 +2459,8 @@ lwtHeader;*/
#TabsToolbar:not(:-moz-lwtheme) {
-moz-appearance: none;
- color: rgba(207, 218, 231, 0.8);
- background: #2f343f; }
+ color: rgba(89, 128, 143, 0.8);
+ background: #002b36; }
#toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag),
#TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) {
@@ -2591,10 +2591,10 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.statuspanel-label {
margin: 0;
padding: 2px 4px;
- background: #5294E2;
- border: 1px none #5294E2;
+ background: #268bd2;
+ border: 1px none #268bd2;
border-top-style: solid;
- color: #ffffff;
+ color: #fdf6e3;
text-shadow: none; }
.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
@@ -2611,9 +2611,9 @@ toolbarbutton.chevron > .toolbarbutton-icon {
html|*.pointerlockfswarning {
align-items: center;
- color: #BAC3CF;
- background: rgba(53, 57, 69, 0.95);
- border: 1px solid rgba(31, 33, 40, 0.95);
+ color: #657b83;
+ background: rgba(7, 54, 66, 0.95);
+ border: 1px solid rgba(2, 16, 20, 0.95);
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
padding: 24px 16px;
@@ -2776,7 +2776,7 @@ html|*.pointerlockfswarning-exit-button {
.devtools-responsiveui-toolbarbutton[open=true],
.devtools-responsiveui-toolbarbutton[checked=true] {
border-color: rgba(12, 13, 14, 0.6) !important;
- background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4));
+ background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 77, 85, 0.4));
box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); }
.devtools-responsiveui-toolbarbutton[checked=true] {
@@ -2894,7 +2894,7 @@ html|*.pointerlockfswarning-exit-button {
border-radius: 25px / 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-width: 0;
background-color: #353535;
box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
@@ -2904,7 +2904,7 @@ html|*.pointerlockfswarning-exit-button {
.devtools-responsiveui-hardware-buttons {
-moz-appearance: none;
padding: 20px;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-width: 0;
@@ -2977,7 +2977,7 @@ html|*.pointerlockfswarning-exit-button {
/* --theme-tab-toolbar-background */
--gcli-input-background: #fcfcfc;
/* --theme-toolbar-background */
- --gcli-input-focused-background: #ffffff;
+ --gcli-input-focused-background: #fdf6e3;
/* --theme-sidebar-background */
--gcli-input-color: #393f4c;
/* --theme-body-color */
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
index ddc4dfd..9d0adfd 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
@@ -9,11 +9,11 @@
:root {
--toolbarbutton-hover-background: #fbfbfc;
--toolbarbutton-hover-boxshadow: none;
- --toolbarbutton-hover-bordercolor: #cfd6e6;
+ --toolbarbutton-hover-bordercolor: #657b83;
--toolbarbutton-active-boxshadow: none;
- --toolbarbutton-active-bordercolor: #5294E2;
- --toolbarbutton-active-background: #5294E2;
- --toolbarbutton-checkedhover-backgroundcolor: #5294E2;
+ --toolbarbutton-active-bordercolor: #268bd2;
+ --toolbarbutton-active-background: #268bd2;
+ --toolbarbutton-checkedhover-backgroundcolor: #268bd2;
--toolbarbutton-combined-boxshadow: none;
--toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px);
--verified-identity-box-backgroundcolor: transparent;
@@ -67,7 +67,7 @@
transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; }
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
- border-top: 1px solid rgba(38, 42, 51, 0.97) !important;
+ border-top: 1px solid rgba(0, 27, 34, 0.97) !important;
background-clip: padding-box;
/* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */
margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
@@ -76,7 +76,7 @@
z-index: 1; }
#main-window[htitlemode=always] #TabsToolbar {
- box-shadow: inset 0 1px rgba(54, 59, 72, 0.97) !important; }
+ box-shadow: inset 0 1px rgba(0, 55, 69, 0.97) !important; }
#nav-bar {
background-image: none !important;
@@ -143,13 +143,13 @@ toolbarbutton.bookmark-item:not([disabled=true]):hover {
-moz-appearance: none;
color: #5c616c;
background-color: white;
- border: 1px solid #cfd6e6; }
+ border: 1px solid #657b83; }
toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
-moz-appearance: none;
- color: #ffffff;
- background-color: #5294E2;
- border: 1px solid #5294E2; }
+ color: #fdf6e3;
+ background-color: #268bd2;
+ border: 1px solid #268bd2; }
/* ----- BOOKMARK STAR ANIMATION ----- */
@keyframes animation-bookmarkAdded {
@@ -356,9 +356,9 @@ menuitem.bookmark-item {
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon {
background-color: none;
- color: rgba(207, 218, 231, 0.8);
- border-color: rgba(21, 23, 28, 0.37);
- background-color: rgba(95, 105, 127, 0.37);
+ color: rgba(89, 128, 143, 0.8);
+ border-color: rgba(0, 0, 0, 0.37);
+ background-color: rgba(0, 132, 166, 0.37);
background-clip: padding-box; }
.findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text,
@@ -378,9 +378,9 @@ menuitem.bookmark-item {
#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon {
background: none;
- color: #ffffff;
- border-color: rgba(21, 23, 28, 0.37);
- background-color: #5294E2;
+ color: #fdf6e3;
+ border-color: rgba(0, 0, 0, 0.37);
+ background-color: #268bd2;
background-clip: padding-box; }
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
@@ -417,7 +417,7 @@ menuitem.bookmark-item {
#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
- background: rgba(207, 218, 231, 0.15); }
+ background: rgba(89, 128, 143, 0.15); }
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
margin-inline-start: -4px; }
@@ -943,14 +943,14 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
margin: 0 3px;
min-height: 28px;
color: #5c616c;
- background-color: #ffffff;
- border: 1px solid #cfd6e6; }
+ background-color: #fdf6e3;
+ border: 1px solid #657b83; }
#urlbar[focused],
.searchbar-textbox[focused] {
color: #5c616c;
- background-color: #ffffff;
- border: 1px solid #5294E2; }
+ background-color: #fdf6e3;
+ border: 1px solid #268bd2; }
.searchbar-textbox {
border-radius: 20px;
@@ -1209,7 +1209,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
#identity-box {
--identity-box-verified-color: #479900;
--identity-box-chrome-color: #e57300;
- border-inline-end: 1px solid rgba(207, 214, 230, 0.5);
+ border-inline-end: 1px solid rgba(101, 123, 131, 0.5);
font-size: .9em;
padding: 3px 9px 3px 7px;
margin-inline-end: 5px;
@@ -1806,7 +1806,7 @@ html|span.ac-emphasize-text-url {
list-style-image: url("chrome://browser/skin/reload-stop-go.png");
padding: 0 7px 0 10px;
margin-inline-start: 5px;
- border-inline-start: 1px solid rgba(207, 214, 230, 0.5); }
+ border-inline-start: 1px solid rgba(101, 123, 131, 0.5); }
#urlbar-reload-button {
-moz-image-region: rect(0, 14px, 14px, 0); }
@@ -2016,25 +2016,25 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-textbox {
-moz-appearance: none;
color: #5c616c;
- border: 1px solid #cfd6e6;
- background-color: #ffffff;
+ border: 1px solid #657b83;
+ background-color: #fdf6e3;
box-shadow: none;
margin: 0;
padding: 5px;
width: 14em; }
.browserContainer > findbar .findbar-textbox[focused="true"] {
- border-color: #5294E2; }
+ border-color: #268bd2; }
.browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous {
- border-left-color: #5294E2; }
+ border-left-color: #268bd2; }
.browserContainer > findbar .findbar-textbox[status="notfound"] {
- background-color: #FC4138;
- border-color: #fb1b10;
- color: #ffffff;
+ background-color: #dc322f;
+ border-color: #c22321;
+ color: #fdf6e3;
box-shadow: none; }
.browserContainer > findbar .findbar-textbox[flash="true"] {
- background-color: #F27835;
- border-color: #ef5f0f;
- color: #ffffff;
+ background-color: #cb4b16;
+ border-color: #a63d12;
+ color: #fdf6e3;
box-shadow: none; }
.browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) {
border-radius: 3px 0 0 3px;
@@ -2049,7 +2049,7 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-find-previous,
.browserContainer > findbar .findbar-find-next {
background: #fbfbfc;
- border: 1px solid #cfd6e6;
+ border: 1px solid #657b83;
box-shadow: none; }
.browserContainer > findbar .findbar-find-previous {
@@ -2063,9 +2063,9 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-find-previous:not([disabled]):active,
.browserContainer > findbar .findbar-find-next:not([disabled]):active {
- outline-color: rgba(255, 255, 255, 0.3);
- background: #5294E2;
- border-color: #5294E2;
+ outline-color: rgba(253, 246, 227, 0.3);
+ background: #268bd2;
+ border-color: #268bd2;
box-shadow: none; }
/* Tabstrip */
@@ -2306,9 +2306,9 @@ html|span.ac-emphasize-text-url {
color: inherit; }
.tabbrowser-tab:not([selected="true"]) {
- color: rgba(207, 218, 231, 0.6); }
+ color: rgba(89, 128, 143, 0.6); }
.tabbrowser-tab:not([selected="true"]):hover {
- color: rgba(207, 218, 231, 0.8); }
+ color: rgba(89, 128, 143, 0.8); }
/* Selected tab */
/*
@@ -2459,8 +2459,8 @@ lwtHeader;*/
#TabsToolbar:not(:-moz-lwtheme) {
-moz-appearance: none;
- color: rgba(207, 218, 231, 0.8);
- background: #2f343f; }
+ color: rgba(89, 128, 143, 0.8);
+ background: #002b36; }
#toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag),
#TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) {
@@ -2591,10 +2591,10 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.statuspanel-label {
margin: 0;
padding: 2px 4px;
- background: #5294E2;
- border: 1px none #5294E2;
+ background: #268bd2;
+ border: 1px none #268bd2;
border-top-style: solid;
- color: #ffffff;
+ color: #fdf6e3;
text-shadow: none; }
.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
@@ -2611,9 +2611,9 @@ toolbarbutton.chevron > .toolbarbutton-icon {
html|*.pointerlockfswarning {
align-items: center;
- color: #BAC3CF;
- background: rgba(53, 57, 69, 0.95);
- border: 1px solid rgba(31, 33, 40, 0.95);
+ color: #657b83;
+ background: rgba(7, 54, 66, 0.95);
+ border: 1px solid rgba(2, 16, 20, 0.95);
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
padding: 24px 16px;
@@ -2776,7 +2776,7 @@ html|*.pointerlockfswarning-exit-button {
.devtools-responsiveui-toolbarbutton[open=true],
.devtools-responsiveui-toolbarbutton[checked=true] {
border-color: rgba(12, 13, 14, 0.6) !important;
- background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4));
+ background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 77, 85, 0.4));
box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); }
.devtools-responsiveui-toolbarbutton[checked=true] {
@@ -2894,7 +2894,7 @@ html|*.pointerlockfswarning-exit-button {
border-radius: 25px / 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-width: 0;
background-color: #353535;
box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
@@ -2904,7 +2904,7 @@ html|*.pointerlockfswarning-exit-button {
.devtools-responsiveui-hardware-buttons {
-moz-appearance: none;
padding: 20px;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-width: 0;
@@ -2977,7 +2977,7 @@ html|*.pointerlockfswarning-exit-button {
/* --theme-tab-toolbar-background */
--gcli-input-background: #fcfcfc;
/* --theme-toolbar-background */
- --gcli-input-focused-background: #ffffff;
+ --gcli-input-focused-background: #fdf6e3;
/* --theme-sidebar-background */
--gcli-input-color: #393f4c;
/* --theme-body-color */
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css
index e3de08a..862b197 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-light.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css
@@ -9,11 +9,11 @@
:root {
--toolbarbutton-hover-background: #fbfbfc;
--toolbarbutton-hover-boxshadow: none;
- --toolbarbutton-hover-bordercolor: #cfd6e6;
+ --toolbarbutton-hover-bordercolor: #657b83;
--toolbarbutton-active-boxshadow: none;
- --toolbarbutton-active-bordercolor: #5294E2;
- --toolbarbutton-active-background: #5294E2;
- --toolbarbutton-checkedhover-backgroundcolor: #5294E2;
+ --toolbarbutton-active-bordercolor: #268bd2;
+ --toolbarbutton-active-background: #268bd2;
+ --toolbarbutton-checkedhover-backgroundcolor: #268bd2;
--toolbarbutton-combined-boxshadow: none;
--toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px);
--verified-identity-box-backgroundcolor: transparent;
@@ -67,7 +67,7 @@
transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; }
#TabsToolbar:not([collapsed="true"]) + #nav-bar {
- border-top: 1px solid rgba(212, 213, 219, 0.95) !important;
+ border-top: 1px solid rgba(228, 218, 188, 0.95) !important;
background-clip: padding-box;
/* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */
margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap));
@@ -76,7 +76,7 @@
z-index: 1; }
#main-window[htitlemode=always] #TabsToolbar {
- box-shadow: inset 0 1px rgba(239, 240, 242, 0.95) !important; }
+ box-shadow: inset 0 1px rgba(242, 238, 224, 0.95) !important; }
#nav-bar {
background-image: none !important;
@@ -143,13 +143,13 @@ toolbarbutton.bookmark-item:not([disabled=true]):hover {
-moz-appearance: none;
color: #5c616c;
background-color: white;
- border: 1px solid #cfd6e6; }
+ border: 1px solid #657b83; }
toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
-moz-appearance: none;
- color: #ffffff;
- background-color: #5294E2;
- border: 1px solid #5294E2; }
+ color: #fdf6e3;
+ background-color: #268bd2;
+ border: 1px solid #268bd2; }
/* ----- BOOKMARK STAR ANIMATION ----- */
@keyframes animation-bookmarkAdded {
@@ -378,9 +378,9 @@ menuitem.bookmark-item {
#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack,
#TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon {
background: none;
- color: #ffffff;
- border-color: #5294E2;
- background-color: #5294E2;
+ color: #fdf6e3;
+ border-color: #268bd2;
+ background-color: #268bd2;
background-clip: padding-box; }
:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
@@ -943,14 +943,14 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
margin: 0 3px;
min-height: 28px;
color: #5c616c;
- background-color: #ffffff;
- border: 1px solid #cfd6e6; }
+ background-color: #fdf6e3;
+ border: 1px solid #657b83; }
#urlbar[focused],
.searchbar-textbox[focused] {
color: #5c616c;
- background-color: #ffffff;
- border: 1px solid #5294E2; }
+ background-color: #fdf6e3;
+ border: 1px solid #268bd2; }
.searchbar-textbox {
border-radius: 20px;
@@ -1209,7 +1209,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
#identity-box {
--identity-box-verified-color: #479900;
--identity-box-chrome-color: #e57300;
- border-inline-end: 1px solid rgba(207, 214, 230, 0.5);
+ border-inline-end: 1px solid rgba(101, 123, 131, 0.5);
font-size: .9em;
padding: 3px 9px 3px 7px;
margin-inline-end: 5px;
@@ -1806,7 +1806,7 @@ html|span.ac-emphasize-text-url {
list-style-image: url("chrome://browser/skin/reload-stop-go.png");
padding: 0 7px 0 10px;
margin-inline-start: 5px;
- border-inline-start: 1px solid rgba(207, 214, 230, 0.5); }
+ border-inline-start: 1px solid rgba(101, 123, 131, 0.5); }
#urlbar-reload-button {
-moz-image-region: rect(0, 14px, 14px, 0); }
@@ -2016,25 +2016,25 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-textbox {
-moz-appearance: none;
color: #5c616c;
- border: 1px solid #cfd6e6;
- background-color: #ffffff;
+ border: 1px solid #657b83;
+ background-color: #fdf6e3;
box-shadow: none;
margin: 0;
padding: 5px;
width: 14em; }
.browserContainer > findbar .findbar-textbox[focused="true"] {
- border-color: #5294E2; }
+ border-color: #268bd2; }
.browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous {
- border-left-color: #5294E2; }
+ border-left-color: #268bd2; }
.browserContainer > findbar .findbar-textbox[status="notfound"] {
- background-color: #FC4138;
- border-color: #fb1b10;
- color: #ffffff;
+ background-color: #dc322f;
+ border-color: #c22321;
+ color: #fdf6e3;
box-shadow: none; }
.browserContainer > findbar .findbar-textbox[flash="true"] {
- background-color: #F27835;
- border-color: #ef5f0f;
- color: #ffffff;
+ background-color: #cb4b16;
+ border-color: #a63d12;
+ color: #fdf6e3;
box-shadow: none; }
.browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) {
border-radius: 3px 0 0 3px;
@@ -2049,7 +2049,7 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-find-previous,
.browserContainer > findbar .findbar-find-next {
background: #fbfbfc;
- border: 1px solid #cfd6e6;
+ border: 1px solid #657b83;
box-shadow: none; }
.browserContainer > findbar .findbar-find-previous {
@@ -2063,9 +2063,9 @@ html|span.ac-emphasize-text-url {
.browserContainer > findbar .findbar-find-previous:not([disabled]):active,
.browserContainer > findbar .findbar-find-next:not([disabled]):active {
- outline-color: rgba(255, 255, 255, 0.3);
- background: #5294E2;
- border-color: #5294E2;
+ outline-color: rgba(253, 246, 227, 0.3);
+ background: #268bd2;
+ border-color: #268bd2;
box-shadow: none; }
/* Tabstrip */
@@ -2460,7 +2460,7 @@ lwtHeader;*/
#TabsToolbar:not(:-moz-lwtheme) {
-moz-appearance: none;
color: rgba(82, 93, 118, 0.8);
- background: #e7e8eb; }
+ background: #eee8d5; }
#toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag),
#TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) {
@@ -2591,10 +2591,10 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.statuspanel-label {
margin: 0;
padding: 2px 4px;
- background: #5294E2;
- border: 1px none #5294E2;
+ background: #268bd2;
+ border: 1px none #268bd2;
border-top-style: solid;
- color: #ffffff;
+ color: #fdf6e3;
text-shadow: none; }
.statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
@@ -2611,9 +2611,9 @@ toolbarbutton.chevron > .toolbarbutton-icon {
html|*.pointerlockfswarning {
align-items: center;
- color: #BAC3CF;
- background: rgba(53, 57, 69, 0.95);
- border: 1px solid rgba(31, 33, 40, 0.95);
+ color: #657b83;
+ background: rgba(7, 54, 66, 0.95);
+ border: 1px solid rgba(2, 16, 20, 0.95);
box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
padding: 24px 16px;
@@ -2776,7 +2776,7 @@ html|*.pointerlockfswarning-exit-button {
.devtools-responsiveui-toolbarbutton[open=true],
.devtools-responsiveui-toolbarbutton[checked=true] {
border-color: rgba(12, 13, 14, 0.6) !important;
- background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4));
+ background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 77, 85, 0.4));
box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); }
.devtools-responsiveui-toolbarbutton[checked=true] {
@@ -2894,7 +2894,7 @@ html|*.pointerlockfswarning-exit-button {
border-radius: 25px / 20px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-width: 0;
background-color: #353535;
box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
@@ -2904,7 +2904,7 @@ html|*.pointerlockfswarning-exit-button {
.devtools-responsiveui-hardware-buttons {
-moz-appearance: none;
padding: 20px;
- border: 1px solid #FFFFFF;
+ border: 1px solid #fdf6e3;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-width: 0;
@@ -2977,7 +2977,7 @@ html|*.pointerlockfswarning-exit-button {
/* --theme-tab-toolbar-background */
--gcli-input-background: #fcfcfc;
/* --theme-toolbar-background */
- --gcli-input-focused-background: #ffffff;
+ --gcli-input-focused-background: #fdf6e3;
/* --theme-sidebar-background */
--gcli-input-color: #393f4c;
/* --theme-body-color */