Dark Theme

Some colours of the dark theme are set specifically in a format that allows custom opacity levels. This is to ensure sufficient contrast against the different grey backgrounds used to communicate elevation.

Design Links

Open in Sketch Cloud

Open in Figma

Text Colors

Primary --ds-color-theme-text-primary

Secondary --ds-color-theme-text-secondary

Tertiary --ds-color-theme-text-tertiary

On tinted --ds-color-theme-text-on-tinted

Backgrounds

Darken --ds-color-theme-background-darken

Toast and Tooltips --ds-color-theme-background-toast-tooltips

Highlight --ds-color-theme-background-highlight

Surface --ds-color-theme-background-surface

Modals and Dropdowns --ds-color-theme-background-modals-dropdowns

Borders & Dividers

Primary --ds-color-theme-border-primary

Elevation --ds-color-theme-border-elevation