A missing.css conundrum

I want to add a dark theme to missing.css out of the box using the prefers-color-scheme media query. This is a pretty straightforward thing to do, but it causes a problem when you add your own styles on top of missing.css (the expected main usage). Consider:

You install missing.css

You override the --accent variable

If the user has dark theme enabled system-wide, two things might happen depending on how we implement things:

The dark theme accent color in missing.css overrides the custom accent

The custom accent is used with missing.css’s dark theme colors, probably ugly and bad contrast

Neither of these are desirable. The only way to prevent this would be to force everyone to specify their custom colors in both light and dark theme – even if they don’t want to support dark theme.

As for solutions:

One option is to require a class to enable automatic theme switching. This will work and not be much trouble, but makes missing.css less valuable as a classless CSS library.

Thoughts?