Support for dark mode

[daenney]

• Make all color usage into variables
• Override color variables with values suitable for a light text on dark background situation

Colors are up for debate, I took the ones from https://github.com/kaisugi/HugoTeX as a starting point.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
latex-css	❌ Failed (Inspect)		Oct 9, 2022 at 3:18PM (UTC)

[daenney]

In the preview, the code blocks don't get the right background because prism.css overrides them. That's somewhat unfortunate but unavoidable when Prism is in use. Prism needs to get updated to have dark mode support on the themes for which there is a light/dark variant.

[vincentdoerig]

Hey there, thank you very much for this PR. It looks very good. Here are a few points to consider:

• currently, light mode is default so if we were to change it to be dark mode on devices that have prefers-color-scheme: dark it would lead to undesirable behaviour (maybe people have slightly overwritten the styles and they are not compatible with darkmode etc.) or just straight up do not want dark mode to be on by default
• my suggestion would be to have a dark-auto class that sets all the variables to dark mode if prefers-color-scheme: dark and a dark class that sets the variable to dark mode no matter the system color scheme. (the class names could also be something different, this is just what I came up on the spot)
• re: prism styles no working in dark mode. The styles for syntax highlighting are located in the prism/prism.css file. Here we could also use CSS variables to set the colours based on default, dark-auto and dark classes.
• re: colours. I think it looks quite good. The only colour that bothers me is the one applied to the a elements. Here I would suggest something a bit less aggressive, maybe a light blue like hsl(196 80% 77%) (#95daf3) ?

What do you think?

[daenney]

Thanks for the feedback!

currently, light mode is default so if we were to change it to be dark mode on devices that have prefers-color-scheme: dark it would lead to undesirable behaviour (maybe people have slightly overwritten the styles and they are not compatible with darkmode etc.) or just straight up do not want dark mode to be on by default

my suggestion would be to have a dark-auto class that sets all the variables to dark mode if prefers-color-scheme: dark and a dark class that sets the variable to dark mode no matter the system color scheme. (the class names could also be something different, this is just what I came up on the spot)

I think that's pretty feasible, but the consequence of it is that users will have to write a bit of js if they want folks to be able to toggle it by hand.

We'd end up with something like this in that case:

:root {
 --body-color: hsl(0, 5%, 10%);
 --body-bg-color: hsl(210, 20%, 98%);
...
}

[data-dark-mode] {
   --body-color: hsl(0, 0%, 86%);
   --body-bg-color: hsl(0, 0%, 16%);
...
}

@media (prefers-color-scheme: dark) {
  :root {
   --body-color: hsl(0, 0%, 86%);
   --body-bg-color: hsl(0, 0%, 16%);
...
  }
}

But then you'd also need:

<button id="dark-mode-toggle">Toggle dark mode</button>

And roughly:

document
  .querySelector("#dark-mode-toggle")
  .addEventListener("click", function () {
    document.querySelector("html").toggleAttribute("data-dark-mode");
  });

You could also extend the js to store/retrieve this preference in local storage.

I think this works since by default it still follows the OS preference (which is likely what people want), but there's still the toggle. If you have js turned off, then the theme will always follow the OS preference and there isn't a way to control that at that point.

re: prism styles no working in dark mode. The styles for syntax highlighting are located in the prism/prism.css file. Here we could also use CSS variables to set the colours based on default, dark-auto and dark classes.

Yup, I think we can apply the same trick there without issue

re: colours. I think it looks quite good. The only colour that bothers me is the one applied to the a elements. Here I would suggest something a bit less aggressive, maybe a light blue like hsl(196 80% 77%) (#95daf3) ?

Agreed, it's a little intense right now, I'll switch that one.

[daenney]

Alright, I think that's it.

• I've added a way to toggle dark mode and documented how folks can use it.
• I've added dark mode to the syntax highlighting, by essentially taking the existing colors and going for a 20% lighter version of them on a dark background

[daenney]

One other thing I noticed. For proofs, there's an ::after that uses the black medium small square emoji: https://github.com/vincentdoerig/latex-css/blob/2a1d4d97574671858e952731f54d2bbd8ac4603d/style.css#L352-L353

This is barely legible in dark mode, but switching it to the white medium square feels out of place because we don't use a pure white for the text color (it's a bit too intense for contrast). I'm not sure what to do about that one.

[vincentdoerig]

Hey, thanks for the changes! I just made a commit to your branch with some improvements on the implementation and documentation of the dark mode feature. Here the reasoning for the changes:

• Dark mode based on classes, with three options
  • light mode (default, no changes needed)
  • auto dark mode (based on prefers-color-scheme; latex-dark-auto class on body)
  • dark mode (latex-dark class on body)
• Removed the mention of dark mode from the lead and moved it to the getting started section
• Moved the dark mode section up, since it is a pretty important feature imo.
• Added a dark mode toggle button for demo
• Added a CSS filter to the proof symbol so that it shows up as dark grey instead of white
• Built the project to generate the minified css file

What do you think?

[daenney]

Works for me! The deployment/Vercel thing seems angry though