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
• secondary theme
• tertiary theme

Besides the branding color palettes, there are system palettes:

• positive theme
• success theme
• warn theme
• danger theme
• default theme

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

Dark scheme with secondary themed primary button on default content theme

CSS classes: scheme-dark

System scheme with secondary themed primary button on default content theme

CSS classes: scheme-system

Examples of combinations

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

CSS classes: scheme-light cui-theme theme-success

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

CSS classes: scheme-dark cui-theme theme-success

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

CSS classes: scheme-system cui-theme theme-success

Light scheme with danger themed primary button on primary themed content

CSS classes: scheme-light cui-theme theme-primary

Dark scheme with danger themed primary button on primary themed content

CSS classes: scheme-dark cui-theme theme-primary

System scheme with danger themed primary button on primary themed content

CSS classes: scheme-system cui-theme theme-primary

Theming the Layout

With Layout component you are already able to set theme and scheme on 3 main parts of your admin application:

1. The whole app, including the side bar with navigation
2. Page content (applied by the PageLayout component)
3. Title bar of the page content (applied by the PageLayout component)

Scheme props

Prop	Type	Description
scheme	Scheme	Sets the scheme of all layout parts
pageScheme	Scheme	Sets the page scheme of the page part of the layout
titleScheme	Scheme	Sets the scheme of the page title

Theme props

You can fine-tune layout using only the props to target specific regions of the layout, also you can target the content of the controls independently. See the table for the list of affected regions by the props.

Prop	Type	Lyout content	Layout controls	Page content	Page controls	Page title content	Page title controls
theme	Intent	✅	✅	✅	✅	✅	✅
themeContent	Intent	✅	❌	✅	❌	✅	❌
themeControls	Intent	❌	✅	❌	✅	❌	✅
pageTheme	Intent	❌	❌	✅	✅	✅	✅
pageThemeContent	Intent	❌	❌	✅	❌	✅	❌
pageThemeControls	Intent	❌	❌	❌	✅	❌	✅
titleTheme	Intent	❌	❌	❌	❌	✅	✅
titleThemeContent	Intent	❌	❌	❌	❌	✅	❌
titleThemeControls	Intent	❌	❌	❌	❌	❌	✅

Layout code example

Loading...

Appendix: Available theme and scheme values

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

Note: Internally, Contember uses the *-above schema variants to make compoents stand out (lighter) and *-below schema variants to push them a litthe to the back (darker). We don't endorse nor discourage you to use these in your layouts.