How can I make the text color adapt to the macOS dark mode scheme?
I have added this to the HTML Head
But the text is still black.
How can I make the text color adapt to the macOS dark mode scheme?
I have added this to the HTML Head
But the text is still black.
By default there's inline styles that are probably overriding the simple color-scheme
directive. So in this case you'll probably need to do a media query that uses an !important
to override like so:
@media (prefers-color-scheme: dark) {
.HYPE_element {
color: white !important;
}
}
@media (prefers-color-scheme: light) {
.HYPE_element {
color: black !important;
}
}
I'm using the .HYPE_element
which is a class Hype puts on all elements (perhaps duh on that explanation!), but this is a bit of inside baseball to how Hype works. It would probably be better for you to assign classes via the Identity Inspector and use those instead.
That is not much to go on in understanding you setup and needs.
apple-system-body may not work on all browsers and is not what controls the color.
I would suggest you use the prefers-color-scheme:
The below .HYPE_element{} is a a blunt way of making sure ALL text in the hype doc conforms. But you can directly target using normal class selectors of individual elements.
<meta name="color-scheme" content="dark light">
<style>
@media (prefers-color-scheme: dark) {
.HYPE_scene {
background-color: darkslategray!important;
}
.HYPE_element{
font: -apple-system-body!important;
}
}
</style>
When did you guys get here? I was just about to write a reply. HA HA!
Here's a link to the Hype template, which might help too…
Lol,
We all where working on it I guess but as you know @jonathan is omniscient and has lighting fingers.