Custom Theming

md3-react provides powerful theming capabilities through CSS variables and dynamic color generation.

CSS Variables

All design tokens are exposed as CSS variables. You can override them to customize the theme:

:root {
  --md3-color-primary: #006a6a;
  --md3-color-on-primary: #ffffff;
  --md3-color-primary-container: #6ff7f6;
  --md3-color-on-primary-container: #002020;
}

Dynamic Color Generation

Generate a complete color scheme from a single source color using @material/material-color-utilities:

import { generateColorScheme } from '@md3-react/theme';

// Generate light and dark color schemes from a source color
const { light, dark } = generateColorScheme({
  sourceColor: '#006A6A', // Your brand color
});

console.log(light.primary); // Generated primary color
console.log(dark.primary); // Dark mode primary color

Using Custom Colors

import { generateColorScheme } from '@md3-react/theme';

const customScheme = generateColorScheme({
  sourceColor: '#FF5722', // Orange brand color
  customColors: [
    {
      name: 'success',
      value: '#4CAF50',
      blend: true, // Harmonize with source color
    },
  ],
});

Creating a Custom Theme

You can create a custom Vanilla Extract theme:

// theme.css.ts
import { createTheme } from '@vanilla-extract/css';
import { themeContract } from '@md3-react/theme';

export const customTheme = createTheme(themeContract, {
  color: {
    primary: '#006A6A',
    onPrimary: '#FFFFFF',
    primaryContainer: '#6FF7F6',
    // ... other colors
  },
  // ... other tokens
});

Then apply it:

import { customTheme } from './theme.css';

function App() {
  return <div className={customTheme}>{/* Components will use custom theme */}</div>;
}

Accessing Tokens in Styles

Use the themeContract in your Vanilla Extract styles:

import { style } from '@vanilla-extract/css';
import { themeContract } from '@md3-react/theme';

export const customButton = style({
  backgroundColor: themeContract.color.primary,
  color: themeContract.color.onPrimary,
  borderRadius: themeContract.shape.full,
  transition: `all ${themeContract.motion.duration.short2} ${themeContract.motion.easing.standard}`,
});

Token Reference

The theme contract provides access to all design tokens:

themeContract.color.primary;
themeContract.color.secondary;
themeContract.typography.bodyMedium.fontSize;
themeContract.shape.medium;
themeContract.elevation.level2;
themeContract.motion.duration.medium1;
themeContract.state.hover;