Dark mode overrides for utility classes
We currently generate dark mode util classes, where the resulting value is inverted (i.e .gl-text-white
is #333
in dark mode). This was done to match how the rest of dark mode works as part of my "make it work with minimal dev effort" strategy.
But there are some cases where we want different values for dark mode, and we currently do not have a way to do this with util classes.
Tailwind's approach is to add a dark:
prefix for dark mode, which seems like a good way to go. So when you want an override you'd add the additional prefixed class. i.e. class="gl-text-blue-500 dark:gl-text-blue-700"
Questions:
- is
dark:
an ok prefix? What are some alternatives? - is it ok to keep the inverted palette? It would be confusing for the
dark:
prefixes to have the actual light-mode palette colors? (i.e.class="gl-text-white dark:gl-text-white"
) - it would be a step towards more accurate "utility first", but would require duplicating classes everytime we set colors