主题配置

SoloKit UI 内置了主题系统，支持亮色和暗色模式，并且可以自动适应系统设置。本文档将介绍如何配置和自定义主题。

主题类型

SoloKit UI 支持以下主题类型:

• light - 亮色主题
• dark - 暗色主题
• system - 自动跟随系统设置（默认）

使用ThemeProvider

要在你的应用中启用主题支持，需要在应用根组件中设置ThemeProvider:

import { ThemeProvider } from "@solokit/ui";

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider initialTheme="system">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

initialTheme属性可以设置为"light", "dark"或"system"，默认为"system"。

在组件中获取和设置主题

你可以使用useTheme钩子在任何组件中获取当前主题并进行切换:

import { useTheme } from "@solokit/ui";

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <p>当前主题: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切换主题
      </button>
    </div>
  );
}

主题上下文数据

useTheme钩子返回以下数据: