mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 22:45:31 +02:00
Added chrome style color palletes and automatic theme creation
This commit is contained in:
parent
dbdae61f8b
commit
1b86944a41
10 changed files with 117 additions and 31 deletions
|
@ -0,0 +1,13 @@
|
||||||
|
diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss
|
||||||
|
index 6b097ae93edc046fb82dc843357e4ce8f34aca60..a76a3d8082d611a5169b0e85053aaca05a59ede1 100644
|
||||||
|
--- a/browser/components/newtab/content-src/styles/_theme.scss
|
||||||
|
+++ b/browser/components/newtab/content-src/styles/_theme.scss
|
||||||
|
@@ -25,7 +25,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
|
||||||
|
// Default theme
|
||||||
|
:root {
|
||||||
|
// General styles
|
||||||
|
- --newtab-background-color: #{$in-content-page-background};
|
||||||
|
+ --newtab-background-color: var(--zen-colors-tertiary);
|
||||||
|
--newtab-background-color-secondary: #{$newtab-background-secondary};
|
||||||
|
--newtab-text-primary-color: #{$in-content-page-color};
|
||||||
|
--newtab-primary-action-background: #{$primary-blue};
|
|
@ -1,5 +1,5 @@
|
||||||
diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json
|
diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json
|
||||||
index 544986d5e93c033f944cf301af79e0750864a32c..ec5e7653b9c0c6d86e5c869c1a5f1d845a0a55f0 100644
|
index 544986d5e93c033f944cf301af79e0750864a32c..005ef991235fd30e2253b488cb76df54c5c82078 100644
|
||||||
--- a/browser/themes/addons/dark/manifest.json
|
--- a/browser/themes/addons/dark/manifest.json
|
||||||
+++ b/browser/themes/addons/dark/manifest.json
|
+++ b/browser/themes/addons/dark/manifest.json
|
||||||
@@ -7,10 +7,10 @@
|
@@ -7,10 +7,10 @@
|
||||||
|
@ -16,7 +16,7 @@ index 544986d5e93c033f944cf301af79e0750864a32c..ec5e7653b9c0c6d86e5c869c1a5f1d84
|
||||||
|
|
||||||
"icons": { "32": "icon.svg" },
|
"icons": { "32": "icon.svg" },
|
||||||
|
|
||||||
@@ -38,24 +38,24 @@
|
@@ -38,19 +38,18 @@
|
||||||
"ntp_background": "rgb(43, 42, 51)",
|
"ntp_background": "rgb(43, 42, 51)",
|
||||||
"ntp_card_background": "rgb(66,65,77)",
|
"ntp_card_background": "rgb(66,65,77)",
|
||||||
"ntp_text": "rgb(251, 251, 254)",
|
"ntp_text": "rgb(251, 251, 254)",
|
||||||
|
@ -41,13 +41,16 @@ index 544986d5e93c033f944cf301af79e0750864a32c..ec5e7653b9c0c6d86e5c869c1a5f1d84
|
||||||
"urlbar_popup_separator": "rgb(82,82,94)",
|
"urlbar_popup_separator": "rgb(82,82,94)",
|
||||||
"appmenu_update_icon_color": "#54FFBD",
|
"appmenu_update_icon_color": "#54FFBD",
|
||||||
"appmenu_info_icon_color": "#80EBFF",
|
"appmenu_info_icon_color": "#80EBFF",
|
||||||
"tab_icon_overlay_stroke": "rgb(66,65,77)",
|
@@ -61,7 +60,8 @@
|
||||||
- "tab_icon_overlay_fill": "rgb(251,251,254)"
|
|
||||||
+ "tab_icon_overlay_fill": "rgb(251,251,254)",
|
|
||||||
+ "zen_main_browser_background": "rgb(53, 52, 61)"
|
|
||||||
},
|
|
||||||
"properties": {
|
|
||||||
"color_scheme": "dark",
|
"color_scheme": "dark",
|
||||||
|
"panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
|
||||||
|
"toolbar_field_icon_opacity": "1",
|
||||||
|
- "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
|
||||||
|
+ "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
|
||||||
|
+ "zen_main_browser_background": "var(--zen-colors-secondary)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
@@ -83,7 +83,8 @@
|
@@ -83,7 +83,8 @@
|
||||||
"appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
|
"appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
|
||||||
"appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
|
"appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json
|
diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json
|
||||||
index 7385970fa8e3ff9659b72cfb238003958220fb0d..70739d61207c60a1869b6a590c452a8e62698833 100644
|
index 7385970fa8e3ff9659b72cfb238003958220fb0d..f1fce740db32e7dcf8553619888844e4ef442297 100644
|
||||||
--- a/browser/themes/addons/light/manifest.json
|
--- a/browser/themes/addons/light/manifest.json
|
||||||
+++ b/browser/themes/addons/light/manifest.json
|
+++ b/browser/themes/addons/light/manifest.json
|
||||||
@@ -7,10 +7,10 @@
|
@@ -7,10 +7,10 @@
|
||||||
|
@ -16,7 +16,7 @@ index 7385970fa8e3ff9659b72cfb238003958220fb0d..70739d61207c60a1869b6a590c452a8e
|
||||||
|
|
||||||
"icons": { "32": "icon.svg" },
|
"icons": { "32": "icon.svg" },
|
||||||
|
|
||||||
@@ -42,18 +42,19 @@
|
@@ -42,12 +42,12 @@
|
||||||
"button": "rgba(207,207,216,.33)",
|
"button": "rgba(207,207,216,.33)",
|
||||||
"button_hover": "rgba(207,207,216,.66)",
|
"button_hover": "rgba(207,207,216,.66)",
|
||||||
"button_active": "rgb(207,207,216)",
|
"button_active": "rgb(207,207,216)",
|
||||||
|
@ -34,23 +34,18 @@ index 7385970fa8e3ff9659b72cfb238003958220fb0d..70739d61207c60a1869b6a590c452a8e
|
||||||
"urlbar_popup_hover": "rgb(240,240,244)",
|
"urlbar_popup_hover": "rgb(240,240,244)",
|
||||||
"urlbar_popup_separator": "rgb(240,240,244)",
|
"urlbar_popup_separator": "rgb(240,240,244)",
|
||||||
"appmenu_update_icon_color": "#2AC3A2",
|
"appmenu_update_icon_color": "#2AC3A2",
|
||||||
"appmenu_info_icon_color": "#0090ED",
|
@@ -61,8 +61,9 @@
|
||||||
"tab_icon_overlay_stroke": "rgb(255,255,255)",
|
|
||||||
- "tab_icon_overlay_fill": "rgb(91,91,102)"
|
|
||||||
+ "tab_icon_overlay_fill": "rgb(91,91,102)",
|
|
||||||
+ "zen_main_browser_background": "rgb(229,229,229)"
|
|
||||||
},
|
|
||||||
"properties": {
|
|
||||||
"color_scheme": "light",
|
|
||||||
@@ -61,7 +62,7 @@
|
|
||||||
"panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
|
"panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
|
||||||
"panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)",
|
"panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)",
|
||||||
"toolbar_field_icon_opacity": "0.72",
|
"toolbar_field_icon_opacity": "0.72",
|
||||||
- "input_border_color": "color-mix(in srgb, currentColor 41%, transparent)",
|
- "input_border_color": "color-mix(in srgb, currentColor 41%, transparent)",
|
||||||
|
- "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
|
||||||
+ "input_border_color": "rgba(0, 0, 0, .3)",
|
+ "input_border_color": "rgba(0, 0, 0, .3)",
|
||||||
"zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
|
+ "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
|
||||||
|
+ "zen_main_browser_background": "var(--zen-colors-secondary)"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -85,7 +86,8 @@
|
@@ -85,7 +86,8 @@
|
||||||
"appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
|
"appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
|
||||||
"appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
|
"appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
|
||||||
|
|
|
@ -1,7 +1,16 @@
|
||||||
diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
|
diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
|
||||||
index eb92f71e5942a19618fd74492354de78ac03bacf..0ba9a169b1a8937e8cdf39fa1fe8e5f14e09c306 100644
|
index eb92f71e5942a19618fd74492354de78ac03bacf..51dbf4a694e2ac22fb02abcd405db579966c1bdc 100644
|
||||||
--- a/browser/themes/shared/tabs.css
|
--- a/browser/themes/shared/tabs.css
|
||||||
+++ b/browser/themes/shared/tabs.css
|
+++ b/browser/themes/shared/tabs.css
|
||||||
|
@@ -67,7 +67,7 @@
|
||||||
|
|
||||||
|
#tabbrowser-tabs {
|
||||||
|
--tab-min-width: 76px;
|
||||||
|
- --tab-loading-fill: #0A84FF;
|
||||||
|
+ --tab-loading-fill: var(--zen-primary-color);
|
||||||
|
--tab-overflow-pinned-tabs-width: 0px;
|
||||||
|
padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
|
||||||
|
/* Use a bigger flex value than the searchbar to prevent it from
|
||||||
@@ -633,7 +633,7 @@
|
@@ -633,7 +633,7 @@
|
||||||
toolbarbutton:not(#firefox-view-button),
|
toolbarbutton:not(#firefox-view-button),
|
||||||
toolbarpaletteitem:not(#wrapper-firefox-view-button)
|
toolbarpaletteitem:not(#wrapper-firefox-view-button)
|
||||||
|
|
13
src/browser/themes/shared/urlbar-searchbar-css.patch
Normal file
13
src/browser/themes/shared/urlbar-searchbar-css.patch
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
|
||||||
|
index 9fc88fbde80a39989bde559ecc07b8e3094ccb7e..e4ceab446cc10d45a4c3a50e7f6323a3da36e8d4 100644
|
||||||
|
--- a/browser/themes/shared/urlbar-searchbar.css
|
||||||
|
+++ b/browser/themes/shared/urlbar-searchbar.css
|
||||||
|
@@ -59,7 +59,7 @@
|
||||||
|
|
||||||
|
#urlbar-background,
|
||||||
|
#searchbar {
|
||||||
|
- background-color: var(--toolbar-field-background-color);
|
||||||
|
+ background-color: var(--zen-colors-input-bg);
|
||||||
|
background-clip: border-box;
|
||||||
|
border: 1px solid var(--toolbar-field-border-color);
|
||||||
|
border-radius: var(--toolbarbutton-border-radius);
|
|
@ -18,8 +18,7 @@
|
||||||
--fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width));
|
--fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width));
|
||||||
--fp-contextmenu-separator-horizontal: 0;
|
--fp-contextmenu-separator-horizontal: 0;
|
||||||
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
|
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
|
||||||
/* TODO: This could be cooked a bit more */
|
--toolbar-bgcolor: var(--zen-colors-tertiary) !important;
|
||||||
/*--toolbar-bgcolor: light-dark(rgba(255,255,255,.9), #282828) !important;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#PersonalToolbar {
|
#PersonalToolbar {
|
||||||
|
@ -244,7 +243,7 @@ toolbarbutton#scrollbutton-up {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbrowser-tab:is([multiselected="true"], [selected]) {
|
.tabbrowser-tab:is([multiselected="true"], [selected]) {
|
||||||
border-color: var(--color-accent-primary);
|
border-color: var(--zen-colors-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-close-button {
|
.tab-close-button {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
@import url("zen-fullscreen-override.css");
|
@import url("zen-fullscreen-override.css");
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--zen-main-browser-background: light-dark(#ddd, #4a4a4a);
|
--zen-main-browser-background: var(--zen-colors-secondary);
|
||||||
--zen-appcontent-separator-from-window-single: 7px;
|
--zen-appcontent-separator-from-window-single: 7px;
|
||||||
--zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
|
--zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
|
||||||
}
|
}
|
||||||
|
|
13
src/toolkit/themes/shared/global-shared-css.patch
Normal file
13
src/toolkit/themes/shared/global-shared-css.patch
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
|
||||||
|
index c478b2745e838a7fcb91da05ff9c5769065fd1c4..6977f16b1ff6f1f0fe9c1ad47d870d92f5857edd 100644
|
||||||
|
--- a/toolkit/themes/shared/global-shared.css
|
||||||
|
+++ b/toolkit/themes/shared/global-shared.css
|
||||||
|
@@ -45,7 +45,7 @@
|
||||||
|
|
||||||
|
--toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
|
||||||
|
--toolbar-non-lwt-textcolor: -moz-dialogtext;
|
||||||
|
- --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
|
||||||
|
+ --toolbar-bgcolor: var(--zen-colors-tertiary);
|
||||||
|
--toolbar-color: var(--toolbar-non-lwt-textcolor);
|
||||||
|
|
||||||
|
&:-moz-lwtheme {
|
|
@ -1,15 +1,44 @@
|
||||||
:host(:is(.anonymous-content-host, notification-message)),
|
:host(:is(.anonymous-content-host, notification-message)),
|
||||||
:root {
|
:root {
|
||||||
--in-content-primary-button-background: #000 !important;
|
/** Primary colors examples:
|
||||||
--in-content-primary-button-background-hover: #181818 !important;
|
* - green: #96D785;
|
||||||
--in-content-primary-button-background-active: #313131 !important;
|
* - blue: #0b57d0;
|
||||||
|
* - yellow: #F8BC48;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** Zen colors are generated automatically from the primary color */
|
||||||
|
--zen-primary-color: #0b57d0;
|
||||||
|
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
|
||||||
|
--zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 20%, white 80%);
|
||||||
|
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 4%, white 96%);
|
||||||
|
|
||||||
|
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%);
|
||||||
|
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
|
||||||
|
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 40%, black 60%);
|
||||||
|
|
||||||
|
--zen-colors-shadow-color: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%);
|
||||||
|
--zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 90%);
|
||||||
|
|
||||||
|
--in-content-primary-button-background: var(--zen-colors-secondary) !important;
|
||||||
|
--in-content-primary-button-background-hover: var(--zen-colors-hover-bg) !important;
|
||||||
|
--in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important;
|
||||||
|
--in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
|
||||||
--in-content-primary-button-border-color: transparent !important;
|
--in-content-primary-button-border-color: transparent !important;
|
||||||
--in-content-primary-button-border-hover: transparent !important;
|
--in-content-primary-button-border-hover: transparent !important;
|
||||||
--in-content-primary-button-border-active: transparent !important;
|
--in-content-primary-button-border-active: var(--zen-colors-border) !important;
|
||||||
--zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%);
|
--zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%);
|
||||||
|
|
||||||
--in-content-page-background: #F9F9FB !important;
|
--in-content-accent-color: var(--zen-colors-primary) !important;
|
||||||
--zen-in-content-dialog-background: var(--in-content-page-background);
|
|
||||||
|
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
|
||||||
|
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
|
||||||
|
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
|
||||||
|
--button-primary-color: var(--in-content-primary-button-text-color) !important;
|
||||||
|
|
||||||
|
--in-content-page-background: var(--zen-colors-tertiary) !important;
|
||||||
|
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
|
||||||
|
|
||||||
|
/* TODO: Support dark themes! */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
|
@ -222,3 +222,15 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
menupopup::part(content),
|
||||||
|
panel::part(content) {
|
||||||
|
--panel-shadow: var(--zen-colors-shadow-color) 0px 1px 4px !important;
|
||||||
|
border: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
menupopup,
|
||||||
|
panel {
|
||||||
|
--panel-shadow: none !important;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue