菜单
Learn how to seamlessly integrate Material Design 3's styling into your Material Design 2 components using CSS variable overrides.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/rodydavis/skills --skill material-3-to-material-2-theme-adapter命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | material-3-to-material-2-theme-adapter |
| description | Learn how to seamlessly integrate Material Design 3's styling into your Material Design 2 components using CSS variable overrides. |
| metadata | {"url":"https://rodydavis.com/posts/snippets/m3-to-m2-css-adapter","last_modified":"Tue, 03 Feb 2026 20:04:28 GMT"} |
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);
}