I'm using SaaS theme. The header hamburger menu that shows up on mobile screen is not inverting its color when the mobile is set to use dark mode. Therefore, the menu becomes very hard to see.
You can see the same behavior on the reference demo site https://themenectar.com/salient/saas/. Tested on Galaxy S21, on Edge browser set to Dark mode.
You should be able to correct that by adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
@media (prefers-color-scheme: dark) {
#header-outer #top .slide-out-widget-area-toggle a .lines:after,
#header-outer #top .slide-out-widget-area-toggle a .lines:before,
#header-outer #top .slide-out-widget-area-toggle a .lines-button:after {
background: #fff!important;
}
}
That is not working as expected. My mobile OS has dark mode, but my browser has light mode. The site is seeing the OS preference and is rendering white lines on the gray background. The only workaround I found was to go with the middle grey option, e.g., #888888, so it always stays visible.
But this is not a proper solution.
For example, next to the lines menu, I also have an icon from the font collection; that one is switched automatically by the browser from a color point of view, but the lines are not.
"I also have an icon from the font collection; that one is switched automatically by the browser from a color point of view, but the lines are not."
That’s likely because the lines used for the menu button are three individual divs with a background color, rather than a font-based icon. This allows the lines to animate with certain off-canvas menu styles.
Instead, you could remove those lines and insert a standard menu icon using the following CSS. I would expect this to enable Edge’s dark mode to automatically handle the color swap.
I'm using SaaS theme. The header hamburger menu that shows up on mobile screen is not inverting its color when the mobile is set to use dark mode. Therefore, the menu becomes very hard to see.
Attached files: issue.jpeg
Hi there,
Thanks for writing to us.
I am not replicating the issue from my end. Your head also is not transparent. Please share steps of how to replicate the same issue on mobile.
I look forward to your response.
You can see the same behavior on the reference demo site https://themenectar.com/salient/saas/. Tested on Galaxy S21, on Edge browser set to Dark mode.
Hey Again,
Escalating this to the developer for further response.
Best
ThemeNectar Support Team
Hey ctincristi,
You should be able to correct that by adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
@media (prefers-color-scheme: dark) { #header-outer #top .slide-out-widget-area-toggle a .lines:after, #header-outer #top .slide-out-widget-area-toggle a .lines:before, #header-outer #top .slide-out-widget-area-toggle a .lines-button:after { background: #fff!important; } }Kind regards
That is not working as expected. My mobile OS has dark mode, but my browser has light mode. The site is seeing the OS preference and is rendering white lines on the gray background. The only workaround I found was to go with the middle grey option, e.g., #888888, so it always stays visible.
But this is not a proper solution.
For example, next to the lines menu, I also have an icon from the font collection; that one is switched automatically by the browser from a color point of view, but the lines are not.
Hey ctincristi,
"I also have an icon from the font collection; that one is switched automatically by the browser from a color point of view, but the lines are not."
That’s likely because the lines used for the menu button are three individual divs with a background color, rather than a font-based icon. This allows the lines to animate with certain off-canvas menu styles.
Instead, you could remove those lines and insert a standard menu icon using the following CSS. I would expect this to enable Edge’s dark mode to automatically handle the color swap.
body #header-outer .lines-button { visibility: hidden; } .span_9 > .slide-out-widget-area-toggle a:before { font-family: FontAwesome; content: "\f0c9"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 22px; }Changing it to FontAwesome, as instructed, made it work as expected.
Hi there,
I'm happy that we could assist you! If you haven't already, please consider sharing your experience by leaving a review on ThemeForest.
Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out.
Best regards,