暗黑模式 - shadcn-solid 组件库

文档

暗黑模式

为你的网站添加暗黑模式。

包裹你的根布局

将 ColorModeProvider 和 ColorModeScript 添加到你的应用中。

src/app.tsx

import { ColorModeProvider, ColorModeScript } from "@kobalte/core";
import { MetaProvider } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import { isServer } from "solid-js/web";
import { getCookie } from "vinxi/http";
 
export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Suspense>
            <ColorModeScript />
            <ColorModeProvider>{props.children}</ColorModeProvider>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

添加模式切换

在你的网站上放置一个模式切换器，以便在亮色和暗黑模式之间切换。

主题 CLI