📦 @quec/panel-theme-kit 🌈

QUEC Panel Theme Kit - 面板主题状态管理工具库

具备管理主题色、深色模式、颜色工具等功能。

| 版本 | 描述 | | ----- | ----------------------------------------- | | 0.1.x | 其他库解耦theme-kit，只专注样式的状态管理 | | 0.0.x | 对别的kit组件有高度耦合关系 |

PS:以下删除的内容改到@quec/panel-theme-kit-config进行放置

版本依赖常量样式库 @quec/panel-theme-kit-config 版本

请自主安装以下库使用，☕尽力了

yarn add @quec/[email protected]

| 当前库版本 | panel-theme-kit-config版本 | | ---------- | -------------------------- | | EmptyView | 1.1.1 |

🎈 依赖库 请自行安装以下库

| 库名 | peerDependencies | devDependencies | | ---------------------- | ---------------- | --------------- | | @quec/rn-log-module | * | 1.0.6 | | @quec/rn-user-module | * | 1.0.8 | | react | * | * | | react-native | * | * | | zustand | * | 4.4.3 |

PS:如果你的安装版本和devDependencies版本有很大的出入，请联系维护人员进行更新

✅ 功能列表

1. 存储明暗模式信息
2. ~~存储主题色，图片源等~~
3. ~~颜色工具~~
4. ~~字体工具~~

🧩 模块结构

本库主要包含以下模块：

1. 状态管理器
   • 主题状态（themeStore）
2. ~~颜色工具~~
3. ~~字体样式工具~~

🚀 快速开始

1. 初始化状态管理器

// src/hook/theme.tsx
import {createThemeStore} from '@quec/panel-theme-kit';
import {darkColors, lightColors} from '../config/color.config copy';
import {darkImages, **lightImages**} from '../config/image.config';
export const {
    useThemeColors,
    useThemeColorStyles,
    useInitTheme,
    useThemeImg,
    useThemeStatusBarStyle,
} = createThemeStore({
    lightColors,
    darkColors,
    lightImages,
    darkImages,
});

// AppContainer.tsx
const AppContainer = memo(() => {
    const initTheme = useInitTheme();
    useConstructor(async () => {
        await initTheme();

2. 在组件中使用状态

// anyPage.tsx
import { useThemeColors } from '@quec/panel-theme-kit'
const AnyPage :FC = () => {

const colors = useThemeColors()

return (<Text style={{color: colors.primary}}>Important</Text>)

3. 使用工具

// index.js / index.android.js / index.ios.js
import { patchTextStyle } from '@quec/panel-theme-kit'
patchTextStyle()

AppRegistry.registerComponent(appName, () => App);

🧠 状态管理器 API

📍 设备状态

初始化

• createThemeStore()：初始化主题状态管理器

状态 Hook

• useThemeStoreState()：获取所有状态集合
• useThemeMode()：获取当前明暗模式
• useThemeStatusBarStyle()：获取当前明暗模式的StatusBarStyle
• useThemeColors()：获取颜色
• useThemeColorStyles()：获取颜色转换后的样式
• useThemeImg()：获取图片

方法 Hook

• useInitTheme()：主动获取APP明暗模式状态
• getThemeStore()：获取 themeStore的状态管理器实例
• useSetTheme()：方法 - 设置明暗模式状态
• useSetLightColor()：方法 - 设置明亮模式状态下的主题色集合
• useSetDarkColor()：方法 - 设置黑暗模式状态下的主题色集合
• useSetLightImg()：方法 - 设置明亮模式状态下的图片合集
• useSetDarkThemeImg()：方法 - 设置黑暗模式状态下的图片合集

~~如需查看库有的内置图片 👉 图片文件夹~~

~~🌈 颜色工具方法~~

方法

• hexToRgb()：hex 转 rgb
• rgbToHex()：rgb 转 hex
• rgbToRgba()：rgb 转 rgba
• mixColors()：混合颜色
• lighten()：将颜色变亮
• darken()：将颜色变暗
• isLight()：判断颜色是否为亮色
• invertColor()：获取颜色的反转色

~~✒ 字体工具方法~~

patchTextStyle()

由于不可抗力，IOS系统文字需要比安卓大2个单位，所以本库提供了 patchTextStyle() 方法，用于自动适配，直接使用在APP之前

方法

• getFontWeight()：获取字重
• getFontStyle()：简化字体样式配置

~~颜色组类型~~ 请移步@quec/panel-theme-kit-config查看

命名约定规则：

color-[ 用途 bg / text / border ]-[层级或描述 first / second / third ]

以下为会初始化的颜色

初始化的颜色可查看以下链接 ~~👉 初始化的颜色~~

~~图片组类型~~ 请移步@quec/panel-theme-kit-config查看

命名约定规则：

img-[描述 arrow / setting ]

以下为会初始化的图片

初始化的图片可查看以下链接 ~~👉 初始化的图片~~

~~🔨 和其他的kit库一起配合使用~~

字体类型（定制面板还是建议自己写，然后这里专用于组件库）

为组件库提供的字体类型可查看以下链接 👉 为组件库提供的字体类型

颜色类型

为组件库提供的颜色类型可查看以下链接 👉 为组件库提供的颜色类型

图片类型

为组件库提供的初始化的图片可查看以下链接 👉 为组件库提供的图片类型

会将上面的初始色赋值给对应的kit组件库，可以查看其他库的相关对应表格

🛠 本地调试说明

如需修改本库并本地调试，请参考 👉 本地调试文档