  
npm install @tais00/theme@dify-chat/theme!version !NPM Last Update !NPM Downloads
@dify-chat/theme 是 Dify Chat 项目的主题包，它提供了一套主题管理的完整方案，包括主题上下文 hook、主题切换组件、主题状态管理等。
- 主题模式切换（系统/浅色/深色）
- 完整的主题上下文管理
- 暗黑模式自动适配
通过 npm/yarn/pnpm 安装：
``bashnpm
npm install @dify-chat/theme
API
$3
主题上下文容器。
> 说明：只有在上层组件使用了
包裹应用，才能在子组件中使用主题相关的功能。在最外层组件中使用
ThemeContextProvider 包裹应用：`tsx
import { ThemeContextProvider } from '@dify-chat/theme'
function App() {
return (
)
}
`$3
主题选择器组件。
默认情况下，
中已经提供了自适应系统主题的能力。如果你需要支持用户手动切换主题模式，可以引入主题选择器：`tsx
import { ThemeSelector } from '@dify-chat/theme'function App() {
const { themeMode } = useThemeContext()
return (
)
}
`$3
获取主题上下文 hook。
返回值：
-
: 当前应用的主题，值为 'light' | 'dark'
- : 当前主题模式，值为 'light' | 'dark' | 'system'
- : 设置主题模式，接受一个 'light' | 'dark' | 'system' 类型的参数你可以使用
useThemeContext hook 获取当前应用的主题：`tsx
import { useThemeContext } from '@dify-chat/theme'function ThemeToggle() {
const { theme } = useThemeContext()
return
当前主题模式：{theme}
}
`也可以在组件中使用
方法，自定义切换主题模式：`tsx
import { useThemeContext } from '@dify-chat/theme'function ThemeSwitcher() {
const { themeMode, setThemeMode } = useThemeContext()
return (
当前主题模式：{themeMode}
)
}
`$3
枚举
-
: 主题枚举
- 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 (
当前主题模式：{themeMode}
切换主题模式：
value={themeMode}
onChange={value => setThemeMode(value as ThemeModeEnum)}
/>
)
}
``