Change beautifulhugo theme dark mobile view

Using Themes
1

Hi there, my website it white on my desktop, but dark on my mobile. How can I change the mobile view to be the same with my desktop?

Thanks in advance

2

By setting the right CSS values, I guess.

1 Like
3

Your CSS seem to have media query set to change website theme to dark. You need to disable it. Probably the theme you are using has such an option in the config file.

You will have to share your repo so issue can be understood well.

1 Like
4

Thanks for your reply, do you know the name of those values?

5

The theme repo is this one: https://github.com/halogenica/beautifulhugo

6

There are a lot of possibilities. Open the site in your browser and see what its deveoper tools tell you. Or raise the question with the theme author. It’s not on-topic here anyway.

7

Out of curiousity, is your mobile device (system setting) set to use dark mode?

The CSS media query uses prefers-color-scheme…

A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

For example, on Ubuntu the Google Chrome light/dark mode browser setting is irrelevant. The prefers-color-scheme is tied to the OS setting:

Ubuntu system settings:

image

But with Firefox the light/dark mode setting browser is honored, regardless of the the system setting.

So you might test with a different mobile browser as well.

8

I have already check it! Thanks for answer.My main.css has this:

@media (prefers-color-scheme: dark)

and when I change it to

@media (prefers-color-scheme: light)

my website becomes dark :thinking:

Any help?
Thanks in advance.

9

The CSS description of light is a bit vague…

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#syntax

Indicates that user has notified that they prefer an interface that has a light theme, or has not expressed an active preference.

I have no idea what that means.

1 Like
10

I misunderstood what you are doing. Don’t do the above. It doesn’t make any sense. That’s not a preference or config setting.

I stood up a test site:
https://jmooring.github.io/test-beautifulhugo-theme/

And I can toggle dark/light with the system setting on Android:

  • Chrome: the change is immediate
  • Brave: requires browser restart
  • Firefox: requires browser restart

So, not sure what the problem is. Works for me.

1 Like
11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.