Cascading Colors 0.1.0-beta.16

Fallback Colors & Modes

fallback values, in case variables are not supported. Since variables have better support than prefers-color-scheme, there is no need for a media-query in the fallback modes.

light modes

[data-ccs-colors='light'] {
  background-color: config.$fallback-light;
  color: config.$fallback-dark;

The default is a “light” background theme, which can also be called explicitly.

dark modes

[data-ccs-colors='dark'] {
  background-color: config.$fallback-dark;
  color: config.$fallback-light;

“Dark” background and “invert” modes reverse the default colors. Since dynamic inversion would increase specificity, the fallback for “invert” has to be static.