Make Text adapt to the macOS color-scheme

How can I make the text color adapt to the macOS dark mode scheme?
I have added this to the HTML Head

:root { color-scheme: light dark; font: -apple-system-body; }

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.

2 Likes

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>
2 Likes

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…

3 Likes

Lol,
We all where working on it I guess but as you know @jonathan is omniscient and has lighting fingers. :grin:

2 Likes