ダークモード - 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