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.