Material Theme Provider

A React implementation of Material Design 3 (Material You) theming system. This provider enables dynamic color scheme generation and theme management based on a source color, supporting both light and dark modes. This implementation is using the Material Color Utilities package.

Features

• Dynamic theme generation from a source color
• Support for light and dark modes
• Multiple theme variants (Monochrome, Neutral, Tonal Spot, etc.)
• Custom color definitions
• CSS variable-based theme injection
• Type-safe implementation

Installation

npm install react-material-theme-provider @material/material-color-utilities

Basic Usage

import {MaterialThemeProvider} from 'react-material-theme-provider';

function App() {
    return (
        <MaterialThemeProvider defaultSourceColor="#6D509F" isDark={false}>
            <YourApp/>
        </MaterialThemeProvider>
    );
}

API Reference

MaterialThemeProvider

Props

| Prop | Type | Default | Description | |--------------------|---------------|-----------|------------------------------------| | children | ReactNode | Required | Child components to be wrapped | | defaultSourceColor | string | "#6D509F" | Initial source color in hex format | | isDark | boolean | false | Whether to use dark mode | | customColors | CustomColor[] | [] | Array of custom color definitions |

CustomColor Definition

interface CustomColor {
    name: string;    // Identifier for the custom color
    value: string;   // Hex color value
    blend: boolean;  // Whether to blend with the source color
}

Theme Variants

The system supports multiple theme variants through the Variant enum:

• MONOCHROME: A Dynamic Color theme that is grayscale. Source
• NEUTRAL: A Dynamic Color theme that is near grayscale. Source
• TONAL_SPOT: A Dynamic Color theme with low to medium colorfulness and a Tertiary TonalPalette with a hue related to the source color. Source
• VIBRANT: A Dynamic Color theme that maxes out colorfulness at each position in the Primary Tonal Palette. Source
• EXPRESSIVE: A Dynamic Color theme that is intentionally detached from the source color. Source
• FIDELITY: A scheme that places the source color in Scheme.primaryContainer. Source
• CONTENT: A scheme that places the source color in Scheme.primaryContainer. Source
• RAINBOW: A playful theme - the source color's hue does not appear in the theme. Source
• FRUIT_SALAD: A playful theme - the source color's hue does not appear in the theme. Source

CSS Variables

The theme provider generates and injects CSS variables following the Material Design 3 token system. Here are the key variable categories:

Primary Colors

• --md-sys-color-primary
• --md-sys-color-on-primary
• --md-sys-color-primary-container
• --md-sys-color-on-primary-container

Secondary Colors

• --md-sys-color-secondary
• --md-sys-color-on-secondary
• --md-sys-color-secondary-container
• --md-sys-color-on-secondary-container

Tertiary Colors

• --md-sys-color-tertiary
• --md-sys-color-on-tertiary
• --md-sys-color-tertiary-container
• --md-sys-color-on-tertiary-container

Surface Colors

• --md-sys-color-surface
• --md-sys-color-on-surface
• --md-sys-color-surface-variant
• --md-sys-color-on-surface-variant

Additional Variables

• Error colors
• Background colors
• Outline colors
• Surface container variants
• Fixed variant colors

Hook Usage

import {useMaterialTheme} from './material-theme-provider';

function MyComponent() {
    const {materialTheme, setSourceColor, currentScheme} = useMaterialTheme();

    // Change theme color dynamically
    const handleColorChange = (newColor: string) => {
        setSourceColor(newColor);
    };

    return (
        // Your component implementation
    );
}