And here comes the dark mode for Pages with the magic of custom CSS.
It was a bit tricky, but overall it’s absolutely doable.
Since it’s not possible to natively add CSS classnames to anything but the components themselves, we can use classnames of the page’s elements that can be found with help of our dear friend called Mr. Chrome Devtools (and yes, you can simply inspect the code in the builder!).
Wrap your dark styles with the following media query and they will apply only if device’s theme is dark:
@media (prefers-color-scheme: dark) {
/* your styles here */
}
Like this topic if you’re tired of waiting for the native dark mode to be brought to Pages!
