For the full class list, see Classes. For the reasoning behind any of it, see Color modes.

Troubleshooting

Symptom	Cause
Background isn't showing	Missing display class. Add d-block or d-inline-block.
Nesting a palette changed nothing	Same palette twice is a no-op. Step the surface instead: surface-tinted → surface-dyed.
inverted stopped part-way down	Setting palette on a child resets direction. Repeat inverted on the child.
A button is the wrong color	Don't color the button. Color its container.
Focus ring didn't change	Correct. Focus rings, text selection and error states never follow the palette.

Quick reference

Want to	Do this
Color anything	Wrap it in <color-mode palette="…">
Make it visible	Add d-block or d-inline-block
Add contrast	Add inverted
Go a shade stronger	surface-tinted → surface-dyed
Color a button	Nothing — color its container
Support dark mode	Nothing — set data-color-scheme at root