Closed daenney closed 1 year ago
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) |
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.
Hey there, thank you very much for this PR. It looks very good. Here are a few points to consider:
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 defaultdark-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)dark-auto
and dark
classes.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?
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.
Alright, I think that's it.
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.
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:
prefers-color-scheme
; latex-dark-auto
class on body)latex-dark
class on body)What do you think?
Works for me! The deployment/Vercel thing seems angry though
Colors are up for debate, I took the ones from https://github.com/kaisugi/HugoTeX as a starting point.