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

setting defaultTheme has no effect #34

Closed
mikefarmer01 opened this issue Sep 2, 2022 · 3 comments
Closed

setting defaultTheme has no effect #34

mikefarmer01 opened this issue Sep 2, 2022 · 3 comments

Comments

@mikefarmer01
Copy link
Contributor

Setting params.defaultTheme in ./config/_default/config.toml has no effect.
No matter whether set to "dark" or "light", the theme is always dark.

On the other hand, setting params.themeColor and params.themeContrast have the desired effects.
@schnerring
Copy link
Owner

schnerring commented Sep 2, 2022 •
edited
Loading

Theme selection is a bit convoluted, I probably should add some explanations somewhere.

When the site initially loads, it will set theme attribute of the html properly:

hugo-theme-gruvbox/layouts/_default/baseof.html

Lines 2 to 5 in dbf1af4

<html
lang="{{ .Site.Language.Lang | default "en" }}"
theme="{{ .Param "defaultTheme" | default "light" }}"
>

Inside dark-mode.js this behavior is overriden by the following logic:

hugo-theme-gruvbox/assets/js/dark-mode.js

Lines 1 to 31 in dbf1af4

function getTheme() {
if (localStorage && localStorage.getItem("theme")) {
// User preference
return localStorage.getItem("theme");
}
if (window.matchMedia) {
// OS preference
return window.matchMedia("(prefers-color-scheme: light)").matches
? "light"
: "dark";
}
// Undefined
}
function setTheme(theme) {
// Main theme
document.documentElement.setAttribute("theme", theme);
// Prism theme
const prismDark = document.getElementById("prism-dark");
const prismLight = document.getElementById("prism-light");
prismDark.toggleAttribute("disabled", theme === "light");
prismLight.toggleAttribute("disabled", theme === "dark");
// Store user preference
localStorage.setItem("theme", theme);
}
// Initial load
const theme = getTheme();
if (theme) setTheme(theme);

  1. Check whether a preferred theme is stored inside local storage. This will always have a value after the page loaded for the first time (Initial Load). So if you debugged the page and set defaultTheme after, you'll have to delete cookies/site data.
  2. Also, if the browser supports it, the OS theme-preference is checked which overrides defaultTheme. If you want to test this, disable JavaScript.
  3. If neither (1) and (2) (Undefined) are true, the defaultTheme will be displayed.

@mikefarmer01
Copy link
Contributor Author

Understood.
So in my case, it's because the brower's default theme.

Thanks for the detailed explanation.
Where should it be documented?

@schnerring
Copy link
Owner

The README or the code/config file.

mikefarmer01 referenced this issue Dec 30, 2022
@mikefarmer01
Update config.toml
aebf337 
Add/link explanation regarding theme setting convolution
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@schnerring @mikefarmer01