Background Colors

First Published On:

April 24, 2024

Last Updated:

July 21, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Recommended Usage

Customization

Resources that mention this topic

No items found.

info

Get Help from a LiftKit Expert

arrow_forward

Book Quick Chat

Give Us Feedback

Click or tap to reveal form.

expand_more

check_circle

Success! An email has been sent to you with more details.

Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.

error

Error: Something went wrong. Email info@chainlift.io directly for assistance.

Overview

Background color utility classes set both the background-color and color properties on any element. It pairs fills with their corresponding "on" swatches.

For example, applying the utility class .bg-primary will change the background color to var(--primary_lkv) and the font color to var(--onprimary_ lkv).

Here is a code snippet demonstrating the behavior.

.bg__primary {
    background-color: var(--primary_lkv);
    color: var(--onprimary_lkv);  
}

Setting a Background Color

From the Color System

On any element, apply the class .bg__[swatch name]. If I want a div to have a background color of primary, I'd assign it "bg__ primary".

Black, White, and Transparent

Use the same principle: .bg__black, .bg__white, and .bg__transparent will all behave how you'd expect.

Interactivity

Responding to :hover, :active, or other states

You don't modify the background color property directly based on pointer events in LiftKit. Changes can be accomplished by using state layers, where the state layer's background color should be equal to the font color of the element you're putting it in.

Light and Dark Mode

Vanilla and Tailwind

In Liftkit Vanilla and LiftKit for Tailwind (WIP), color modes toggle automatically. A global media query checks for the user's preferred color scheme and, depending on their OS-level preference, applies the values accordingly.

Webflow

In Webflow, you need to choose a default scheme to work with in the designer, because Webflow Variables don't respond to media queries. As a result, the utility classes in Webflow are a bit different.

In LiftKit for Webflow, you must specify either "light" or "dark" in your class names and stick to one of them as your default go-to in the designer.

Instead of .bg__primary, you would apply .bg-light__primary or .bg-dark__primary. A global JS script at the top of the page will ensure your site returns the correct values in the browser based on your user's device preference.

Do's and Don'ts

Overall, you can follow these best practices regardless of what environment you’re working with:

Don’t mix and match light/dark mode swatches
Don’t change the font color automatically chosen by a background color class (unless you really know what you’re doing)
Be careful when customizing font color on top of a specific element.‍
Don’t modify background-color directly for user interactions like :hover and :active.‍
Do control interactivity with a state-layer.‍
Don’t modify the font color for a backgroundColor class. They’re designed to automatically satisfy accessibility requirements.‍
Do modify opacity of text elements, though make sure to check contrast ratios yourself.


/*

Okay, this is a big one. This file is a collection of all the 
background colors that are used in the design system.

Each utility class is named according to the following pattern: bg-{light|dark}__{color}.

The color names are based on variables from the globals.css file. 
Variables are set on the :root element, so they're accessible everywhere.

Each light color variable has a corresponding dark color variable, and vice versa.

Therefore, you should only design for one system or the other. 

The global color-swapping function will automatically swap the color scheme 
based on the user's device preference.

Background Color utility classes also set the optimal text color for child elements,
if there are any.

*/


.bg-light__primary {
  background-color: var(--light__primary_lkv);
  color: var(--light__onprimary_lkv);
}

.bg-light__onprimary {
  background-color: var(--light__onprimary_lkv);
  color: var(--light__primary_lkv);
}

.bg-light__primarycontainer {
  background-color: var(--light__primarycontainer_lkv);
  color: var(--light__onprimarycontainer_lkv);
}

.bg-light__onprimarycontainer {
  background-color: var(--light__onprimarycontainer_lkv);
  color: var(--light__primarycontainer_lkv);
}

.bg-light__secondary {
  background-color: var(--light__secondary_lkv);
  color: var(--light__onsecondary_lkv);
}

.bg-light__onsecondary {
  background-color: var(--light__onsecondary_lkv);
  color: var(--light__secondary_lkv);
}

