Colors
You can generate theme colors using the theme-generator
Materailly CSS variables import generateTheme from '@thewebformula/materially/theme-generator'; generateTheme({ coreColors: { // primary is the only required color primary: '#6750A4', // By default these generate from the primary // You can override them here secondary: '#625B71', tertiary: '#7D5260', neutral: '#67616f', neutralVariant: '#605666', error: '#B3261E' }, // Specify custom colors customColors: [ { name: 'name', color: '#5b7166' } ] }, './color-tokens.css');
/* Import the generated color tokens to your app */ @import url(./color-tokens.css); /* Custom color variables */ color: var(--mc-custom-color-name-color); color: var(--mc-custom-color-name-on-color); color: var(--mc-custom-color-name-color-container); color: var(--mc-custom-color-name-on-color-container);
Fonts and icons
There are two fonts you can set brand and plain . If these are not set then fonts will inherit from root
/* Set font families. Default to inherit */ --mc-font-brand: Noto; --mc-font-plain: roboto;
<link href=https://fonts.googleapis.com rel=preconnect> <link crossorigin href=https://fonts.gstatic.com rel=preconnect> <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,[email protected],300;8..144,400;8..144,500&display=swap" rel=stylesheet> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" onload="this.media='all'" media=print rel=stylesheet>
Customize
You can customize colors, fonts, elevations, and animations, both globally and at the component level
/* Customize base application surfaces These are special properties to make it easier to control all navigation and page backgrounds */ :root { /* Defaults: --mc-surface */ --mc-background-color: var(--mc-surface-container-low); --mc-navigation-container-color: var(--mc-surface-container-low); --mc-surface-container-color: var(--mc-surface-container-lowest); }
<mc-navigation-drawer style="--mc-navigation-drawer-container-color: var(--mc-surface-container-low)"></mc-navigation-drawer>