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 について

Material 3 のカラー トークンを使って Material 2 コンポーネントをスタイル設定する CSS のテーマアダプター例です。変数を対応付け、Material 3 の値を Material 2 のテーマプロパティに適用します。

主な機能

  1. 01Material 3 トークンを Material 2 変数に対応付け

活用シーン

  1. 01Material 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 へのテーマアダプター

概要 

CSS で Material 3 を使用して 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 対応