主题

适用场景

需要记住浅色 / 深色的应用
页头上的主题切换

在根布局用 ThemeProvider 包一层，并把 ThemeScript 放进 head，避免载入页面时出现错误主题。把 ThemeToggle 放到用户找得到的位置。

用法

src/app/layout.tsx

TSX

import { ThemeProvider } from 'blackwork'
import { ThemeScript } from 'blackwork/rsc'

const RootLayout = ({ children }: React.PropsWithChildren) => {
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <head>
        <ThemeScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

export default RootLayout

用法

示例

下拉

下拉菜单

API 参考

属性	类型	默认值	说明
`defaultTheme`	`"light" \| "dark"`	`"dark"`	ThemeProvider 的初始主题。
`storageKey`	`string`	`"blackwork-theme"`	ThemeProvider 使用的 localStorage key。
`mode`	`"button" \| "dropdown"`	`"button"`	ThemeToggle 的交互模式。
`options`	`ThemeToggleOption[]`	—	ThemeToggle 的自定义标签和图标。
`ariaLabel`	`string`	—	ThemeToggle 的无障碍名称。

说明

默认主题是 dark。
偏好存在 localStorage 的 blackwork-theme。
ThemeScript 和 ThemeProvider 的 storageKey、defaultTheme 必须一致。
本站已经在根布局里挂了 ThemeProvider。