materials

Simple CSS with light and dark preference schemes.

Materials is a set of CSS color variables that follow Material Design. It supports the prefers-color-scheme media query for supported browsers (this allows your users to indicate if they prefer a light or dark mode).

It is a single file that can be added to your existing CSS that will set CSS variables that can be used to color your website. There are various configurations:

default-light.css defaults to light

default-dark.css defaults to dark

light.css only has light

dark.css only has dark

Works well with small CSS toolkits like tachyons and tailwind.

variables

CSS variables can be used while styling. For example:

.class {
  color: var(--primary);
}

--background

--surface

--primary

--variant

--secondary

--secondary-variant

--error

on

--on-background

--on-surface

--on-primary

--on-secondary

--on-error

text

--emph-high

--emph-medium

--disabled

elevations

--dp00

--dp01

--dp02

--dp03

--dp04

--dp06

--dp08

--dp12

--dp16

--dp24