Inconsistent font colour for orange Menu Themes

[yampan]

Hi,

I notice all the font colours on the static menu bar are white for the colour menu theme, with the exception of orange.
The font is black (not white) on for menu when orange is selected.

This also applies to orange component theme. Font is black instead of white.

Is there any quick workaround for it to be white?
I don't know much of scss, so a detailed explanation would be appreciated.
Thanks!

[habubey]

Hey there!

Yes, you may change font colors in SCSS folders. As far as I understand you want to change the font colors in the Orange theme. So you can find the "_orange.scss" folder and all you have to do is change the variables under the ".layout-sidebar-orange" class however you want.

If this is not what you are looking for, please do not hesitate to contact us!
Best

[yampan]

Hey there!

Yes, you may change font colors in SCSS folders. As far as I understand you want to change the font colors in the Orange theme. So you can find the "_orange.scss" folder and all you have to do is change the variables under the ".layout-sidebar-orange" class however you want.

If this is not what you are looking for, please do not hesitate to contact us!
Best

Thank you for the reply. I followed your instruction and made the change.
I am documenting the steps below so that I can follow them in the subsequent updates.

1) Installed the "Live Sass Compiler" plugin in VS studio code. This will compile/watch the scss file.

2) Changed the content of public/assets/sass/layout/sidebar/themes/_orange.scss

.layout-sidebar-orange {
$sidebarBgColor:#F57C00;
$sidebarBgColorAlt:#EF6C00;
$sidebarBorder:0 none;
$appNameColor:#ffffff;
$menuSeparatorBorder: 1px solid rgba(255,255,255,0.2);
$menuitemRootTextColor: rgba(255,255,255,0.4);
$menuitemTextColor: rgba(255,255,255,0.8);
$menuitemHoverBg: rgba(255,255,255,0.1);
$menuitemActiveBg: rgba(255,255,255,0.1);
$menuitemTextActiveColor: #ffffff;
$menuitemFocusShadow: 0 0 0 0.2rem rgba(255,255,255,0.1);

@import '../_sidebar_theme_core';
}

3) Changed the content of public/assets/theme/orange/theme-light.scss

$primaryColor: #FF9800;
$primaryLightColor: scale-color($primaryColor, $lightness: 60%) !default;
$primaryDarkColor: scale-color($primaryColor, $lightness: -10%) !default;
$primaryDarkerColor: scale-color($primaryColor, $lightness: -20%) !default;
$primaryTextColor: #ffffff;

$highlightBg: #FFF3E0;
$highlightTextColor: #495057;

@import '../../sass/theme/_theme_light';

4) Check the frontend and it should be update.

Thanks again!

[habubey]

Hey there!
You are welcome!
Best