テーマトグル

アプリケーションサイドバーの手動ライト/ダークコントロール。次のテーマは、正確なインタラクションポイントからスムーズに明らかにし、ユーザーの選択はローカルで主張し、感情やサポートされていないブラウザが即時スイッチに戻ります。

インストール

再使用可能なテーマのトグルとCLIを使用してその意味のあるテーマの依存関係を追加します。または手動で:

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add theme-toggle

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

プロジェクトのセットアップ

ライトはデフォルトです。保存されたものを適用する boardui:theme 最初のペイントのフラッシュを防止し、加える水和の前に価値 suppressHydrationWarning React が水和する前のブラウザーで root クラスが設定されているためです。

// app/layout.tsximport Script from "next/script";import "@/styles/globals.css";
const themeScript =  '(function(){try{var dark=localStorage.getItem("boardui:theme")==="dark";document.documentElement.classList.toggle("dark",dark)}catch(e){document.documentElement.classList.remove("dark")}})();';
export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en" suppressHydrationWarning>      <body>        <Script id="boardui-theme" strategy="beforeInteractive">          {themeScript}        </Script>        {children}      </body>    </html>  );}

トグルはマニュアルのみです:それは、オペレーティングシステムのテーマを読んでいません。その減少感情と非支持ブラウザのフォールバックは、円が明らかにすることなくすぐに切り替えます。

崩壊したサイドバー

セットセット collapsed 同じアクセス可能な押された状態を維持しながら、コンパクトなサイドバーレールに収まる36pxのアイコンのみ制御用です。

<ThemeToggle collapsed />