Remix Viteでshadcnを使ってダークモードを簡単に実装する

https://ui.shadcn.com/docs/dark-mode/next

Remixの方法はちょっと難しいのでNextのHowToを参考にして進めます。

前提

Shadcn/uiをセットアップ済みのRemixを用意してください。

1. ライブラリのインストール

NEXTjsのライブラリのインストールです。
NEXTjsのライブラリのインストールです。（大事なことなので二回言いました）

npm install next-themes

2. プロバイダーの準備

app\components\theme-provider.tsxを新規作成します。

app\components\theme-provider.tsx

import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

3. プロバイダーの適応

rootに以下のようにインポートと、プロバイダーでOutletコンポーネントを囲ってください。

app\root.tsx

// app\root.tsx

+import { ThemeProvider } from "~/components/theme-provider"

//~~~~~~~~~~~~~~

+ <ThemeProvider
+ attribute="class"
+ defaultTheme="system"
+ enableSystem
+ disableTransitionOnChange
+ >
  <Outlet />
+ </ThemeProvider>

これでダークモード対応完です。

4.ダークモードのトグルスイッチをつくる

app\components\dark-mode-toggle.tsxファイルを新規作成

app\components\dark-mode-toggle.tsx

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "~/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";

export function ModeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

ボタンとドロップダウンメニューをインストールする

npx shadcn-ui@latest add button

npx shadcn-ui@latest add dropdown-menu

※頻繁にインストールするのでVSコードの[shadcn/ui]の拡張機能を入れておいたほうがいいです。

5. ページで呼び出す

_index.tsx

import {ModeToggle} from "~/components/dark-mode-toggle";

export default function Home() {
  return (
    <div>
      <ModeToggle />
    </div>
  );
}

出来た🥳