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;
<!-- Loading fronts and icons --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,[email protected],300;8..144,400;8..144,500&display=swap" rel="stylesheet"> <!-- Load material icons via google fonts. All component required icons are packaged with materially. --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" media="print" onload="this.media='all'" />
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); }
<!-- Override at component level Check out overrides on component pages --> <mc-navigation-drawer style="--mc-navigation-drawer-container-color: var(--mc-surface-container-low)" ></mc-navigation-drawer>