.bg-light__secondarycontainer {
  background-color: var(--light__secondarycontainer_lkv);
  color: var(--light__onsecondarycontainer_lkv);
}

.bg-light__onsecondarycontainer {
  background-color: var(--light__onsecondarycontainer_lkv);
  color: var(--light__secondarycontainer_lkv);
}

.bg-light__tertiary {
  background-color: var(--light__tertiary_lkv);
  color: var(--light__ontertiary_lkv);
}

.bg-light__ontertiary {
  background-color: var(--light__ontertiary_lkv);
  color: var(--light__tertiary_lkv);
}

.bg-light__tertiarycontainer {
  background-color: var(--light__tertiarycontainer_lkv);
  color: var(--light__ontertiarycontainer_lkv);
}

.bg-light__ontertiarycontainer {
  background-color: var(--light__ontertiarycontainer_lkv);
  color: var(--light__tertiarycontainer_lkv);
}

.bg-light__error {
  background-color: var(--light__error_lkv);
  color: var(--light__onerror_lkv);
}

.bg-light__onerror {
  background-color: var(--light__onerror_lkv);
  color: var(--light__error_lkv);
}

.bg-light__errorcontainer {
  background-color: var(--light__errorcontainer_lkv);
  color: var(--light__onerrorcontainer_lkv);
}

.bg-light__onerrorcontainer {
  background-color: var(--light__onerrorcontainer_lkv);
  color: var(--light__errorcontainer_lkv);
}

.bg-light__background {
  background-color: var(--light__background_lkv);
  color: var(--light__onbackground_lkv);
}

.bg-light__onbackground {
  background-color: var(--light__onbackground_lkv);
  color: var(--light__background_lkv);
}

