1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 20:35:28 +02:00

Added chrome style color palletes and automatic theme creation

This commit is contained in:
Mauro Balades 2024-04-10 21:41:21 +02:00
parent dbdae61f8b
commit 1b86944a41
10 changed files with 117 additions and 31 deletions

View file

@ -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};

View file

@ -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",

View file

@ -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",

View file

@ -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)

View 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);

View file

@ -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 {

View file

@ -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);
} }

View 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 {

View file

@ -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) {

View file

@ -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;
}