Styles

Colors

You can generate theme colors using the theme-generator

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>