Color

The Material Design Color System provides the following color utilities:

bg-utilities
text-utilities
tailwind-theme

For a detailed description of M3 Color, see Definition of M3 Color.

Required

Color Scheme

The color tokens provided by this project provide a set of default values (light mode and dark mode). In order to make the color work properly, this project writes the following styles by default:

/* Method 1: Import preset.css file */
@import "@sandlada/material-design-css/preset.css";

/* Method 2: Insert color-scheme */
:root:not([dark]) {
    color-scheme: light;
}
:root[dark] {
    color-scheme: dark;
}

To enable dark mode, add the dark attribute on the html element:

<html dark>
    <!-- ... -->
</html>

Prebuild Color

We provide a number of pre-configured colors, including:

blue.css
cold-blue.css
cold-purple.css
green.css
light-green.css
monochrome-high-contrast.css
monochrome-low-contrast.css
monochrome.css
orange.css
pink.css
viridian.css
yellow.css

@import "@sandlada/material-design-css/prebuild-color/light-green.css";

Import

For CSS

@import "@sandlada/material-design-css/color/bg-utilities.css";
@import "@sandlada/material-design-css/color/text-utilities.css";

For TailwindCSS v4

@import "tailwindcss";
@import "@sandlada/material-design-css/color/tailwind-theme.css";

Usage

Use bg-*

<div class="flex">
    <div class="box bg-primary"></div>
    <div class="box bg-secondary"></div>
    <div class="box bg-tertiary"></div>
    <div class="box bg-error"></div>
    <div class="box bg-surface-container-lowest"></div>
    <div class="box bg-surface-container-low"></div>
    <div class="box bg-surface-container"></div>
    <div class="box bg-surface-container-high"></div>
    <div class="box bg-surface-container-highest"></div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

Use text-*

primary

secondary

tertiary

error

<div class="flex">
    <div class="box text-primary">primary</div>
    <div class="box text-secondary">secondary</div>
    <div class="box text-tertiary">tertiary</div>
    <div class="box text-error">error</div>
</div>

<style>
    .box {
        height: 96px;
        width: 96px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex {
        display: flex;
        overflow: auto;
    }
</style>

All available colors

primary-palette-key-color
secondary-palette-key-color
tertiary-palette-key-color
neutral-palette-key-color
neutral-variant-palette-key-color
background
on-background
surface
surface-dim
surface-bright
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest
on-surface
surface-variant
on-surface-variant
inverse-surface
inverse-on-surface
outline
outline-variant
shadow
scrim
surface-tint
primary
on-primary
primary-container
on-primary-container
inverse-primary
secondary
on-secondary
secondary-container
on-secondary-container
tertiary
on-tertiary
tertiary-container
on-tertiary-container
error
on-error
error-container
on-error-container
primary-fixed
primary-fixed-dim
on-primary-fixed
on-primary-fixed-variant
secondary-fixed
secondary-fixed-dim
on-secondary-fixed
on-secondary-fixed-variant
tertiary-fixed
tertiary-fixed-dim
on-tertiary-fixed
on-tertiary-fixed-variant