From 1dc61099898bfcef8b63d4df1c58ef7ed3d6442d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 11 Dec 2024 15:54:42 +0100
Subject: [PATCH] Fix menu palette
---
client/src/app/core/theme/theme.service.ts | 48 ++++++++++++++--------
client/src/app/menu/menu.component.scss | 24 +++++------
client/src/sass/application.scss | 7 ++++
client/src/sass/include/_variables.scss | 29 +++++++++++--
4 files changed, 76 insertions(+), 32 deletions(-)
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index 6a702b738..46a61a6c4 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -188,19 +188,32 @@ export class ThemeService {
this.oldInjectedProperties = []
- const toProcess: { prefix: string, invertIfDark: boolean, step: number, fallbacks?: Record<string, string> }[] = [
- { prefix: 'primary', invertIfDark: true, step: 5 },
- { prefix: 'on-primary', invertIfDark: true, step: 0 },
- { prefix: 'bg-secondary', invertIfDark: true, step: 5 },
- { prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' }, step: 5 }
+ const globalDarkTheme = this.isDarkTheme({
+ fg: computedStyle.getPropertyValue('--fg') || computedStyle.getPropertyValue('--mainForegroundColor'),
+ bg: computedStyle.getPropertyValue('--bg') || computedStyle.getPropertyValue('--mainBackgroundColor'),
+ isDarkVar: computedStyle.getPropertyValue('--is-dark')
+ })
+
+ const darkMenuTheme = this.isDarkTheme({
+ fg: computedStyle.getPropertyValue('--menu-fg'),
+ bg: computedStyle.getPropertyValue('--menu-bg'),
+ isDarkVar: computedStyle.getPropertyValue('--is-menu-dark')
+ })
+
+ if (globalDarkTheme) debugLogger('Detected dark theme')
+ if (darkMenuTheme) debugLogger('Detected dark menu theme')
+
+ const toProcess: { prefix: string, invertIfDark: boolean, step: number, darkTheme: boolean, fallbacks?: Record<string, string> }[] = [
+ { prefix: 'primary', invertIfDark: true, step: 5, darkTheme: globalDarkTheme },
+ { prefix: 'on-primary', invertIfDark: true, step: 0, darkTheme: globalDarkTheme },
+ { prefix: 'bg-secondary', invertIfDark: true, step: 5, darkTheme: globalDarkTheme },
+ { prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' }, step: 5, darkTheme: globalDarkTheme },
+
+ { prefix: 'menu-fg', invertIfDark: true, step: 5, darkTheme: darkMenuTheme },
+ { prefix: 'menu-bg', invertIfDark: true, step: 5, darkTheme: darkMenuTheme }
]
- const darkTheme = this.isDarkTheme(computedStyle)
- if (darkTheme) {
- debugLogger('Detected dark theme')
- }
-
- for (const { prefix, invertIfDark, step, fallbacks = {} } of toProcess) {
+ for (const { prefix, invertIfDark, step, darkTheme, fallbacks = {} } of toProcess) {
const mainColor = computedStyle.getPropertyValue('--' + prefix)
const darkInverter = invertIfDark && darkTheme
@@ -254,7 +267,7 @@ export class ThemeService {
}
}
- document.body.dataset.bsTheme = darkTheme
+ document.body.dataset.bsTheme = globalDarkTheme
? 'dark'
: ''
}
@@ -267,11 +280,14 @@ export class ThemeService {
return `hsl(${Math.round(c.h)} ${Math.round(c.s)}% ${Math.round(c.l)}% / ${Math.round(c.a)})`
}
- private isDarkTheme (computedStyle: CSSStyleDeclaration) {
- const fg = computedStyle.getPropertyValue('--fg') || computedStyle.getPropertyValue('--mainForegroundColor')
- const bg = computedStyle.getPropertyValue('--bg') || computedStyle.getPropertyValue('--mainBackgroundColor')
+ private isDarkTheme (options: {
+ fg: string
+ bg: string
+ isDarkVar: string
+ }) {
+ const { fg, bg, isDarkVar } = options
- if (computedStyle.getPropertyValue('--is-dark') === '1') {
+ if (isDarkVar === '1') {
return true
} else if (fg && bg) {
try {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index f6bb396c7..49ca41e98 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -23,11 +23,11 @@
}
.toggle-menu {
- color: pvar-fallback(--menu-fg, --fg-200);
+ color: pvar(--menu-fg-300);
width: 24px;
height: 24px;
border-radius: 100%;
- background-color: pvar-fallback(--menu-bg, --bg-secondary-450);
+ background-color: pvar(--menu-bg-550);
@include button-with-icon(20px, 0, 0, 1px);
@@ -82,7 +82,7 @@
padding-top: 1.5rem;
padding-bottom: 1.5rem;
border-radius: 14px;
- background-color: pvar-fallback(--menu-bg, --bg-secondary-400);
+ background-color: pvar(--menu-bg);
}
.menu-link,
@@ -103,13 +103,13 @@
display: block;
height: 2px;
margin: 1rem var(--co-menu-x-padding);
- background: pvar(--bg-secondary-500);
+ background: pvar(--menu-bg-600);
}
}
.block-title {
font-weight: $font-bold;
- color: pvar-fallback(--menu-fg, --fg-350);
+ color: pvar(--menu-fg-450);
font-size: 14px;
margin-bottom: 0.5rem;
max-width: 180px;
@@ -133,7 +133,7 @@
&:hover,
&:focus-visible {
opacity: 1;
- background-color: pvar-fallback(--menu-bg, --bg-secondary-450);
+ background-color: pvar(--menu-bg-550);
}
my-global-icon {
@@ -156,13 +156,13 @@
.about {
.description {
font-size: 14px;
- color: pvar-fallback(--menu-fg, --fg-200);
+ color: pvar(--menu-fg-300);
}
}
.more-info-btn,
.menu-link {
- color: pvar-fallback(--menu-fg, --fg-400);
+ color: pvar(--menu-fg);
my-global-icon {
color: pvar(--secondary-icon-color);
@@ -171,11 +171,11 @@
&.active {
&,
my-global-icon {
- color: pvar(--fg);
+ color: pvar(--menu-fg-600);
}
font-weight: $font-bold;
- background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
+ background-color: pvar(--menu-bg-600);
}
}
@@ -212,7 +212,7 @@
&:not(.active) {
my-global-icon {
- color: pvar-fallback(--menu-fg, --fg-300);
+ color: pvar(--menu-fg-400);
}
}
}
@@ -255,7 +255,7 @@
--menu-margin-left: 0;
border-radius: 0;
- background-color: pvar-fallback(--menu-bg, --bg-secondary-400);
+ background-color: pvar(--menu-bg);
overflow: auto;
.main-menu-wrapper {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f8e3114f5..8b49988d1 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -82,6 +82,9 @@ body {
--header-height: #{$header-height};
+ --menu-fg: #{pvar(--fg-400)};
+ --menu-bg: #{pvar(--bg-secondary-400)};
+
@media screen and (max-width: $small-view) {
--header-height: #{$header-height-small-view};
}
@@ -107,6 +110,10 @@ body {
--bg-secondary-400: hsl(0 19% 89%);
--bg-secondary-350: hsl(0 13% 92%);
+ --menu-bg-600: hsl(0 12% 72%);
+ --menu-bg-550: hsl(0 13% 81%);
+ --menu-bg: hsl(0 19% 89%);
+
--secondary-icon-color: hsl(0, 9%, 51%);
--input-placeholder: hsl(0, 9%, 51%);
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8588445fa..c74b3588c 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -140,6 +140,31 @@ $variables: (
--bg-secondary-250: var(--bg-secondary-250),
--bg-secondary-200: var(--bg-secondary-200),
+ --menu-fg: var(--menu-fg),
+ --menu-fg-600: var(--menu-fg-600),
+ --menu-fg-550: var(--menu-fg-550),
+ --menu-fg-500: var(--menu-fg-500),
+ --menu-fg-450: var(--menu-fg-450),
+ --menu-fg-400: var(--menu-fg-400),
+ --menu-fg-350: var(--menu-fg-350),
+ --menu-fg-300: var(--menu-fg-300),
+ --menu-fg-250: var(--menu-fg-250),
+ --menu-fg-200: var(--menu-fg-200),
+ --menu-fg-150: var(--menu-fg-150),
+ --menu-fg-100: var(--menu-fg-100),
+ --menu-fg-50: var(--menu-fg-50),
+
+ --menu-bg: var(--menu-bg),
+ --menu-bg-600: var(--menu-bg-600),
+ --menu-bg-550: var(--menu-bg-550),
+ --menu-bg-500: var(--menu-bg-500),
+ --menu-bg-450: var(--menu-bg-450),
+ --menu-bg-400: var(--menu-bg-400),
+ --menu-bg-350: var(--menu-bg-350),
+ --menu-bg-300: var(--menu-bg-300),
+ --menu-bg-250: var(--menu-bg-250),
+ --menu-bg-200: var(--menu-bg-200),
+
--on-primary: var(--on-primary),
--on-primary-700: var(--on-primary-700),
--on-primary-650: var(--on-primary-650),
@@ -179,10 +204,6 @@ $variables: (
--alert-primary-border-color: var(--alert-primary-border-color),
--menu-margin-left: var(--menu-margin-left),
-
- // Optional variables
- --menu-fg: var(--menu-fg),
- --menu-bg: var(--menu-bg)
);
// SASS type check our CSS variables