.bg-light__surface {
  background-color: var(--light__surface_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__onsurface {
  background-color: var(--light__onsurface_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__surfacevariant {
  background-color: var(--light__surfacevariant_lkv);
  color: var(--light__onsurfacevariant_lkv);
}

.bg-light__onsurfacevariant {
  background-color: var(--light__onsurfacevariant_lkv);
  color: var(--light__surfacevariant_lkv);
}

.bg-light__outline {
  background-color: var(--light__outline_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__outlinevariant {
  background-color: var(--light__outlinevariant_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__shadow {
  background-color: var(--light__shadow_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__scrim {
  background-color: var(--light__scrim_lkv);
  color: var(--light__surface_lkv);
}

.bg-light__inversesurface {
  background-color: var(--light__inversesurface_lkv);
  color: var(--light__inverseonsurface_lkv);
}

.bg-light__inverseonsurface {
  background-color: var(--light__inverseonsurface_lkv);
  color: var(--light__inversesurface_lkv);
}

.bg-light__inverseprimary {
  background-color: var(--light__inverseprimary_lkv);
  color: var(--light__onprimarycontainer_lkv);
}

.bg-light__success {
  background-color: var(--light__success_lkv);
  color: var(--light__onsuccess_lkv);
}

.bg-light__successcontainer {
  background-color: var(--light__successcontainer_lkv);
  color: var(--light__onsuccesscontainer_lkv);
}

.bg-light__onsuccess {
  background-color: var(--light__onsuccess_lkv);
  color: var(--light__success_lkv);
}

.bg-light__onsuccesscontainer {
  background-color: var(--light__onsuccesscontainer_lkv);
  color: var(--light__successcontainer_lkv);
}

.bg-light__warning {
  background-color: var(--light__warning_lkv);
  color: var(--light__onwarning_lkv);
}

.bg-light__warningcontainer {
  background-color: var(--light__warningcontainer_lkv);
  color: var(--light__onwarningcontainer_lkv);
}

.bg-light__onwarning {
  background-color: var(--light__onwarning_lkv);
  color: var(--light__warning_lkv);
}

.bg-light__onwarningcontainer {
  background-color: var(--light__onwarningcontainer_lkv);
  color: var(--light__warningcontainer_lkv);
}

.bg-light__info {
  background-color: var(--light__info_lkv);
  color: var(--light__oninfo_lkv);
}

.bg-light__infocontainer {
  background-color: var(--light__infocontainer_lkv);
  color: var(--light__oninfocontainer_lkv);
}

.bg-light__oninfo {
  background-color: var(--light__oninfo_lkv);
  color: var(--light__info_lkv);
}

.bg-light__oninfocontainer {
  background-color: var(--light__oninfocontainer_lkv);
  color: var(--light__infocontainer_lkv);
}

.bg-light__primaryfixed {
  background-color: var(--light__primaryfixed_lkv);
  color: var(--light__onprimaryfixed_lkv);
}

.bg-light__primaryfixeddim {
  background-color: var(--light__primaryfixeddim_lkv);
  color: var(--light__onprimaryfixedvariant_lkv);
}

.bg-light__onprimaryfixed {
  background-color: var(--light__onprimaryfixed_lkv);
  color: var(--light__primaryfixed_lkv);
}

.bg-light__onprimaryfixedvariant {
  background-color: var(--light__onprimaryfixedvariant_lkv);
  color: var(--light__primaryfixed_lkv);
}

.bg-light__secondaryfixed {
  background-color: var(--light__secondaryfixed_lkv);
  color: var(--light__onsecondaryfixed_lkv);
}

.bg-light__secondaryfixeddim {
  background-color: var(--light__secondaryfixeddim_lkv);
  color: var(--light__onsecondaryfixedvariant_lkv);
}

.bg-light__onsecondaryfixed {
  background-color: var(--light__onsecondaryfixed_lkv);
  color: var(--light__secondaryfixed_lkv);
}

.bg-light__onsecondaryfixedvariant {
  background-color: var(--light__onsecondaryfixedvariant_lkv);
  color: var(--light__secondaryfixed_lkv);
}

.bg-light__tertiaryfixed {
  background-color: var(--light__tertiaryfixed_lkv);
  color: var(--light__ontertiaryfixed_lkv);
}

.bg-light__tertiaryfixeddim {
  background-color: var(--light__tertiaryfixeddim_lkv);
  color: var(--light__ontertiaryfixedvariant_lkv);
}

.bg-light__ontertiaryfixed {
  background-color: var(--light__ontertiaryfixed_lkv);
  color: var(--light__tertiaryfixed_lkv);
}

.bg-light__ontertiaryfixedvariant {
  background-color: var(--light__ontertiaryfixedvariant_lkv);
  color: var(--light__tertiaryfixed_lkv);
}

.bg-light__surfacedim {
  background-color: var(--light__surfacedim_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacebright {
  background-color: var(--light__surfacebright_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerlowest {
  background-color: var(--light__surfacecontainerlowest_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerlow {
  background-color: var(--light__surfacecontainerlow_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainer {
  background-color: var(--light__surfacecontainer_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerhigh {
  background-color: var(--light__surfacecontainerhigh_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-light__surfacecontainerhighest {
  background-color: var(--light__surfacecontainerhighest_lkv);
  color: var(--light__onsurface_lkv);
}

.bg-dark__primary {
  background-color: var(--dark__primary_lkv);
  color: var(--dark__onprimary_lkv);
}

.bg-dark__onprimary {
  background-color: var(--dark__onprimary_lkv);
  color: var(--dark__primary_lkv);
}

.bg-dark__primarycontainer {
  background-color: var(--dark__primarycontainer_lkv);
  color: var(--dark__onprimarycontainer_lkv);
}

.bg-dark__onprimarycontainer {
  background-color: var(--dark__onprimarycontainer_lkv);
  color: var(--dark__primarycontainer_lkv);
}

.bg-dark__secondary {
  background-color: var(--dark__secondary_lkv);
  color: var(--dark__onsecondary_lkv);
}

.bg-dark__onsecondary {
  background-color: var(--dark__onsecondary_lkv);
  color: var(--dark__secondary_lkv);
}

.bg-dark__secondarycontainer {
  background-color: var(--dark__secondarycontainer_lkv);
  color: var(--dark__onsecondarycontainer_lkv);
}

.bg-dark__onsecondarycontainer {
  background-color: var(--dark__onsecondarycontainer_lkv);
  color: var(--dark__secondarycontainer_lkv);
}

.bg-dark__tertiary {
  background-color: var(--dark__tertiary_lkv);
  color: var(--dark__ontertiary_lkv);
}

.bg-dark__ontertiary {
  background-color: var(--dark__ontertiary_lkv);
  color: var(--dark__tertiary_lkv);
}

.bg-dark__tertiarycontainer {
  background-color: var(--dark__tertiarycontainer_lkv);
  color: var(--dark__ontertiarycontainer_lkv);
}

.bg-dark__ontertiarycontainer {
  background-color: var(--dark__ontertiarycontainer_lkv);
  color: var(--dark__tertiarycontainer_lkv);
}

.bg-dark__error {
  background-color: var(--dark__error_lkv);
  color: var(--dark__onerror_lkv);
}

.bg-dark__onerror {
  background-color: var(--dark__onerror_lkv);
  color: var(--dark__error_lkv);
}

.bg-dark__errorcontainer {
  background-color: var(--dark__errorcontainer_lkv);
  color: var(--dark__onerrorcontainer_lkv);
}

.bg-dark__onerrorcontainer {
  background-color: var(--dark__onerrorcontainer_lkv);
  color: var(--dark__errorcontainer_lkv);
}

.bg-dark__background {
  background-color: var(--dark__background_lkv);
  color: var(--dark__onbackground_lkv);
}

.bg-dark__onbackground {
  background-color: var(--dark__onbackground_lkv);
  color: var(--dark__background_lkv);
}

.bg-dark__surface {
  background-color: var(--dark__surface_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__onsurface {
  background-color: var(--dark__onsurface_lkv);
  color: var(--dark__surface_lkv);
}

.bg-dark__surfacevariant {
  background-color: var(--dark__surfacevariant_lkv);
  color: var(--dark__onsurfacevariant_lkv);
}

.bg-dark__onsurfacevariant {
  background-color: var(--dark__onsurfacevariant_lkv);
  color: var(--dark__surfacevariant_lkv);
}

.bg-dark__outline {
  background-color: var(--dark__outline_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__outlinevariant {
  background-color: var(--dark__outlinevariant_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__shadow {
  background-color: var(--dark__shadow_lkv);
  color: var(--dark__inversesurface_lkv);
}

.bg-dark__scrim {
  background-color: var(--dark__scrim_lkv);
  color: var(--dark__inversesurface_lkv);
}

.bg-dark__inversesurface {
  background-color: var(--dark__inversesurface_lkv);
  color: var(--dark__inverseonsurface_lkv);
}

.bg-dark__inverseonsurface {
  background-color: var(--dark__inverseonsurface_lkv);
  color: var(--dark__inversesurface_lkv);
}

.bg-dark__inverseprimary {
  background-color: var(--dark__inverseprimary_lkv);
  color: var(--dark__onprimarycontainer_lkv);
}

.bg-dark__success {
  background-color: var(--dark__success_lkv);
  color: var(--dark__onsuccess_lkv);
}

.bg-dark__successcontainer {
  background-color: var(--dark__successcontainer_lkv);
  color: var(--dark__onsuccesscontainer_lkv);
}

.bg-dark__onsuccess {
  background-color: var(--dark__onsuccess_lkv);
  color: var(--dark__success_lkv);
}

.bg-dark__onsuccesscontainer {
  background-color: var(--dark__onsuccesscontainer_lkv);
  color: var(--dark__successcontainer_lkv);
}

.bg-dark__warning {
  background-color: var(--dark__warning_lkv);
  color: var(--dark__onwarning_lkv);
}

.bg-dark__warningcontainer {
  background-color: var(--dark__warningcontainer_lkv);
  color: var(--dark__onwarningcontainer_lkv);
}

.bg-dark__onwarning {
  background-color: var(--dark__onwarning_lkv);
  color: var(--dark__warning_lkv);
}

.bg-dark__onwarningcontainer {
  background-color: var(--dark__onwarningcontainer_lkv);
  color: var(--dark__warningcontainer_lkv);
}

.bg-dark__info {
  background-color: var(--dark__info_lkv);
  color: var(--dark__oninfo_lkv);
}

.bg-dark__infocontainer {
  background-color: var(--dark__infocontainer_lkv);
  color: var(--dark__oninfocontainer_lkv);
}

.bg-dark__oninfo {
  background-color: var(--dark__oninfo_lkv);
  color: var(--dark__info_lkv);
}

.bg-dark__oninfocontainer {
  background-color: var(--dark__oninfocontainer_lkv);
  color: var(--dark__infocontainer_lkv);
}

.util-grid-filler.for-display {
  flex: 1;
  margin-bottom: 1em;
  padding: 1em;
}

.bg-dark__primaryfixed {
  background-color: var(--dark__primaryfixed_lkv);
  color: var(--dark__onprimaryfixed_lkv);
}

.bg-dark__primaryfixeddim {
  background-color: var(--dark__primaryfixeddim_lkv);
  color: var(--dark__onprimaryfixedvariant_lkv);
}

.bg-dark__onprimaryfixed {
  background-color: var(--dark__onprimaryfixed_lkv);
  color: var(--dark__primaryfixed_lkv);
}

.bg-dark__onprimaryfixedvariant {
  background-color: var(--dark__onprimaryfixedvariant_lkv);
  color: var(--dark__primaryfixed_lkv);
}

.bg-dark__secondaryfixed {
  background-color: var(--dark__secondaryfixed_lkv);
  color: var(--dark__onsecondary_lkv);
}

.bg-dark__secondaryfixeddim {
  background-color: var(--dark__secondaryfixeddim_lkv);
  color: var(--dark__onsecondaryfixed_lkv);
}

.bg-dark__onsecondaryfixed {
  background-color: var(--dark__onsecondaryfixed_lkv);
  color: var(--dark__secondaryfixed_lkv);
}

.bg-dark__onsecondaryfixedvariant {
  background-color: var(--dark__onsecondaryfixedvariant_lkv);
  color: var(--dark__secondaryfixed_lkv);
}

.bg-dark__tertiaryfixed {
  background-color: var(--dark__tertiaryfixed_lkv);
  color: var(--dark__ontertiaryfixed_lkv);
}

.bg-dark__tertiaryfixeddim {
  background-color: var(--dark__tertiaryfixeddim_lkv);
  color: var(--dark__ontertiaryfixedvariant_lkv);
}

.bg-dark__ontertiaryfixed {
  background-color: var(--dark__ontertiaryfixed_lkv);
  color: var(--dark__tertiaryfixed_lkv);
}

.bg-dark__ontertiaryfixedvariant {
  background-color: var(--dark__ontertiaryfixedvariant_lkv);
  color: var(--dark__tertiaryfixed_lkv);
}

.bg-dark__surfacedim {
  background-color: var(--dark__surfacedim_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacebright {
  background-color: var(--dark__surfacebright_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainerlowest,
.bg-dark__surfacecontainerlow {
  background-color: var(--dark__surfacecontainerlowest_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainer {
  background-color: var(--dark__surfacecontainer_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainerhigh {
  background-color: var(--dark__surfacecontainerhigh_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg-dark__surfacecontainerhighest {
  background-color: var(--dark__surfacecontainerhighest_lkv);
  color: var(--dark__onsurface_lkv);
}

.bg__transparent {
  background-color: rgba(0, 0, 0, 0);
}

content_copy

code snippets will appear here

Theme Setup

Building a Layout

Arranging Content

Styling Elements

LiftKit Components

Background Colors

Recommended Usage

Customization

Resources that mention this topic

Get Help from a LiftKit Expert

Give Us Feedback

Overview

Setting a Background Color

From the Color System

Black, White, and Transparent

Interactivity

Responding to :hover, :active, or other states

Light and Dark Mode

Vanilla and Tailwind

Webflow

Do's and Don'ts