Make dark mode more colorful and give chrome bars a full tint
Mirror the earlier light-mode pastel/colorful pass for dark mode: boost tc()'s lightness and chroma, and richen --mf-bg/--mf-elevated/ --mf-panel-bg/--mf-bar-bg/--mf-hairline the same way, so dark mode reads as colorful instead of near-grayscale. Sidebar, Queue, and MobileHeader used bg-bg directly, so in dark mode they stayed almost black regardless of hue. Add --mf-chrome-bg (an alias to --mf-bg in light mode, a solid color-mix of --mf-hero-tint into --mf-bg in dark mode) and switch those three to bg-chrome, so they read as a full, solid colored bar in dark mode instead of a fading gradient (per feedback: a whole bar, not a gradient). Also fixes glass-bar (PlayerBar/TabsBar): it set `background-image: var(--mf-bar-bg)`, but --mf-bar-bg is a plain color, not a valid <image>, so the declaration was silently dropped and these bars never actually showed their tint in either mode. Changed to background-color.
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
--font-display: 'Sora Variable', ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
--color-bg: var(--mf-bg);
|
||||
--color-chrome: var(--mf-chrome-bg);
|
||||
--color-elevated: var(--mf-elevated);
|
||||
--color-surface: var(--mf-surface);
|
||||
--color-surface-2: var(--mf-surface-2);
|
||||
@@ -127,7 +128,7 @@
|
||||
transition-duration: var(--default-transition-duration);
|
||||
}
|
||||
@utility glass-bar {
|
||||
background-image: var(--mf-bar-bg);
|
||||
background-color: var(--mf-bar-bg);
|
||||
border-top: 1px solid var(--mf-hairline);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user