Quaff

Colors

Use theme roles for your UI. Use fixed palette shades when a color should stay the same in light and dark mode.

Theme roles

primary, secondary and tertiary are accent colors. Use surface and surface-container-* for content, and error, success or warning for status.

Paired classes such as primary-container set a background and its matching on-* text color. Theme roles adapt to light and dark mode. Change the preview below without changing the rest of the site.

Dark preview

RIVERSIDE PARCEL DESK

Your parcel is ready

Locker 12 · Collect by Friday

Ready for pickup Bring your pickup code.

<article class="surface-container-low q-pa-lg">
  <h3 class="title-large text-primary">Your parcel is ready</h3>
  <p class="text-on-surface-variant">Locker 12 · Collect by Friday</p>
  <span class="success-container q-pa-sm">Ready for pickup</span>
</article>

Use surface-container-lowest, -low, surface-container, -high and -highest for different surface levels. They pair with on-surface; use text-on-surface-variant for supporting text. See QTheme to change the theme and Quaff to set the app's display mode.

Color classes

Replace <color> with a theme color or palette name, such as primary, on-surface, blue or blue-3.

primary-container: Paired theme class: background and matching text.
bg-<color>: Background only: bg-primary, bg-blue, bg-blue-3.
text-<color>: Text only: text-on-surface, text-blue, text-blue-10.
border-<color>: Border color: border-outline, border-blue, border-blue-6. Add border for a visible border.

<!-- These use the same color pair. -->
<div class="primary-container q-pa-md">Delivery details</div>
<div class="bg-primary-container text-on-primary-container q-pa-md">
  Delivery details
</div>

<div class="border border-outline q-pa-md">Pickup instructions</div>

Supported theme colors

Accents and status: primary, secondary, tertiary, error, success, warning. Each has on-<name>, <name>-container and on-<name>-container colors.
Surfaces: background, surface, surface-variant and their on-<name> colors; surface-dim and surface-bright.
Containers: surface-container, surface-container-lowest, surface-container-low, surface-container-high, surface-container-highest.
Outlines: outline, outline-variant.
Inverse colors: inverse-surface, inverse-on-surface, inverse-primary.
Other: shadow, scrim, surface-tint.

CSS variables

Theme variables use the role name, such as --primary-container. Palette variables use the --color- prefix, such as --color-teal-6. Some tokens, such as --primary-fixed and --primary-dim, have no helper class; use their CSS variables directly.

.pickup-note {
  background-color: var(--primary-container);
  color: var(--on-primary-container);
  border: 1px solid var(--outline);
}

.route-marker {
  background-color: var(--color-teal-6);
}

Fixed palette

Each palette has ten shades: 1 is the lightest and 10 the darkest. Without a number, bg-teal, text-teal and border-teal use shade 6. For example, text-teal is text-teal-6.

Use bg-teal-2, text-teal-10 or border-teal-6. Palette colors stay fixed when the theme or display mode changes. Choose the text color separately and check its contrast.

<span class="bg-teal-2 text-teal-10 q-pa-sm">
  Riverside route
</span>

red

red-1

red-2

red-3

red-4

red-5

red-6

red-7

red-8

red-9

red-10

pink

pink-1

pink-2

pink-3

pink-4

pink-5

pink-6

pink-7

pink-8

pink-9

pink-10

purple

purple-1

purple-2

purple-3

purple-4

purple-5

purple-6

purple-7

purple-8

purple-9

purple-10

deep-purple

deep-purple-1

deep-purple-2

deep-purple-3

deep-purple-4

deep-purple-5

deep-purple-6

deep-purple-7

deep-purple-8

deep-purple-9

deep-purple-10

indigo

indigo-1

indigo-2

indigo-3

indigo-4

indigo-5

indigo-6

indigo-7

indigo-8

indigo-9

indigo-10

blue

blue-1

blue-2

blue-3

blue-4

blue-5

blue-6

blue-7

blue-8

blue-9

blue-10

light-blue

light-blue-1

light-blue-2

light-blue-3

light-blue-4

light-blue-5

light-blue-6

light-blue-7

light-blue-8

light-blue-9

light-blue-10

cyan

cyan-1

cyan-2

cyan-3

cyan-4

cyan-5

cyan-6

cyan-7

cyan-8

cyan-9

cyan-10

teal

teal-1

teal-2

teal-3

teal-4

teal-5

teal-6

teal-7

teal-8

teal-9

teal-10

green

green-1

green-2

green-3

green-4

green-5

green-6

green-7

green-8

green-9

green-10

light-green

light-green-1

light-green-2

light-green-3

light-green-4

light-green-5

light-green-6

light-green-7

light-green-8

light-green-9

light-green-10

lime

lime-1

lime-2

lime-3

lime-4

lime-5

lime-6

lime-7

lime-8

lime-9

lime-10

yellow

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

yellow-6

yellow-7

yellow-8

yellow-9

yellow-10

amber

amber-1

amber-2

amber-3

amber-4

amber-5

amber-6

amber-7

amber-8

amber-9

amber-10

orange

orange-1

orange-2

orange-3

orange-4

orange-5

orange-6

orange-7

orange-8

orange-9

orange-10

deep-orange

deep-orange-1

deep-orange-2

deep-orange-3

deep-orange-4

deep-orange-5

deep-orange-6

deep-orange-7

deep-orange-8

deep-orange-9

deep-orange-10

brown

brown-1

brown-2

brown-3

brown-4

brown-5

brown-6

brown-7

brown-8

brown-9

brown-10

blue-grey

blue-grey-1

blue-grey-2

blue-grey-3

blue-grey-4

blue-grey-5

blue-grey-6

blue-grey-7

blue-grey-8

blue-grey-9

blue-grey-10

grey

grey-1

grey-2

grey-3

grey-4

grey-5

grey-6

grey-7

grey-8

grey-9

grey-10

Building class names at runtime? If you enable CSS stripping, add them to your CSS safelist.