Fix menu palette

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 {

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 {

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

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