101 lines
2.9 KiB
Markdown
101 lines
2.9 KiB
Markdown
# 主题方案
|
||
## 1 介绍
|
||
TUIKit 自定义了 **TUITheme** 类，用于规范TUIKit内的色彩使用。
|
||
|
||
请开发时务必注意，目前除 Colors.white 和 Colors.black 等底色/前景色外一律使用theme里提供的颜色。没有对应颜色可提出加到 TUITheme 里。
|
||
|
||
颜色概览：
|
||
|
||
// 应用主色
|
||
// Primary Color For The App
|
||
final Color? primaryColor;
|
||
|
||
// 应用次色
|
||
// Secondary Color For The App
|
||
final Color? secondaryColor;
|
||
|
||
// 提示颜色，用于次级操作或提示
|
||
// Info Color, Used For Secondary Action Or Info
|
||
final Color? infoColor;
|
||
|
||
// 浅背景颜色，比主背景颜色浅，用于填充缝隙或阴影
|
||
// Weak Background Color, Lighter Than Main Background, Used For Marginal Space Or Shadowy Space
|
||
final Color? weakBackgroundColor;
|
||
|
||
// 浅分割线颜色，用于分割线或边框
|
||
// Weak Divider Color, Used For Divider Or Border
|
||
final Color? weakDividerColor;
|
||
|
||
// 浅字色
|
||
// Weak Text Color
|
||
final Color? weakTextColor;
|
||
|
||
// 深字色
|
||
// Dark Text Color
|
||
final Color? darkTextColor;
|
||
|
||
// 浅主色，用于AppBar或Panels
|
||
// Light Primary Color, Used For AppBar Or Several Panels
|
||
final Color? lightPrimaryColor;
|
||
|
||
// 字色
|
||
// TextColor
|
||
final Color? textColor;
|
||
|
||
// 警示色，用于危险操作
|
||
// Caution Color, Used For Warning Actions
|
||
final Color? cautionColor;
|
||
|
||
// 群主标识色
|
||
// Group Owner Identification Color
|
||
final Color? ownerColor;
|
||
|
||
// 群管理员标识色
|
||
// Group Admin Identification Color
|
||
final Color? adminColor;
|
||
|
||
//除各种固定颜色外提供2种MaterialColor
|
||
`primaryMaterialColor` && `lightPrimaryMaterialColor`。
|
||
提供由 primaryColor 和 lightPrimaryColor 生成的十级色阶(50 ~ 900)，eg: `primaryMaterialColor.shade50` `primaryMaterialColor.shade900`
|
||
|
||
## 2 使用方式
|
||
### 2.1 开发中
|
||
#### 2.1.1 Demo
|
||
|
||
通过 provider 里的 **DefaultThemeData.theme** 来获取theme。
|
||
|
||
通过 provider 里的 **DefaultThemeData.currentThemeType** 来获取/设置当前ThemeType。
|
||
|
||
设置 **DefaultThemeData.currentThemeType** 会将currentThemeType 写入localStorage 并同步 TUIKit 的 Theme。
|
||
|
||
当前支持四种ThemeType：
|
||
`enum ThemeType { solemn, brisk, bright, fantasy }`
|
||
|
||
#### 2.1.2 UIKit
|
||
|
||
通过全局唯一的 `serviceLocator<TUIThemeViewModel>()` 获取当前 theme。
|
||
|
||
#### 2.1.3 AppBar
|
||
|
||
目前 **AppBar** 的统一处理如下：
|
||
|
||
字色目前统一为 Colors.white
|
||
|
||
`flexibleSpace: Container(
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(colors: [
|
||
theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
|
||
theme.primaryColor ?? CommonColor.primaryColor
|
||
]),
|
||
),
|
||
),`
|
||
|
||
`IconThemeData(
|
||
color: Colors.white,
|
||
),`
|
||
|
||
|
||
## 3 TODO
|
||
3.1 目前只支持暗色底白字，需要提供亮/暗两种主题间的切换。
|
||
|
||
3.2 自动识别亮/暗主题并更改字色。 |