# Material 3 To Material 2 Theme Adapter

> Learn how to seamlessly integrate Material Design 3's styling into your Material Design 2 components using CSS variable overrides.

- Skill: `rodydavis/material-3-to-material-2-theme-adapter` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rodydavis/material-3-to-material-2-theme-adapter`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rodydavis/material-3-to-material-2-theme-adapter/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rodydavis (https://skillmd.com/u/rodydavis)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rodydavis/material-3-to-material-2-theme-adapter

---


# Material 3 to Material 2 Theme Adapter


## Overview 

How to style Material 2 components with Material 3 in CSS:

```
:root {
  --mdc-theme-primary: var(--md-sys-color-primary);
  --mdc-theme-on-primary: var(--md-sys--coloron-primary);
  --mdc-theme-background: var(--md-sys--colorbackground);
  --mdc-theme-on-background: var(--md-sys--coloron-background);
  --mdc-theme-on-surface-variant: var(--md-sys--coloron-surface-variant);
  --mdc-theme-surface-variant: var(--md-sys--colorsurface-variant);
  --mdc-theme-on-surface: var(--md-sys--coloron-surface);
  --mdc-theme-surface: var(--md-sys--colorsurface);
  --mdc-theme-text-primary-on-background: var(--md-sys--coloron-surface-variant);
  --mdc-theme-outline: var(--md-sys-color-outline);
}
```