Scheme Utility Classes

By default, widgets that implement Manifold CSS variables derive a "light" or "dark" mode according to the user's colour scheme preferences. Two additional utility classes are provided to easily enforce and switch between "light" and "dark" schemes.

The .manifold-scheme-light and .manifold-scheme-dark utility classes allow developers to quickly and easily change their widget's styling depending on the specific color scheme they are using. These classes work in conjunction with the Manifold CSS variables to provide a way to switch between different themes without having to manually adjust each element's styling. When assigned to the :root selector, these classes will override the default color scheme of the page and apply the appropriate colors based on the chosen color scheme. This enables easy manipulation of colors and other styling elements, while also ensuring that the page looks consistent regardless of the end-user's colour scheme preference.

.manifold-scheme-light and .manifold-scheme-dark may also be applied directly to the HTML element with the data-widget attribute. In such a case, the widget will take on the specified colour scheme without the rest of the page being affected. It is suggested to place these utility classes on the root html tag when using layout widgets (Marketplace, Campaign).

Light Scheme Defaults

.manifold-scheme-light {
  --manifold-theme--color--primary: hsl(0deg, 0%, 0%);
  --manifold-theme--color--secondary: hsl(0deg, 0%, 95%);
  --manifold-theme--color--success: hsl(120deg, 57%, 53%);
  --manifold-theme--color--error: hsl(0deg, 57%, 53%);
  --manifold-theme--color--warning: hsl(33deg, 65%, 51%);
  --manifold-theme--color--info: hsl(234deg, 82%, 71%);
  --manifold-text--color--primary: hsl(0deg, 0%, 100%);
  --manifold-text--color--secondary: hsl(0deg, 0%, 30%);
  --manifold-text--color--muted: hsla(0deg, 0%, 0%, 0.66);
  --manifold-text--color--disabled: hsla(0deg, 0%, 0%, 0.55);
  --manifold-text--color--body: hsla(0deg, 0%, 0%, 0.87);
  --manifold-border--color: hsl(0deg, 0%, 90%);
  --manifold-page--color--background: hsl(0deg, 0%, 100%);
  --manifold-element--color--background: hsl(0deg, 0%, 100%);
}

Dark Scheme Defaults

.manifold-scheme-dark {
  --manifold-theme--color--primary: hsl(0deg, 0%, 100%);
  --manifold-theme--color--secondary: hsl(0deg, 0%, 10%);
  --manifold-theme--color--success: hsl(120deg, 50%, 32%);
  --manifold-theme--color--error: hsl(0deg, 50%, 32%);
  --manifold-theme--color--warning: hsl(33deg, 52%, 41%);
  --manifold-theme--color--info: hsl(234deg, 36%, 54%);
  --manifold-text--color--primary: hsl(0deg, 0%, 0%);
  --manifold-text--color--secondary: hsl(0deg, 0%, 79%);
  --manifold-text--color--muted: hsla(0deg, 0%, 100%, 0.6);
  --manifold-text--color--disabled: hsla(0deg, 0%, 100%, 0.48);
  --manifold-text--color--body: hsla(0deg, 0%, 100%, 0.87);
  --manifold-border--color: hsl(0deg, 0%, 42%);
  --manifold-page--color--background: hsl(0deg, 0%, 7%);
  --manifold-element--color--background: hsl(0deg, 0%, 20%);
}

Additional Readings

• MDN's section about CSS variable inheritance