Default dark mode

[undergroundwires]

@rhazdon I see that you reverted back theme toggle logic, button and even all styles with data-theme=dark 🥳. So the only thing we're missing is the old simple switch on body for baseof files and a JS fallback.

The dark theme looks awesome, community loves it and keeps asking for it. Instead of hacking with duplicating and tinkering with variable files, can we have defaultTheme back?

343 is closed so bringing this issue up again in a separate discussion.

[nel0x]

To be honest I don't understand this wish. The actual situation IMHO is perfectly fine, where the theme adapts to the operating system settings (-> consistent theming on users computers) and optionally users have the option to nevertheless manually switch the theme through a toggle. Without wanting to start a design/theme discussion at this point, developers should not enforce themes on user/site visitors.

Duplicate to #253 ...

[maop]

To be honest I don't understand this wish.

Each person has their own unique preferences, and all are acceptable.

And i wish the amount of people that have asked for a default dark mode counted and the developer just give people what they want, an "option to optionally toggle default dark mode on"

[undergroundwires]

Duplicate to https://github.com/rhazdon/hugo-theme-hello-friend-ng/issues/253

253 is about forcing the dark theme at all times. This issue is about having option to be able to switch the theme meanwhile defaulting to the dark theme.

developers should not enforce themes on user/site visitors

There's no single truth. There are a lot of major websites enforcing you a single theme but still gives you option to change it, and these websites have professional UX team(s) that come to conclusion that this is the right choice. That's why we customize themes, for different tastes.

This theme is one of the best which made it very popular. It's customizable on many levels and I think it should give its community a choice.

[maop]

Also the users of this theme are us, not our blog's visitors. We should be able chose what we offer to our visitors.

I'd love to say: "here is my blog, i like it dark, but you can switch to light if you want, or just set it to follow your system preferences"

[nel0x]

here is my blog, i like it dark, but you can switch to light if you want

And that's exactly the point. Of course the end-user want's his UI as uniform and polished as possible, and therefore likes integration with the light or dark mode, set by him. If a theme like the hello-friend-ng already has a great, automatic dark- & light-mode, just let the user decide with his system preferences. If you set your system to dark, you usually don't want light-styled interfaces and vice versa ...

But if someone absolutely wants the feature and opens a pull request, I don't mind either, just wanted to express my opinion.

[chvancooten]

+1 on this one. Would also like to default to the dark theme on my blog, whilst preserving the option for users to switch it to light if they so desire. This used to be achievable with the defaultTheme option, but this no longer seems to be the case.

I would propose a solution that makes it so the defaultTheme flag overrides the "system-defined" preferred theme option. In my experience, a lot of users aren't even aware of this integration with the OS, causing many users to see the light theme by default. enableThemeToggle can still be used to enable the user to choose the non-default option, in this case.

[chvancooten]

FWIW, since this issue doesn't seem to get a lot of activity, I implemented a very ugly hotpatch in my Github workflows. It literally nullifies the logic check to make Hugo always think the system prefers dark mode.

- name: Modify theme JS to force dark theme by default
   run: |
     sed -i 's/window.matchMedia("(prefers-color-scheme: dark)").matches/true/' themes/hello-friend-ng/assets/js/main.js

The proper option would be of course to merge https://github.com/rhazdon/hugo-theme-hello-friend-ng/pull/302, but I don't wanna diverge too much from the main branch...

[rayspock]

I've discovered a concise method to accomplish this without making any destructive modifications:

Add the following code snippet to the layouts/partials/extra-head.html file

{{- if .Site.Params.defaultTheme -}}
<script>localStorage.getItem('theme') || localStorage.setItem('theme', '{{ .Site.Params.defaultTheme }}');</script>
{{- end -}}