When you need to force the matter
If we make our text a dark color, as you would with a light theme, it can break some areas.
For example, our hero's background image isn't changing, and the text is unreadable if it's dark.
There are a few different approaches that you can take here, but the simplest one is to over-write user preferences with the color-scheme property.
Doing this allows us to lock in a specific color theme when required.
.hero {
color-scheme: dark;
/* other styles */
}