Fix input theme colors

client/src/app/core/theme/theme.service.ts

@@ -181,21 +181,22 @@ export class ThemeService {
       return
     }
 
-    if (!this.canInjectColorPalette()) {
+    if (!this.canInjectCoreColorPalette()) {
       return setTimeout(() => this.injectCoreColorPalette(iteration + 1))
     }
 
     return this.injectColorPalette()
   }
 
-  private canInjectColorPalette () {
+  private canInjectCoreColorPalette () {
     const computedStyle = getComputedStyle(document.body)
+    const isDark = computedStyle.getPropertyValue('--is-dark')
 
-    return !!computedStyle.getPropertyValue('--fg')
+    return isDark === '0' || isDark === '1'
   }
 
   private injectColorPalette () {
-    debugLogger(`Injecting color palette`)
+    console.log(`Injecting color palette`)
 
     const rootStyle = document.body.style
     const computedStyle = getComputedStyle(document.body)
@@ -229,6 +230,8 @@ export class ThemeService {
       { prefix: 'bg-secondary', invertIfDark: true, step: 5, darkTheme: isGlobalDarkTheme },
       { prefix: 'fg', invertIfDark: true, fallbacks: { '--fg-300': '--greyForegroundColor' }, step: 5, darkTheme: isGlobalDarkTheme },
 
+      { prefix: 'input-bg', invertIfDark: true, step: 5, darkTheme: isGlobalDarkTheme },
+
       { prefix: 'menu-fg', invertIfDark: true, step: 5, darkTheme: isMenuDarkTheme },
       { prefix: 'menu-bg', invertIfDark: true, step: 5, darkTheme: isMenuDarkTheme }
     ] as { prefix: string, invertIfDark: boolean, step: number, darkTheme: () => boolean, fallbacks?: Record<string, string> }[]

client/src/sass/include/_css-variables.scss

@@ -25,10 +25,12 @@
   --green: #{$green};
 
   --input-fg: var(--inputForegroundColor, #{pvar(--fg)});
+
   --input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
+  --input-bg-in-secondary: #{pvar(--input-bg-550)};
+
   --input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
   --input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
-  --input-bg-in-secondary: #{pvar(--bg-secondary-450)};
 
   --input-check-active-fg: #{pvar(--on-primary)};
   --input-check-active-bg: #{pvar(--primary)};
@@ -132,7 +134,6 @@
     --border-primary: #F2690D;
 
     --input-bg: #{pvar(--bg-secondary-450)};
-    --input-bg-in-secondary: #{pvar(--bg-secondary-500)};
 
     --fg: hsl(0 10% 96%);
 

client/src/sass/include/_variables.scss

@@ -98,11 +98,14 @@ $variables: (
   --green: var(--green),
 
   --input-fg: var(--input-fg),
+
   --input-bg: var(--input-bg),
+  --input-bg-550: var(--input-bg-550),
+  --input-bg-600: var(--input-bg-600),
+  --input-bg-in-secondary: var(--input-bg-in-secondary),
 
   --input-placeholder: var(--input-placeholder),
   --input-border-color: var(--input-border-color),
-  --input-bg-in-secondary: var(--input-bg-in-secondary),
   --input-border-radius: var(--input-border-radius),
 
   --input-check-active-fg: var(--input-check-active-fg),

client/src/sass/primeng-custom.scss

@@ -3,6 +3,7 @@
 @use '_icons' as *;
 
 $hover-bg: pvar(--bg-secondary-400);
+$hover-bg-2: pvar(--bg-secondary-350);
 
 /* stylelint-disable */
 @import 'primeng/resources/primeng.css';
@@ -493,12 +494,13 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 2px 15px;
   margin-right: 0.5rem;
-  background: pvar(--bg-secondary-500);
+  background: pvar(--input-bg-550);
   color: pvar(--fg);
   border-radius: 4px;
+  text-transform: uppercase;
 }
 .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
-  background: pvar(--bg-secondary-500);
+  background: pvar(--input-bg-600);
   color: pvar(--fg);
 }
 .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -508,7 +510,7 @@ body p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   padding: 3px 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  color: pvar(--input-placeholder);
+  color: pvar(--input-fg);
   padding: 0;
   margin: 0;
 }
@@ -665,7 +667,7 @@ p-chips.p-chips-clearable .p-chips-clear-icon {
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
   color: pvar(--fg);
-  background: pvar(--bg-secondary-500);
+  background: $hover-bg;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
@@ -821,7 +823,7 @@ p-table {
   .p-datatable-tbody {
     tr {
       &:hover {
-        background-color: $hover-bg !important;
+        background-color: $hover-bg-2 !important;
       }
 
       td {