Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Styles

Material theme, colors, motion, font
Material Design Guidelines: Styles

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>
        
menu home apps Get started