mcpField
M
material-3-to-material-2-theme-adapter

material-3-to-material-2-theme-adapter

github.com/rodydavis设计与 UI6042 次安装2 周前更新
代码仓库

关于 material-3-to-material-2-theme-adapter

这是一种 CSS 主题适配写法，用 Material 3 颜色令牌为 Material 2 组件设置样式。它通过变量映射，将 Material 3 的值应用到 Material 2 主题属性。

主要功能

  1. 01将 Material 3 令牌映射到 Material 2 变量

适用场景

  1. 01为 Material 2 组件应用 Material 3 颜色

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rodydavis/skills --skill material-3-to-material-2-theme-adapter

安装后在 Claude Code 中输入/material-3-to-material-2-theme-adapter确认已加载。

详细介绍

Material 3 到 Material 2 主题适配器

概述

如何使用 Material 3 在 CSS 中设置 Material 2 组件的样式：

: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);
}

评论

支持 Markdown