@tais00/theme 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present, Lexmin0412.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,151 @@
+# `@dify-chat/theme`
+
+![version](https://img.shields.io/npm/v/@dify-chat/theme) ![NPM Last Update](https://img.shields.io/npm/last-update/@dify-chat/theme) ![NPM Downloads](https://img.shields.io/npm/dm/@dify-chat/theme)
+
+`@dify-chat/theme` 是 Dify Chat 项目的主题包，它提供了一套主题管理的完整方案，包括主题上下文 hook、主题切换组件、主题状态管理等。
+
+## 主要功能
+
+- 主题模式切换（系统/浅色/深色）
+- 完整的主题上下文管理
+- 暗黑模式自动适配
+
+## 安装
+
+通过 npm/yarn/pnpm 安装：
+
+```bash
+# npm
+npm install @dify-chat/theme
+
+# yarn
+yarn add @dify-chat/theme
+
+# pnpm
+pnpm add @dify-chat/theme
+```
+
+## API
+
+### `<ThemeContextProvider />`
+
+主题上下文容器。
+
+> 说明：只有在上层组件使用了 `ThemeContextProvider` 包裹应用，才能在子组件中使用主题相关的功能。
+
+在最外层组件中使用 `ThemeContextProvider` 包裹应用：
+
+```tsx
+import { ThemeContextProvider } from '@dify-chat/theme'
+function App() {
+	return (
+		<ThemeContextProvider>
+			<YourApp />
+		</ThemeContextProvider>
+	)
+}
+```
+
+### `<ThemeSelector />`
+
+主题选择器组件。
+
+默认情况下，`ThemeContextProvider` 中已经提供了自适应系统主题的能力。如果你需要支持用户手动切换主题模式，可以引入主题选择器：
+
+```tsx
+import { ThemeSelector } from '@dify-chat/theme'
+
+function App() {
+	const { themeMode } = useThemeContext()
+	return (
+		<ThemeSelector>
+			<Button>当前主题模式：{themeMode}</Button>
+		</ThemeSelector>
+	)
+}
+```
+
+### `useThemeContext()`
+
+获取主题上下文 hook。
+
+返回值：
+
+- `theme`: 当前应用的主题，值为 `'light' | 'dark'`
+- `themeMode`: 当前主题模式，值为 `'light' | 'dark' | 'system'`
+- `setThemeMode`: 设置主题模式，接受一个 `'light' | 'dark' | 'system'` 类型的参数
+
+你可以使用 `useThemeContext` hook 获取当前应用的主题：
+
+```tsx
+import { useThemeContext } from '@dify-chat/theme'
+
+function ThemeToggle() {
+	const { theme } = useThemeContext()
+
+	return <div>当前主题模式：{theme}</div>
+}
+```
+
+也可以在组件中使用 `setThemeMode` 方法，自定义切换主题模式：
+
+```tsx
+import { useThemeContext } from '@dify-chat/theme'
+
+function ThemeSwitcher() {
+	const { themeMode, setThemeMode } = useThemeContext()
+	return (
+		<div>
+			<h3>当前主题模式：{themeMode}</h3>
+
+			<div>
+				<Button onClick={() => setThemeMode('light')}>浅色模式</Button>
+				<Button onClick={() => setThemeMode('dark')}>深色模式</Button>
+				<Button onClick={() => setThemeMode('system')}>系统主题</Button>
+			</div>
+		</div>
+	)
+}
+```
+
+### 其他导出的成员
+
+**枚举**
+
+- `ThemeEnum`: 主题枚举
+- `ThemeModeEnum`: 主题模式枚举
+- `ThemeModeLabelEnum`: 主题模式文本枚举
+
+**常量**
+
+- `ThemeModeOptions` : 主题模式选项
+
+**类型**
+
+- `IThemeContext`: 主题上下文类型
+- `IThemeMode`: 主题模式类型
+- `ICurrentTheme`: 当前主题类型
+
+使用示例:
+
+```tsx
+import { Select } from 'antd'
+import { ThemeModeEnum, ThemeModeOptions } from '@dify-chat/theme'
+
+function ThemeSwitcher() {
+	const { themeMode, setThemeMode } = useThemeContext()
+	return (
+		<div>
+			<h3>当前主题模式：{themeMode}</h3>
+			<div>
+				切换主题模式：
+				<Select
+					options={ThemeModeOptions}
+					value={themeMode}
+					onChange={value => setThemeMode(value as ThemeModeEnum)}
+				/>
+			</div>
+		</div>
+	)
+}
+```

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { default as ThemeSelector } from './theme-selector';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+import theme_selector from "./theme-selector.js";
+export { theme_selector as ThemeSelector };

package/dist/components/theme-selector.d.ts

@@ -0,0 +1,8 @@
+interface IThemeSelectorProps {
+    children?: React.ReactNode;
+}
+/**
+ * 主题选择器组件
+ */
+export default function ThemeSelector(props: IThemeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/theme-selector.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { Dropdown } from "antd";
+import { useThemeContext } from "../hooks/index.js";
+import { ThemeModeEnum, ThemeModeLabelEnum } from "../constants/index.js";
+import { DynamicIcon } from "lucide-react/dynamic";
+function ThemeSelector(props) {
+    const { children } = props;
+    const { themeMode, setThemeMode } = useThemeContext();
+    return /*#__PURE__*/ jsx(Dropdown, {
+        placement: "bottomRight",
+        menu: {
+            selectedKeys: [
+                themeMode
+            ],
+            items: [
+                {
+                    type: 'item',
+                    key: ThemeModeEnum.SYSTEM,
+                    label: ThemeModeLabelEnum.SYSTEM,
+                    icon: /*#__PURE__*/ jsx(DynamicIcon, {
+                        name: "screen-share"
+                    })
+                },
+                {
+                    type: 'item',
+                    key: ThemeModeEnum.LIGHT,
+                    label: ThemeModeLabelEnum.LIGHT,
+                    icon: /*#__PURE__*/ jsx(DynamicIcon, {
+                        name: "sun"
+                    })
+                },
+                {
+                    type: 'item',
+                    key: ThemeModeEnum.DARK,
+                    label: ThemeModeLabelEnum.DARK,
+                    icon: /*#__PURE__*/ jsx(DynamicIcon, {
+                        name: "moon-star"
+                    })
+                }
+            ],
+            onClick: (item)=>{
+                setThemeMode(item.key);
+            }
+        },
+        children: children
+    });
+}
+export { ThemeSelector as default };

package/dist/constants/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 主题枚举
+ */
+export declare enum ThemeEnum {
+    LIGHT = "light",
+    DARK = "dark"
+}
+/**
+ * 主题模式枚举
+ */
+export declare enum ThemeModeEnum {
+    SYSTEM = "system",
+    LIGHT = "light",
+    DARK = "dark"
+}
+/**
+ * 主题模式文本枚举
+ */
+export declare enum ThemeModeLabelEnum {
+    SYSTEM = "\u8DDF\u968F\u7CFB\u7EDF",
+    LIGHT = "\u6D45\u8272",
+    DARK = "\u6DF1\u8272"
+}
+/**
+ * 主题模式常量对应的选项
+ */
+export declare const ThemeModeOptions: {
+    label: ThemeModeLabelEnum;
+    value: ThemeModeEnum;
+}[];

package/dist/constants/index.js

@@ -0,0 +1,32 @@
+var constants_ThemeEnum = /*#__PURE__*/ function(ThemeEnum) {
+    ThemeEnum["LIGHT"] = "light";
+    ThemeEnum["DARK"] = "dark";
+    return ThemeEnum;
+}({});
+var constants_ThemeModeEnum = /*#__PURE__*/ function(ThemeModeEnum) {
+    ThemeModeEnum["SYSTEM"] = "system";
+    ThemeModeEnum["LIGHT"] = "light";
+    ThemeModeEnum["DARK"] = "dark";
+    return ThemeModeEnum;
+}({});
+var constants_ThemeModeLabelEnum = /*#__PURE__*/ function(ThemeModeLabelEnum) {
+    ThemeModeLabelEnum["SYSTEM"] = "\u8DDF\u968F\u7CFB\u7EDF";
+    ThemeModeLabelEnum["LIGHT"] = "\u6D45\u8272";
+    ThemeModeLabelEnum["DARK"] = "\u6DF1\u8272";
+    return ThemeModeLabelEnum;
+}({});
+const ThemeModeOptions = [
+    {
+        label: "\u8DDF\u968F\u7CFB\u7EDF",
+        value: "system"
+    },
+    {
+        label: "\u6D45\u8272",
+        value: "light"
+    },
+    {
+        label: "\u6DF1\u8272",
+        value: "dark"
+    }
+];
+export { constants_ThemeEnum as ThemeEnum, constants_ThemeModeEnum as ThemeModeEnum, constants_ThemeModeLabelEnum as ThemeModeLabelEnum, ThemeModeOptions };

package/dist/hooks/index.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ThemeEnum, ThemeModeEnum } from '../constants';
+/**
+ * 主题模式，用于用户手动切换， light-固定浅色 dark-固定深色，system-跟随系统
+ */
+export type IThemeMode = 'light' | 'dark' | 'system';
+/**
+ * 实际应用的主题
+ */
+export type ICurrentTheme = 'light' | 'dark';
+/**
+ * 主题上下文类型定义
+ */
+export interface IThemeContext {
+    /**
+     * 当前主题
+     */
+    theme: ThemeEnum;
+    /**
+     * 当前主题模式
+     */
+    themeMode: ThemeModeEnum;
+    /**
+     * 手动设置主题模式
+     */
+    setThemeMode: (theme: ThemeModeEnum) => void;
+}
+/**
+ * 主题上下文
+ */
+export declare const ThemeContext: React.Context<IThemeContext>;
+/**
+ * 暗黑模式的 body 类名
+ */
+export declare const DARK_CLASS_NAME = "dark";
+/**
+ * 主题上下文提供者
+ */
+export declare const ThemeContextProvider: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 获取主题上下文 hook
+ */
+export declare const useThemeContext: () => {
+    isDark: boolean;
+    isLight: boolean;
+    isSystemMode: boolean;
+    /**
+     * 当前主题
+     */
+    theme: ThemeEnum;
+    /**
+     * 当前主题模式
+     */
+    themeMode: ThemeModeEnum;
+    /**
+     * 手动设置主题模式
+     */
+    setThemeMode: (theme: ThemeModeEnum) => void;
+};

package/dist/hooks/index.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import react, { useCallback, useEffect, useState } from "react";
+import { ThemeEnum, ThemeModeEnum } from "../constants/index.js";
+import { LocalStorageKeys, LocalStorageStore } from "@dify-chat/helpers";
+const ThemeContext = /*#__PURE__*/ react.createContext({
+    theme: ThemeEnum.LIGHT,
+    setThemeMode: ()=>{},
+    themeMode: ThemeModeEnum.SYSTEM
+});
+const DARK_CLASS_NAME = 'dark';
+const ThemeContextProvider = (props)=>{
+    const { children } = props;
+    const [themeMode, setThemeMode] = useState(()=>{
+        if ('undefined' == typeof window) return ThemeModeEnum.SYSTEM;
+        return LocalStorageStore.get(LocalStorageKeys.THEME_MODE) || ThemeModeEnum.SYSTEM;
+    });
+    const [themeState, setThemeState] = react.useState(()=>{
+        if ('undefined' == typeof window) return ThemeEnum.LIGHT;
+        return LocalStorageStore.get(LocalStorageKeys.THEME) || ThemeEnum.LIGHT;
+    });
+    useEffect(()=>{
+        LocalStorageStore.set(LocalStorageKeys.THEME, themeState);
+    }, [
+        themeState
+    ]);
+    const handleColorSchemeChange = useCallback((event)=>{
+        if (event.matches) {
+            setThemeState(ThemeEnum.DARK);
+            document.body.classList.add(DARK_CLASS_NAME);
+        } else {
+            setThemeState(ThemeEnum.LIGHT);
+            document.body.classList.remove(DARK_CLASS_NAME);
+        }
+    }, [
+        setThemeState,
+        themeMode
+    ]);
+    useEffect(()=>{
+        LocalStorageStore.set(LocalStorageKeys.THEME_MODE, themeMode);
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        if (themeMode === ThemeModeEnum.SYSTEM) {
+            handleColorSchemeChange(mediaQuery);
+            if (mediaQuery.addEventListener) mediaQuery.addEventListener('change', handleColorSchemeChange);
+            else if (mediaQuery.addListener) mediaQuery.addListener(handleColorSchemeChange);
+        } else {
+            if (mediaQuery.removeEventListener) mediaQuery.removeEventListener('change', handleColorSchemeChange);
+            else if (mediaQuery.removeListener) mediaQuery.removeListener(handleColorSchemeChange);
+            if (themeMode === ThemeModeEnum.DARK) {
+                setThemeState(ThemeEnum.DARK);
+                document.body.classList.add(DARK_CLASS_NAME);
+            } else if (themeMode === ThemeModeEnum.LIGHT) {
+                setThemeState(ThemeEnum.LIGHT);
+                document.body.classList.remove(DARK_CLASS_NAME);
+            }
+        }
+    }, [
+        themeMode
+    ]);
+    return /*#__PURE__*/ jsx(ThemeContext.Provider, {
+        value: {
+            theme: themeState,
+            themeMode,
+            setThemeMode
+        },
+        children: children
+    });
+};
+const useThemeContext = ()=>{
+    const context = react.useContext(ThemeContext);
+    return {
+        ...context,
+        isDark: context.theme === ThemeEnum.DARK,
+        isLight: context.theme === ThemeEnum.LIGHT,
+        isSystemMode: context.themeMode === ThemeModeEnum.SYSTEM
+    };
+};
+export { DARK_CLASS_NAME, ThemeContext, ThemeContextProvider, useThemeContext };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./components/index.js";
+export * from "./constants/index.js";
+export * from "./hooks/index.js";

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@tais00/theme",
+  "version": "0.7.0",
+  "author": {
+    "name": "lexmin0412",
+    "email": "zhangle_dev@outlook.com",
+    "url": "http://github.com/lexmin0412"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lexmin0412/dify-chat.git",
+    "directory": "packages/theme"
+  },
+  "source": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "@tais00/helpers": "^0.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.24.0",
+    "@rsbuild/plugin-react": "^1.2.0",
+    "@rslib/core": "^0.12.4",
+    "@types/react": "^19.2.7",
+    "antd": "^6.0.0",
+    "eslint": "^9.26.0",
+    "globals": "^16.0.0",
+    "lucide-react": "^0.508.0",
+    "prettier": "^3.5.3",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.30.1"
+  },
+  "peerDependencies": {
+    "antd": ">=5.0.0",
+    "lucide-react": "^0.508.0",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "format": "prettier --write .",
+    "lint": "eslint ."
+  }
+}