Remove dark theme customisation?

[hadley]

I was surprised by the default display of the site:

But I think this is because you have:

/* dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: darkslategray;
    filter: invert(1);
  }
  img { filter: invert(1); }
  .article-list { box-shadow: 0 0 8px #333; }
}

I think the site is much more aesthetically pleasing if you don't invert all the colours.

[yihui]

The README says this is work-in-progress. I'm not ready for feedback yet. The colors are kind of arbitrarily chosen. Thanks!

[apreshill]

Hi @yihui,

I'm playing with this today, and finding it really tricky to use/customize with the this inversion (even if the colors were changed). I think you could disable altogether (I did this on my personal site), as doing any kind of browser accessibility checks may be an endless vortex very time-consuming, as you'd have to ensure that both light and dark schemes meet minimum accessibility requirements.

If you want to keep, I do like having actual control over this setting within the browser window itself, as the academic theme does with the button in the top navbar:

https://academic-demo.netlify.app/

Without icons like feather or fontawesome (which I think eventually we'll need to make the theme more usable for people and teams, because folks need to link out to all the various things like GitHub, Twitter, Instagram, ImpactStory, ORCID, Patreon, Twitch, etc.), I can imagine you could do a CSS version of this kind of thing:

But I don't believe I've stumbled upon a site that uses this CSS trick, so it makes it surprisingly hard to work with. Also, as I am imagining teaching, it would be a nightmare to have screenshots, and to have different people sitting next to each other seeing drastically different websites locally, based on a setting they probably don't even realize they have on their own workstation.

At the least, I think we should move that bit of CSS to a partial layout file so you can turn it on/off with a setting in the configuration file. There may be a better way that I'm not familiar with too, but the main idea being that we make it a very clear "knob" in the main config file. I can offer a PR to do this, but wanted to open up the discussion first. But again, I'm not certain this is an actually important feature. As in, I think some users like to be able to switch between light/dark modes (that they can control), but I don't think it is the deciding factor for site authors between one theme vs another for most (vs say, search :))

[yihui]

@apreshill Rest assured that the dark mode will be both improved and configurable eventually. The simple inverse trick was there only as a proof of concept in the four-day old project, and definitely not meant to be delivered in the final product. Sorry I should have clarified that earlier, so you wouldn't need to spend the time trying to convince me. Thank you!

[apreshill]

Ah hooray! Sorry for the pedantic issue then 😉

[apreshill]

Just wanted to share a few themes I found yesterday that do this:

https://themes.gohugo.io/theme/anatole/ (top right)

https://themes.gohugo.io/theme/hugo-coder/ (bottom right)

https://cupper-hugo-theme.netlify.app/ (scroll down)