tencent_cloud_chat_uikit_fl.../doc/theme.md

2.9 KiB
Raw Permalink Blame History

主题方案

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 自动识别亮/暗主题并更改字色。