mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-02-07 04:17:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fixed dark theme issues, b=closes #9229, c=common, folders

Browse Source
This commit is contained in:
Mr. M
2025-09-05 12:19:22 +02:00
parent e233be5c78
commit 213151ed9d
2 changed files with 51 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/zen/common/styles/zen-theme.css
View File

@@ -25,27 +25,46 @@
--zen-branding-bg-reverse: light-dark(var(--zen-branding-dark), var(--zen-branding-paper));
/** Zen colors are generated automatically from the primary color */
--zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
--zen-colors-secondary: color-mix(in srgb, var(--zen-colors-primary) 20%, white 80%);
--zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 2%, white 98%);
--zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
--zen-colors-primary-foreground: var(--zen-branding-bg-reverse);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
--zen-colors-border-contrast: color-mix(
in srgb,
var(--zen-colors-secondary) 10%,
rgba(181, 181, 181, 0.11) 90%
--zen-colors-primary: light-dark(
color-mix(in srgb, var(--zen-primary-color) 50%, black 50%),
color-mix(in srgb, var(--zen-primary-color) 20%, var(--zen-branding-bg) 80%)
);
--zen-colors-secondary: light-dark(
color-mix(in srgb, var(--zen-colors-primary) 20%, white 80%),
color-mix(in srgb, var(--zen-primary-color) 30%, var(--zen-branding-bg) 70%)
);
--zen-colors-tertiary: light-dark(
color-mix(in srgb, var(--zen-primary-color) 2%, white 98%),
color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-branding-bg) 99%)
);
--zen-colors-input-bg: color-mix(
in srgb,
var(--zen-primary-color) 1%,
var(--zen-colors-tertiary) 99%
--zen-colors-hover-bg: light-dark(
color-mix(in srgb, var(--zen-primary-color) 90%, white 10%),
color-mix(in srgb, var(--zen-primary-color) 90%, var(--zen-branding-bg) 10%)
);
--zen-colors-primary-foreground: light-dark(
var(--zen-branding-bg-reverse),
color-mix(in srgb, var(--zen-primary-color) 80%, white 20%)
);
--zen-colors-border: light-dark(
color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%),
color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%)
);
--zen-colors-border-contrast: light-dark(
color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(181, 181, 181, 0.11) 90%),
color-mix(in srgb, var(--zen-colors-secondary) 10%, rgba(255, 255, 255, 0.11) 90%)
);
--zen-colors-input-bg: light-dark(
color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%),
color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-branding-bg) 99%)
);
--zen-dialog-background: light-dark(rgb(244, 244, 244), rgb(31, 31, 31));
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%);
--zen-urlbar-background: light-dark(
color-mix(in srgb, var(--zen-primary-color) 3%, #f4f4f4 97%),
color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%)
);
--zen-secondary-btn-color: var(--zen-colors-primary-foreground);
@@ -111,7 +130,10 @@
) !important;
--in-content-page-background: var(--zen-colors-tertiary) !important;
--zen-in-content-dialog-background: var(--zen-colors-tertiary);
--zen-in-content-dialog-background: light-dark(
var(--zen-colors-tertiary),
var(--zen-branding-bg)
);
--zen-button-border-radius: 5px;
--zen-button-padding: 0.6rem 1.2rem;
@@ -138,6 +160,13 @@
--toolbarbutton-hover-background: var(--zen-toolbar-element-bg-hover) !important;
/* Using a semitransparent background preserves the tinting from the backdrop.
* Note that the toolbar text color from browser-colors.css should be ok,
* as the backdrop matches our color scheme. The .6 matches what we do for
* acrylic, and the .15 matches the 85% we do for the default toolbar
* background on the native theme. */
--toolbar-bgcolor: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15));
--toolbarbutton-active-background: color-mix(
in srgb,
var(--zen-branding-bg-reverse) 7%,
@@ -149,10 +178,13 @@
/* Other colors */
--urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
--toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
--zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
--urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
--input-bgcolor: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
--toolbar-field-focus-background-color: light-dark(
rgba(255, 255, 255, 0.25),
rgba(0, 0, 0, 0.3)
) !important;
/* Transitions */
--zen-tabbox-element-indent-transition: margin-inline-start 0.1s ease-in-out;
@@ -284,52 +316,3 @@
--toolbar-color-scheme: light;
}
}
@media (prefers-color-scheme: dark) {
:host(:is(.anonymous-content-host, notification-message)),
:root {
--zen-in-content-dialog-background: var(--zen-branding-bg);
--zen-colors-primary: color-mix(
in srgb,
var(--zen-primary-color) 20%,
var(--zen-branding-bg) 80%
);
--zen-colors-secondary: color-mix(
in srgb,
var(--zen-primary-color) 30%,
var(--zen-branding-bg) 70%
);
--zen-colors-tertiary: color-mix(
in srgb,
var(--zen-primary-color) 1%,
var(--zen-branding-bg) 99%
);
--zen-colors-hover-bg: color-mix(
in srgb,
var(--zen-primary-color) 90%,
var(--zen-branding-bg) 10%
);
--zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, white 20%);
--zen-colors-input-bg: color-mix(
in srgb,
var(--zen-primary-color) 1%,
var(--zen-branding-bg) 99%
);
--zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 20%, rgb(79, 79, 79) 80%);
--zen-colors-border-contrast: color-mix(
in srgb,
var(--zen-colors-secondary) 10%,
rgba(255, 255, 255, 0.11) 90%
);
--zen-urlbar-background: color-mix(in srgb, var(--zen-primary-color) 4%, rgb(24, 24, 24) 96%);
--zen-browser-gradient-base: color-mix(
in srgb,
var(--zen-primary-color) 30%,
var(--zen-branding-bg) 70%
);
}
}

2
src/zen/folders/zen-folders.css
View File

@@ -269,7 +269,7 @@ zen-folder {
pointer-events: none;
:root[zen-sidebar-expanded] & {
left: 2px;
left: 4px;
}
& svg {