Fix themes colors by using SCSS variables (#3376)

* :lipstick: Use foreground var for code

* :lipstick: Use submenu var color

* :lipstick: Use foreground var color for menu

* :bug: Fix var used in menu

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 8a8094fbbbc751c321c516d16fb1d987bffc12b3..e79ecb5c7886c33dc2990d0af3d4a3b8a1a961b7 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -164,7 +164,7 @@ menu {
       &:hover,
       &:focus-visible {
         my-global-icon {
-          @include apply-svg-color(var(--mainBackgroundColor));
+          @include apply-svg-color(var(--menuForegroundColor));
         }
       }
 
@@ -269,7 +269,7 @@ menu {
     a, span[role=button] {
       display: inline-block;
       text-decoration: none;
-      color: pvar(--mainBackgroundColor);
+      color: pvar(--menuForegroundColor);
       opacity: $footer-links-base-opacity;
       white-space: nowrap;
       font-size: 90%;
@@ -284,7 +284,7 @@ menu {
         height: 1.4rem;
 
         my-global-icon {
-          @include apply-svg-color(pvar(--mainBackgroundColor));
+          @include apply-svg-color(pvar(--menuForegroundColor));
 
           display: flex;
           width: auto;
@@ -298,7 +298,7 @@ menu {
   .footer-copyleft small a {
     @include disable-default-a-behaviour;
 
-    color: pvar(--mainBackgroundColor);
+    color: pvar(--menuForegroundColor);
     opacity: $footer-links-base-opacity - .2;
   }
 }

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 25db9167031aba793b1363362cdd280a8a674d4e..ece8411af88c9b6f2fb9c5bae562482bcd431f79 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -105,6 +105,7 @@ label {
 
 code {
   background-color: pvar(--greyBackgroundColor);
+  color: pvar(--greyForegroundColor);
   border-radius: 3px;
   padding: .2em .4em;
   margin: auto .4em;
@@ -261,7 +262,7 @@ code {
     opacity: 0.6;
 
     &.active {
-      background-color: #f0f0f0;
+      background-color: pvar(--submenuColor);
     }
 
     &.active, &:hover, &:active, &:focus {