定制主题
组件库基于Material Design (opens in a new tab)实现，具体详情请查看相关文档。
方式一：在 CSS 文件定义变量
⚠️
通过该方式，:root 应该仅包含样式变量，否则将会解析错误，通过
useTheme 无法获取正确样式变量。
global.css
:root {
--wisteria-color-primary: #6750a4;
--wisteria-color-on-primary: #fff;
--wisteria-color-primary-container: #e9ddff;
--wisteria-color-on-primary-container: #22005d;
--wisteria-color-secondary: #625b71;
--wisteria-color-on-secondary: #fff;
--wisteria-color-secondary-container: #e8def8;
--wisteria-color-on-secondary-container: #1e192b;
--wisteria-color-tertiary: #7e5260;
--wisteria-color-on-tertiary: #fff;
--wisteria-color-tertiary-container: #ffd9e3;
--wisteria-color-on-tertiary-container: #31101d;
--wisteria-color-error: #ba1a1a;
--wisteria-color-error-container: #ffdad6;
--wisteria-color-on-error: #fff;
--wisteria-color-on-error-container: #410002;
--wisteria-color-background: #fffbff;
--wisteria-color-on-background: #1c1b1e;
--wisteria-color-surface-dim: #ded8e1;
--wisteria-color-surface: #fffbff;
--wisteria-color-surface-bright: #ded8e1;
--wisteria-color-surface-container-lowest: #fff;
--wisteria-color-surface-container-low: #f7f2fa;
--wisteria-color-surface-container: #f3edf7;
--wisteria-color-surface-container-high: #ece6f0;
--wisteria-color-surface-container-highest: #e6e0e9;
--wisteria-color-on-surface: #1c1b1f;
--wisteria-color-surface-variant: #49454e;
--wisteria-color-on-surface-variant: #49454e;
--wisteria-color-outline: #7a757f;
--wisteria-color-outline-variant: #cac4cf;
--wisteria-color-inverse-surface: #313033;
--wisteria-color-inverse-on-surface: #f4eff4;
--wisteria-color-inverse-primary: #cfbcff;
--wisteria-color-scrim: #000;
--wisteria-color-shadow: #000;
--wisteria-color-scheme: #fff;
--wisteria-color-surface-tint: #6750a4;
}方式二：通过 Provider 配置
App.tsx
<WisteriaProvider
theme={{
colors: {
background: '#fffbff',
error: '#ba1a1a',
errorContainer: '#ffdad6',
inverseOnSurface: '#f4eff4',
inversePrimary: '#cfbcff',
inverseSurface: '#313033',
onBackground: '#1c1b1e',
onError: '#fff',
onErrorContainer: '#410002',
onPrimary: '#fff',
onPrimaryContainer: '#22005d',
onSecondary: '#fff',
onSecondaryContainer: '#1e192b',
onSurface: '#1c1b1f',
onSurfaceVariant: '#49454e',
onTertiary: '#fff',
onTertiaryContainer: '#31101d',
outline: '#7a757f',
outlineVariant: '#cac4cf',
primary: '#6750a4',
primaryContainer: '#e9ddff',
scheme: '#fff',
scrim: '#000',
secondary: '#625b71',
secondaryContainer: '#e8def8',
shadow: '#000',
surface: '#fffbff',
surfaceBright: '#ded8e1',
surfaceContainer: '#f3edf7',
surfaceContainerHigh: '#ece6f0',
surfaceContainerHighest: '#e6e0e9',
surfaceContainerLow: '#f7f2fa',
surfaceContainerLowest: '#fff',
surfaceDim: '#ded8e1',
surfaceTint: '#6750a4',
surfaceVariant: '#49454e',
tertiary: '#7e5260',
tertiaryContainer: '#ffd9e3'
}
}}
/>