Increase theme compatibility

Try to use CSS variable as much as possible

5 files changed, 44 insertions, 15 deletions

diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index f7a7fea55..6ccef9f2c 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -23,12 +23,8 @@
     max-width: 300px;
 
     .popover-body {
-      font-family: $main-fonts;
-      text-align: start;
       padding: 10px;
       font-size: 13px;
-      background-color: pvar(--mainBackgroundColor);
-      color: pvar(--mainForegroundColor);
       border-radius: 3px;
 
       p {
@@ -37,6 +33,7 @@
 
       ul {
         @include padding-left(20px);
+
         margin-bottom: 0;
       }
     }
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
index 12352b3b7..8f4d4c7c1 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -21,7 +21,7 @@
   }
 
   my-global-icon {
-    @include apply-svg-color(#333);
+    @include apply-svg-color(#{pvar(--mainForegroundColor)});
     @include margin-right(11px);
     @include margin-left(3px);
 
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 724c4ad69..7843d3be7 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -30,11 +30,23 @@
 @import 'bootstrap/scss/helpers';
 @import 'bootstrap/scss/utilities/api';
 
+:root {
+  --bs-border-color-translucent: #{pvar(--inputBorderColor)};
+}
+
 .accordion {
   --bs-accordion-color: #{pvar(--mainForegroundColor)};
   --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
 }
 
+.popover {
+  --bs-popover-bg: #{pvar(--mainBackgroundColor)};
+  --bs-popover-body-color: #{pvar(--mainForegroundColor)};
+  --bs-popover-header-color: #{pvar(--mainForegroundColor)};
+
+  font-family: $main-fonts;
+}
+
 .flex-auto {
   flex: auto;
 }
@@ -48,12 +60,15 @@
 // ---------------------------------------------------------------------------
 
 .dropdown-menu {
+  --bs-dropdown-link-hover-bg: #{pvar(--mainBackgroundHoverColor)};
+  --bs-dropdown-link-color: #{pvar(--mainForegroundColor)};
+  --bs-dropdown-border-color: #{pvar(--inputBorderColor)};
+
   .dropdown-header {
     @include padding-left(1rem);
   }
 
   .dropdown-item {
-    color: pvar(--mainForegroundColor);
     padding: 3px 15px;
 
     &.active {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 79d350629..2d9f9011d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -397,7 +397,7 @@
     position: absolute;
     pointer-events: none;
     border: 5px solid rgba(0, 0, 0, 0);
-    border-top-color: #000;
+    border-top-color: pvar(--mainForegroundColor);
     margin-top: -2px;
     z-index: 100;
   }
@@ -646,7 +646,7 @@
 }
 
 @mixin progressbar($small: false) {
-  background-color: $grey-background-color;
+  background-color: pvar(--greyBackgroundColor);
   display: flex;
   height: 1rem;
   overflow: hidden;
@@ -656,7 +656,7 @@
 
   span {
     position: absolute;
-    color: $grey-foreground-color;
+    color: pvar(--greyForegroundColor);
 
     @if $small {
       top: -1px;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index e231e4fed..b0af4f763 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -1,19 +1,36 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$ng-select-highlight: #f2690d;
-// $ng-select-primary-text: #333 !default;
+$ng-select-highlight: pvar(--mainColor);
+$ng-select-primary-text: pvar(--mainForegroundColor);
 // $ng-select-disabled-text: #f9f9f9 !default;
 $ng-select-border: $input-border-color;
 // $ng-select-border-radius: 4px !default;
-// $ng-select-bg: #ffffff !default;
-// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
-// $ng-select-marke d: lighten($ng-select-highlight, 48) !default;
+$ng-select-bg: pvar(--mainBackgroundColor);
+
+// Cannot use a CSS variable as the default them use darken on this variable
+$ng-select-selected: lighten($main-color, 40%);
+// $ng-select-selected-text: $ng-select-primary-text !default;
+
+$ng-select-marked: pvar(--mainColorLightest);
+// $ng-select-marked-text: $ng-select-primary-text !default;
+
 $ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
-// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
+$ng-select-placeholder: pvar(--greyForegroundColor);
 $ng-select-height: 30px;
 $ng-select-value-padding-left: 15px;
 $ng-select-value-font-size: $form-input-font-size;
+// $ng-select-value-text: $ng-select-primary-text !default;
+
+// $ng-select-dropdown-bg: $ng-select-bg !default;
+// $ng-select-dropdown-border: $ng-select-border !default;
+// $ng-select-dropdown-optgroup-text: rgba(0, 0, 0, 0.54) !default;
+// $ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
+// $ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
+// $ng-select-dropdown-option-text: rgba(0, 0, 0, 0.87) !default;
+$ng-select-dropdown-option-disabled: pvar(--greyForegroundColor);
+
+$ng-select-input-text: pvar(--mainForegroundColor);
 
 @import '@ng-select/ng-select/scss/default.theme';