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;

<!-- 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,wght@8..144,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,GRAD@20..48,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>

Prevent layout shifts

You can prevent page load layout shifting by adding visibility: hidden to the app

<!DOCTYPE html>
<html lang="en">
<head>
  ...

  <!--
    Add visibility: hidden to body.
    This will automatically be removed when app is ready
  -->
  <style>
    body {
      visibility: hidden;
    }
  </style>


  <script defer type="module" src="/app.js"></script>
  ...
</head>

<body>
  <mc-navigation-drawer>...</mc-navigation-drawer>
  <mc-pane-container>
    <mc-pane id="page-content"></mc-pane>
  </mc-pane-container>
</body>
</html>