diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 0f98da0e2..3e072279f 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -10,14 +10,14 @@ } menu { - background-color: $menu-background; + background-color: var(--menuBackgroundColor); margin: 0; padding: 0; height: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - color: $menu-color; + color: var(--menuForegroundColor); display: flex; flex-direction: column; width: 100%; @@ -52,7 +52,7 @@ menu { .logged-in-username { font-size: 16px; font-weight: $font-semibold; - color: $menu-color; + color: var(--menuForegroundColor); cursor: pointer; @include disable-default-a-behaviour; @@ -124,7 +124,7 @@ menu { display: flex; align-items: center; padding-left: $menu-lateral-padding; - color: $menu-color; + color: var(--menuForegroundColor); cursor: pointer; height: 40px; font-size: 16px; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 8d2bfb077..caf039b6d 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -26,6 +26,8 @@ body { --mainHoverColor: #{$orange-hoover-color}; --mainBackgroundColor: #{$bg-color}; --mainForegroundColor: #{$fg-color}; + --menuBackgroundColor: #{$menu-background}; + --menuForegroundColor: #{$menu-color}; --submenuColor: #{$sub-menu-color}; --inputColor: #{$input-background-color}; --inputPlaceholderColor: #{$input-placeholder-color}; diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 3514bdb9b..fdf33b12a 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -58,6 +58,8 @@ $variables: ( --mainHoverColor: var(--mainHoverColor), --mainBackgroundColor: var(--mainBackgroundColor), --mainForegroundColor: var(--mainForegroundColor), + --menuBackgroundColor: var(--menuBackgroundColor), + --menuForegroundColor: var(--menuForegroundColor), --submenuColor: var(--submenuColor), --inputColor: var(--inputColor), --inputPlaceholderColor: var(--inputPlaceholderColor)