Theming overview

With Contember you can change theme and scheme independently. Contember combine theme for content and controls with light and dark scheme resulting in many flexible combinations. By default, the content is themed with default theme and controls in primary theme.

• A theme sets the overall color look of the container and its descendants
• A scheme sets the dark or light look of the container and its descendants

Color themes

Contember supports 3 color palettes (themes) to suit your branding needs:

• primary theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250
• secondary theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250
• tertiary theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250

Besides the branding color palettes, there are system palettes:

• accent theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250
• positive theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250
• success theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250
• warn theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250
• danger theme

  10009759509259008758508258007757507257006756506256005755505255004754504254003753503253002752502252001751501251007550250

To generate class names responsible for changing color theme use toThemeClass(contentTheme, controlsTheme) helper.

Color schemes

Contember support 3 main schemes:

• system – adapts to the user's OS mode
• light – container and it's descendants will be always displayed in the light mode
• dark – container and it's descendants will be always displayed in the dark mode

Light scheme with default theming

CSS classes: scheme-light

Dark scheme with default theming

CSS classes: scheme-dark

System scheme with default theming

CSS classes: scheme-system

To generate class names responsible for changin color theme use toSchemeClass(contentTheme, controlsTheme) helper.

Secondary themed controls

Light scheme with secondary themed primary button on default content theme

CSS classes: scheme-light theme-secondary-controls

Dark scheme with secondary themed primary button on default content theme

CSS classes: scheme-dark theme-secondary-controls

System scheme with secondary themed primary button on default content theme

CSS classes: scheme-system theme-secondary-controls

Examples of combinations

Light scheme with success theme for content and positive for primary button and content

CSS classes: scheme-light theme-success-content theme-positive-controls

Dark scheme with success theme for content and positive for primary button and content

CSS classes: scheme-dark theme-success-content theme-positive-controls

System scheme with success theme for content and positive for primary button and content

CSS classes: scheme-system theme-success-content theme-positive-controls

Light scheme with danger themed primary button on primary themed content

CSS classes: scheme-light theme-primary-content theme-danger-controls

Dark scheme with danger themed primary button on primary themed content

CSS classes: scheme-dark theme-primary-content theme-danger-controls

System scheme with danger themed primary button on primary themed content

CSS classes: scheme-system theme-primary-content theme-danger-controls

Theming interface

In Contember you need to use ColorSchemeProvider to set the color schema for its children. The ColorSchemeProvider accepts scheme prop which can be either light, dark or system.

Content and controls theme can be set using contentThemeClassName and controlsThemeClassName helper functions. These functions accept theme argument which can be either primary, secondary, tertiary, success, warn or danger.

import { Box, Button, Intent, Scheme, } from "@contember/admin"
import { ColorSchemeProvider } from "@contember/react-utils"
import { colorSchemeClassName, contentThemeClassName, controlsThemeClassName, listClassName } from '@contember/utilities'

export const Example = ({
  scheme,
  themeContent,
  themeControls,
}: {
  scheme: Scheme,
  themeContent?: Intent,
  themeControls?: Intent,
}) => {
  const colorScheme = colorSchemeClassName(scheme)
  const contentTheme = contentThemeClassName(themeContent ?? theme)
  const controlsTheme = controlsThemeClassName(themeControls ?? theme)

  return (
    <ColorSchemeProvider scheme={scheme}>
      <Box className={listClassName([colorScheme, contentTheme, controlsTheme])}>
        <Button intent={themeControls}>Button with intent</Button>
        <Button distinction="inverse">Inverse button</Button>
        <Button distinction="primary" intent={themeControls}>I am important!</Button>
        <Button distinction="toned">Toned button</Button>
        <Button disabled>Disabled</Button>
      </Box>
    </ColorSchemeProvider>
  )
}

Appendix: Available theme and scheme values

Type	Values
Scheme	"system", "light" or "dark"
Intent	"accent", "primary", "secondary", "tertiary", "positive", "success", "warn" or "danger"