Theming

minidev-components uses CSS Custom Properties (variables) to build a complete MD3 theme system.

Theme variables

Color

Primary

#6366f1

Surface

#ffffff

Error

#b3261e

Surface Variant

#e7e0ec

Outline

#79747e

Color palette

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

Full variable list

Color variables

属性	说明	类型	默认值
--m-color-primary	Primary color	color	#6366f1
--m-color-on-primary	Foreground on primary	color	#ffffff
--m-color-surface	Surface color	color	#ffffff
--m-color-on-surface	Foreground on surface	color	#1c1b1f
--m-color-surface-variant	Surface variant	color	#e7e0ec
--m-color-error	Error color	color	#b3261e
--m-color-outline	Outline color	color	#79747e
--m-color-outline-variant	Outline variant	color	#cac4d0

State layer variables

属性	说明	类型	默认值
--m-state-hover	Hover state opacity	number	0.08
--m-state-pressed	Pressed state opacity	number	0.12
--m-state-focused	Focused state opacity	number	0.12

Radius variables

属性	说明	类型	默认值
--m-radius-xs	Extra-small radius	length	4rpx
--m-radius-sm	Small radius	length	8rpx
--m-radius-md	Medium radius	length	12rpx
--m-radius-lg	Large radius	length	16rpx
--m-radius-xl	Extra-large radius	length	28rpx

Spacing variables

属性	说明	类型	默认值
--m-spacing-xs	Extra-small spacing	length	8rpx
--m-spacing-sm	Small spacing	length	16rpx
--m-spacing-md	Medium spacing	length	32rpx
--m-spacing-lg	Large spacing	length	48rpx

Typography variables

属性	说明	类型	默认值
--m-font-size-xs	Extra-small font size	length	20rpx
--m-font-size-sm	Small font size	length	24rpx
--m-font-size-md	Medium font size	length	28rpx
--m-font-size-lg	Large font size	length	32rpx
--m-font-size-xl	Extra-large font size	length	36rpx

Motion variables

属性	说明	类型	默认值
--m-duration-short	Short duration	time	100ms
--m-duration-medium	Medium duration	time	250ms
--m-duration-long	Long duration	time	500ms
--m-easing-standard	Standard easing	timing-function	cubic-bezier(0.2,0,0,1)

Custom theme

Override variables in page or global styles:

/* Green theme */
:root {
  --m-color-primary: #10b981;
  --m-color-on-primary: #ffffff;
}

/* Larger corner radius */
:root {
  --m-radius-md: 20rpx;
  --m-radius-lg: 24rpx;
}