theme colors on mobile devices with “dark mood” display

[ateacme]

Hi, I’ve noticed that on mobile devices whit “dark mood” settings for display, our website labartdog.com lost their basic colors, even header so the logo – brown and light-blue on transparent background – was only barely visible.

I’ve temporary changed the png logo with a jpg but still menu icons on the left is not visible…

 

is there a way to have more control on colors on mobile devices with that specific kind of settings?

Maybe I skipped some theme options? Or I can fix it with a little custom css code?

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Ateacme,

Sorry for miss your topic.

1. You can change mobile menu button in Claue > Theme Option > Header > Mobile Menu Icon
2. You can add some custom code to override theme option

@media only screen and (max-width: 736px) {
#jas-mobile-menu ul li a, .holder {
color: #fff;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

Hi,

thanks but I don’t need to change menu background color on mobile but the header under the logo: if it can be white the menu icon can remain black. Also because changing the icon for mobile it also change on desktop version.

Please have a check on labartdog.com

[Harry]

Hi,

I check your site but don’t see the issue. Can you take screenshot and add note to screenshot describe the issue?

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

yes, here you can find the screenshot with an arrow to indicate the area I need to have white.

As explained in the firs post, the problem is anly on smartphones with dark mood settings.

Thanks

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

If you want this area white on mobile please add below code tob Claue > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 736px) {

#jas-header {
background-color: #ffffff;
}}

Kind regards

 

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

Hi, this code doesn’t work.

Please see attahced jpg (screenshot from other divice).

Thanks in advance for a solution.

Best regards

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please try code

@media only screen and (max-width: 736px) {

#jas-header, .header__top {
background-color: #fff !important ;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

thanks but nothing’s changed

[Harry]

Can you take screenshot your setting to change dark mode or send me admin account to check?

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

This reply has been marked as private.

[Harry]

Hi,

I tried on your site and the code work well https://tppr.me/uNBt0

Please check.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

Hi,

this screenshot is not about a “dark” vision on smartphone…the page shouldn’t be white…

Please see the website on smartphone and activating night vision

thanks

[Harry]

Hi,

My phone iphone 11 your site still show white when dark mode for all site, please try code

 

@media (prefers-color-scheme: dark) {

#jas-header, .header__top {
background-color: #fff !important ;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

Still the same 🙁

[Harry]

I opened your site on Android phone but it not show dark mode, how to eable this?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

In browser settings, usually where you can also find chronology, share, fonte size etc

[Harry]

Hi,

I change code to

@media screen and (prefers-color-scheme: dark) {
#jas-header, .header__top {
background-color: #fff !important ;
}}

Please check. I can’t change dark mode on my phone 🙁

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ateacme]

Hi, sorry for late reply.

This code doesn’t work either 🙁

[Author]

Posts