# 概要

为实现小程序面板的主题、暗黑模式的动态切换,我们开发 rntheme 模块进行支持。模块参照目前社区热度较高的 react-native-dark-mode 模块实现了大部分同名 API,同时结合萤石业务现状增加了部分功能。

模块大部分方法使用了 React Hook,无法在 Class 组件中正常使用(在 Function 组件中可用),而大部分业务都由Class组件组装而成,因此我们提供 inject 方法用于将 Hook 方法导入 Class 组件 props 中。

# 主题色

指 UI 主题色,主要用来控制小程序页面的背景色、文本颜色、图片等。

主题色 key 浅色 暗黑 说明
BrandColor 0x4C80F7 0x6090FF 品牌色
ImportantInfoColor 0xFF8F42 0xFF954D 用于突出文字
LinkColor 0x4C80F7 0x6090FF 用于文字链接色
IncorrectColor 0xFB4848 0xFF5656 用于错误提示、小红点、气泡标签等
CorrectColor 0x52C41B 0x75C151 用于正向反馈的图标,文字等
PrimaryLabelColor 0x333333 0xFFFFFF alpha 90% 一级文字,用于页面标题、重要信息等主要内容
SecondaryLabelColor 0x666666 0xEBEBF5 alpha 60% 二级文字,用于设置页、房间管理等次要内容
TertiaryLabelColor 0x999999 0xEBEBF5 alpha 40% 三级文字,用于次要内容
QuarternaryLabelColor 0xCCCCCC 0xEBEBF5 alpha 25% 四级文字,用于弱提示或失效内容
InverseLableColor 0xFFFFFF 0xFFFFFF 反白文字,用于图片或彩色背景上
ButtonColorPrimary 0x4C80F7 0x6090FF 主要按钮
ButtonColorSecondary 0xCCCCCC 0xEBEBF5 alpha 25% 次要按钮
ButtonColorDisabble 0xDEDEDE 0x38383A 置灰按钮
ButtonColorHighlight 0x4C80F7 alpha 70% 0x6090FF alpha 70% 按钮高亮
IconColorPrimary 0x4C80F7 0x6090FF 一级图标
IconColorSecondary 0x333333 0xCCCCCC 二级图标
IconColorTertiary 0x666666 0x999999 三级图标
IconColorQuarternary 0x999999 0x999999 四级图标
IconColorDisable 0xCCCCCC 0x999999 alpha 30% 失效图标
IconColorInverse 0xFFFFFF 0xFFFFFF 反白图标
InputColor 0xDEDEDE 0x38383A 用于有输入内容的下划线,如输入线
SeparatorColor 0xEDEDED 0x38383A 用于分隔线,分割区域线框,描边,小标签背景色
PopupColor 0xF1F1F1 0x38383A 用于弹窗分割线及色块,进度条,占位图底色
SystemBackgroundPrimary 0xFFFFFF 0x000000 用于背景底色
SystemBackgroundSecondary 0xFFFFFF 0x1C1C1E 用于表单、卡片、弹框背景色
SystemBackgroundTertiary 0xFFFFFF 0x2C2C2E 用于重点突出的模块背景
BackgroundColorExtension 0xFAFAFC 0x000000 用于带底图背景延伸色
FillColor 0xF8F8F8 0x1C1C1E 用于小区域背景色
FillColorSecondary 0xF8F8F8 0x2C2C2E 用于小区域背景色,二级填充色
PopupMaskingOutColor 0x000000 alpha:40% 0x000000 alpha 75% 用于弹出层蒙版
GuideMaskingOutColor 0x000000 alpha:75% 0x000000 alpha 75% 于引导蒙版
ToastColor 0x000000 alpha:80% 0x38383A 用于toast背景

注意:建议开发中直接使用主题色定义的key,表中列举的 key 已适配暗黑模式,key的使用方法,具体参考暗黑动态主题色章节