Auto theme switching based on browser setting

[Tuurlijk]

First off. THANK YOU! for providing dozlle. It's nice for viewing logs in the browser. I also like https://github.com/jesseduffield/lazydocker

There is a media query that can render dozzle in light or dark theme based on the browser / Windowmanager theme.

At least this is the case on Linux, and probably OSX too.

So when the windowmanager theme is set to a dark theme, dozzle will automatically switch to dark too. And vice-versa for a light theme.

This can be detected by the media query prefers-color-scheme. This is how sites like Laravel etc. also do auto switching from light to dark and back.

I would do a pull request, but can't get the container to compile / run. When doing pnpm dev it errors out.

I have a script and cron job that gets the sunrise and sunset times and switches the Windowmanager theme based on the time of day. So I would love all my tools to switch along with that.

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

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

[amir20]

Hi @Tuurlijk. This should easily be added. I would suggest change the setting for theme to "auto|dark|light" and it would be auto by default.

What is the error you get?

The css you have isn't really needed. You can just add the media query to https://github.com/amir20/dozzle/blob/master/assets/styles.scss#L67

I won't have time to work on this but you can send PRs.

[Tuurlijk]

Yes, the css was just example filler. The media query should be enough.

[Tuurlijk]

Ok, got it to work. Needed to do a pnpm install before the pnpm dev