テーマのカスタマイズ

minidev-components は CSS カスタムプロパティ（CSS 変数）を用いて、完全な MD3 テーマ体系を実装しています。

テーマ変数一覧

色

Primary

#6366f1

Surface

#ffffff

Error

#b3261e

Surface Variant

#e7e0ec

Outline

#79747e

テーマのカラーパレット

:root {
  --m-color-primary: #6366f1;
  --m-color-on-primary: #ffffff;
  --m-color-surface: #ffffff;
  --m-color-on-surface: #1c1b1f;
  --m-color-surface-variant: #e7e0ec;
  --m-color-error: #b3261e;
  --m-color-outline: #79747e;
  --m-color-outline-variant: #cac4d0;
}

変数一覧

色の変数

属性	说明	类型	默认值
--m-color-primary	プライマリ色	color	#6366f1
--m-color-on-primary	プライマリ上の前景色	color	#ffffff
--m-color-surface	サーフェス色	color	#ffffff
--m-color-on-surface	サーフェス上の前景色	color	#1c1b1f
--m-color-surface-variant	サブサーフェス色	color	#e7e0ec
--m-color-error	エラー色	color	#b3261e
--m-color-outline	境界線色	color	#79747e
--m-color-outline-variant	サブ境界線色	color	#cac4d0

状態レイヤー変数

属性	说明	类型	默认值
--m-state-hover	Hover 状態の不透明度	number	0.08
--m-state-pressed	押下状態の不透明度	number	0.12
--m-state-focused	フォーカス時の不透明度	number	0.12

角丸の変数

属性	说明	类型	默认值
--m-radius-xs	極小の角丸	length	4rpx
--m-radius-sm	小さめの角丸	length	8rpx
--m-radius-md	中程度の角丸	length	12rpx
--m-radius-lg	大きめの角丸	length	16rpx
--m-radius-xl	特大の角丸	length	28rpx

余白の変数

属性	说明	类型	默认值
--m-spacing-xs	極小の余白	length	8rpx
--m-spacing-sm	小さめの余白	length	16rpx
--m-spacing-md	中程度の余白	length	32rpx
--m-spacing-lg	大きめの余白	length	48rpx

フォントの変数

属性	说明	类型	默认值
--m-font-size-xs	極小の文字サイズ	length	20rpx
--m-font-size-sm	小さめの文字サイズ	length	24rpx
--m-font-size-md	中程度の文字サイズ	length	28rpx
--m-font-size-lg	大きめの文字サイズ	length	32rpx
--m-font-size-xl	特大の文字サイズ	length	36rpx

アニメーションの変数

属性	说明	类型	默认值
--m-duration-short	短いアニメーション	time	100ms
--m-duration-medium	中程度のアニメーション	time	250ms
--m-duration-long	長いアニメーション	time	500ms
--m-easing-standard	標準イージング	timing-function	cubic-bezier(0.2,0,0,1)

独自テーマ

ページまたは全体のスタイルで変数を上書きします。

/* グリーンテーマ */
:root {
  --m-color-primary: #10b981;
  --m-color-on-primary: #ffffff;
}

/* 角丸を大きく */
:root {
  --m-radius-md: 20rpx;
  --m-radius-lg: 24rpx;
}