Skip to content

Your component library ships bundled CSS via CSS-in-JS. You want folks to opt in to being able to toggle between light/dark mode but you don’t know how they are handling toggling between light/dark.

Use CSS var toggle hack?

/* Component library styles */
:root {
  --dark-mode: ;
}

button {
  padding: 1rem;
  background-color: var(--dark-mode, white) black;
  color: var(--dark-mode, black) white;
}

/* User styles turn on dark mode */
.dark {
  --dark-mode: initial;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark-mode: initial;
  }
}

This gives the user the ability to enable dark mode based on how they have their app configured. @⁠media query, class, data-attr, etc.

They can even be very targeted on which components this is enabled for.