search

halogenica / beautifulhugo

Theme for the Hugo static website generator
Other
1.13k stars 601 forks source link

Added feature to disable dark mode #500

Open hydr0nium opened 1 month ago

hydr0nium commented 1 month ago

I added an additional css file main-nodark.css that has no darkmode feature inside to disable the automatic change to dark mode on some devices. This can be done through the hugo.toml file:

[Params]
  [...]
  disableDarkmode = true # Disable darkmode features / Force light mode on all devices.
  [...]
henryiii commented 1 month ago

Is there a way to avoid doubling the number of CSS files we have to maintain? Also, what about only dark?

(Also, why not just not put your device in dark mode if you don't want dark mode... Guessing this is because a site might not have dark-ready images?)

hydr0nium commented 1 month ago

@henryiii Yeah the doubling of the CSS files is unfortunate but as far as I know there is no way of templating in the static folder where the CSS files live.

An option to turn the auto darkmode off would be the right decision in my opinion. Another idea would be a button on the site that switches between dark and light mode as there is no easy way in turning of the @media CSS rule for just one site. I like light mode on some sites and dark mode on others and believe everyone should have the choice to choose individually for each site instead of being force by their system settings.

As for the only dark mode options I also found no proper way. It's even harder because the dark mode is baked into the media rules and I am not skilled enough with css to port everything over on my own. Plus I guess it would result in yet another CSS file. If anyone has an idea how we could fix the multiple CSS files issue I am all ears.

Maybe the button that lets users switch is not such a bad idea, but again I am not skilled enough for that, because my expertise is not with CSS