Custom CSS has no effect once a visitor toggles dark mode

What you are seeing

You have added custom CSS to your site, but it has no effect once a visitor toggles dark mode.

#Why it happens

The site’s built-in colour palette uses more specific selectors than a plain :root rule. If your CSS sets its overrides on a bare :root, the built-in palette wins and your changes never show.

#What to do

Target :root.light and :root.dark in your custom CSS instead of a bare :root. Add a rule for each mode you want to change, so your styles hold whichever mode a visitor picks.

/* Light mode */
:root.light {
  /* your overrides */
}

/* Dark mode */
:root.dark {
  /* your overrides */
}

Custom CSS is set through the API only. There is no field for it in the app.

#Related

Found it? Good.