search

panr / hugo-theme-hello-friend

Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
https://github.com/panr/hugo-theme-hello-friend/
MIT License
1.06k stars 1.22k forks source link

Feature: capability to set OS preferred theme #249

Closed gdmka closed 2 years ago

gdmka commented 2 years ago

Hi @panr, i have noticed that OS-based preferred color scheme is not supported yet. So i implemented a trivial solution that does exactly this.

It follows current flow:

  1. If a visitor clicked the theme toggle before then the user choice is respected.
  2. If it's a new visitor if will comply with prefers-color-scheme feature and set the theme accordingly.

Tested with FF 91, Chrome 92.0.45, Safari 14.1.2 and iOS 14.7.1 Safari. Works as expected.

amjd commented 2 years ago

@panr Have you got a chance to look at these changes? They would make for a good default behaviour for this theme.

panr commented 2 years ago

Hey, I still haven't ;-( I'll check it as soon as I can 🙏

thomasjsn commented 2 years ago

This also probably eliminates the need for:

<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">

In the base layout.

gdmka commented 2 years ago

@panr any resolution? this PR is pretty trivial and is proven to work by some commenters

panr commented 2 years ago

Here's what you wanted: https://github.com/panr/hugo-theme-hello-friend/commit/e99e832d946e4741bdb30f0b9ee5b5b84e0b2423

When it comes to OS Theme I rely on CSS media-queries and use matchMedia() only for toggling themes.