Theme builder
Theme builder
Pick a seed color to generate a full MD3 tonal color scheme. It comes from
@material/material-color-utilities, Google's own library for HCT tonal palettes, not color math written by hand. Preview it on a few
components, then copy a CSS override that uses the exact property names of
@lit-material/tokens.
light
Preview text on a card surface.
dark
Preview text on a card surface.
Generated CSS
:root {
--md-sys-color-primary: light-dark(#6750a4, #cfbcff);
--md-sys-color-on-primary: light-dark(#ffffff, #381e72);
--md-sys-color-primary-container: light-dark(#e9ddff, #4f378a);
--md-sys-color-on-primary-container: light-dark(#22005d, #e9ddff);
--md-sys-color-secondary: light-dark(#625b71, #cbc2db);
--md-sys-color-on-secondary: light-dark(#ffffff, #332d41);
--md-sys-color-secondary-container: light-dark(#e8def8, #4a4458);
--md-sys-color-on-secondary-container: light-dark(#1e192b, #e8def8);
--md-sys-color-tertiary: light-dark(#7e5260, #efb8c8);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4a2532);
--md-sys-color-tertiary-container: light-dark(#ffd9e3, #633b48);
--md-sys-color-on-tertiary-container: light-dark(#31101d, #ffd9e3);
--md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
--md-sys-color-on-error: light-dark(#ffffff, #690005);
--md-sys-color-error-container: light-dark(#ffdad6, #93000a);
--md-sys-color-on-error-container: light-dark(#410002, #ffb4ab);
--md-sys-color-background: light-dark(#fffbff, #1c1b1e);
--md-sys-color-on-background: light-dark(#1c1b1e, #e6e1e6);
--md-sys-color-surface: light-dark(#fffbff, #1c1b1e);
--md-sys-color-on-surface: light-dark(#1c1b1e, #e6e1e6);
--md-sys-color-surface-variant: light-dark(#e7e0eb, #49454e);
--md-sys-color-on-surface-variant: light-dark(#49454e, #cac4cf);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e11);
--md-sys-color-surface-container-low: light-dark(#f7f2f7, #1c1b1e);
--md-sys-color-surface-container: light-dark(#f2ecf1, #201f22);
--md-sys-color-surface-container-high: light-dark(#ece7eb, #2b292d);
--md-sys-color-surface-container-highest: light-dark(#e6e1e6, #363438);
--md-sys-color-outline: light-dark(#7a757f, #948f99);
--md-sys-color-outline-variant: light-dark(#cac4cf, #49454e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-inverse-surface: light-dark(#313033, #e6e1e6);
--md-sys-color-inverse-on-surface: light-dark(#f4eff4, #313033);
--md-sys-color-inverse-primary: light-dark(#cfbcff, #6750a4);
}