Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Default theme is light even though it should be dark #201

Closed
hseagle2015 opened this issue Jun 14, 2020 · 6 comments
Closed

Default theme is light even though it should be dark #201

hseagle2015 opened this issue Jun 14, 2020 · 6 comments
Labels
enhancement New feature or request

Comments

@hseagle2015
Copy link

Hello,

I'm experiencing a weird problem where default theme is always light, even though I've configured dark in config.toml

enableDarkMode = true
defaultTheme = "dark"

hideThemeToggle = false
hideThemeToggleInHome = false

With this configuration, the site renders the light theme by default. If I toggle to dark theme, my browser gets the theme=dark key in the local storage and afterwards displays the site correctly with dark theme.

I'm using Hugo v0.72.0 and MemE theme v4.4.0.
@reuixiy reuixiy added the bug Something isn't working label Jun 14, 2020
@hseagle2015
Copy link
Author

FWIW, until this bug is confirmed and resolved, I managed to fix the problem with a workaround solution.

I added few lines of JavaScript to assets/js/custom.js that basically check if the user selected specific theme style. If the user didn't choose prefered style, transition to dark theme kicks in.

if (localStorage.getItem('theme') === null) {
  localStorage.setItem('theme', 'dark');
  changeModeMeta('dark');
}

@reuixiy
Copy link
Owner

reuixiy commented Jun 18, 2020

Currently, default theme in dark.scss can be overridden by prefers-color-scheme media query in light.scss, which caused this issue. And in my Linux laptop, which has no appearance option in system preferences, Chrome has this issue but Firefox works well.

Anyhow, I think this is a conflict between user prefers and site owner prefers. And I'm not sure if this is a bug, since MemE's principle is user prefers first.

But I think maybe we can do something for this, since dark theme is more special than "old" light theme. Perhaps we can restore the data-theme attribute in <html>?

- <html lang="{{ .Site.LanguageCode }}">
+ <html lang="{{ .Site.LanguageCode }}"{{ if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") }} data-theme="dark"{{ end }}>

Or add a param in config.toml for site owner to control if MemE should override system preferences?

/cc @palant

@reuixiy
Copy link
Owner

reuixiy commented Jun 18, 2020

Also, with Chrome emulating prefers-color-scheme DevTools, I found MemE doesn't react on dark mode changes anymore, compared with this demo by web.dev.

/cc @palant

@palant
Copy link
Collaborator

palant commented Jun 18, 2020

Yes, the defaultTheme setting is close to irrelevant now - it's the user's preference that matters, and almost all browsers can communicate this one now. I'd say that this is by design and the setting's description needs to be adapted if anything. Allowing web masters to override user's preferences makes little sense.

Also, with Chrome emulating prefers-color-scheme DevTools, I found MemE doesn't react on dark mode changes anymore, compared with this demo by web.dev.

It does, for me. You have to clear localStorage on the site however - if the user chose a theme explicitly, it overrides prefers-color-scheme of course.

The only issue I see is the browsers not always determining correctly what the user wants, so prefers-color-scheme results are inconsistent. On my system (Kubuntu) Firefox correctly determines that my system is set to dark mode, but it won't care about its own theme. Chromium on the other hand uses light mode no matter how the system or the browser itself are configured.

@palant
Copy link
Collaborator

palant commented Jun 18, 2020 •
edited
Loading

Actually, looking a bit further the spec does not really specify how browsers are supposed to know whether the user wants a dark theme. However, MDN clearly says "if the user has requested the system use a light or dark color theme" - so only the system theme is relevant, not the browser theme.

Also, in Firefox one can set ui.systemUsesDarkTheme preference to 2. This means "no preference" and will override the system-wide setting. In this case MemE will fall back to the default theme set by the webmaster (yes, I tested this).

So I guess it's all expected behavior, merely Chrome support for prefers-color-scheme still being incomplete.

@reuixiy reuixiy added enhancement New feature or request and removed bug Something isn't working labels Jun 24, 2020
@reuixiy
Copy link
Owner

reuixiy commented Jun 24, 2020 •
edited
Loading

Oh, that‘s why! It's a Chorme bug. 😬

But still, I think adding an option for MemE users to choose whether to override system's preferences is a harmless attempt. :)

ulmefors pushed a commit to ulmefors/hugo-theme-meme that referenced this issue Nov 22, 2020
@reuixiy @ulmefors
feat: support override system preferences for dark mode
f5ac97f 
Fixed reuixiy#201
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@palant @hseagle2015 @reuixiy