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

scss

[data-ccs-colors],
[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

scss

[data-ccs-colors='invert'],
[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.