CSS 変数を使用して Next.js にダークモードを適用する-CSSチュートリアル-php.cn

CSS 変数を使用して Next.js にダークモードを適用する

WBOY

リリース： 2024-08-10 20:37:02

オリジナル

594 人が閲覧しました

今日の Web 開発環境では、最新のユーザーインターフェイスにとってダークモードオプションの提供はほぼ必須となっています。この記事では、CSS 変数、Tailwind CSS、およびいくつかの便利なツールとパッケージを使用して、Next.js プロジェクトに堅牢なダークモードソリューションを実装する方法を検討します。

ユーティリティクラス用の Tailwind CSS

まず、Next.js プロジェクトで Tailwind CSS を設定しましょう。 Tailwind は、スタイルに対するユーティリティファーストのアプローチを提供し、開発プロセスを大幅にスピードアップできます。

Tailwind CSS をインストールするには、プロジェクトディレクトリで次のコマンドを実行します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

ログイン後にコピー

次に、tailwind.config.js ファイルを設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ログイン後にコピー

次に、globals.css ファイルを設定します。

@tailwind base;
@tailwind components;
@tailwind utilities;

ログイン後にコピー

カラーパレット用のOreaカラージェネレーター

Applying Dark Mode in Next.js using CSS Variables

明るいモードと暗いモードの両方で調和のとれたカラーパレットを作成するには、Orea Color Generator を使用します。このツールは、組み合わせてうまく機能し、さまざまなテーマに簡単に適応できる色のセットを生成するのに役立ちます。

Orea Color Generator にアクセスし、ベースカラーを選択します。このツールは、配色を作成して視覚化するためのユーザーフレンドリーなインターフェイスを提供します:

上の画像は Orea Color Generator インターフェイスを示しており、次のことができます。

カラーピッカーを使用して中間の色を選択します
生成された色をさまざまな色合いで表示します
ライトモードとダークモードの両方でテーマのプレビューを表示します
CSS 変数をコピーして、プロジェクトに簡単に統合できます

Orea Color Generator でカラーパレットを生成したら、これらの色をプロジェクトに実装します。 CSS でカラー変数を定義する方法の例を次に示します:

:root {
  /* Initially TailwindCSS bg-opacity */
  --tw-bg-opacity: 1;

  --primary-50: 242, 242, 242;
  --primary-100: 230, 230, 230;
  --primary-200: 204, 204, 204;
  --primary-300: 179, 179, 179;
  --primary-400: 153, 153, 153;
  --primary-500: 128, 128, 128;
  --primary-600: 102, 102, 102;
  --primary-700: 77, 77, 77;
  --primary-800: 51, 51, 51;
  --primary-900: 26, 26, 26;
  --primary-950: 13, 13, 13;
}

ログイン後にコピー

これらの CSS 変数は、明るい色 ( — プライマリー-50) から暗い色 ( — プライマリー-950) まで、原色の色合いの範囲を定義します。これらの変数を使用すると、アプリケーション全体に一貫した色を簡単に適用し、明るいモードと暗いモードを切り替えることができます。

カラー変数を定義したので、それらを Tailwind CSS 設定に統合しましょう。

module.exports = {
  // ... other config
  theme: {
    extend: {
      colors: {
        primary: {
          '50': 'rgba(var(--primary-50), var(--tw-bg-opacity))',
          '100': 'rgba(var(--primary-100), var(--tw-bg-opacity))',
          '200': 'rgba(var(--primary-200), var(--tw-bg-opacity))',
          '300': 'rgba(var(--primary-300), var(--tw-bg-opacity))',
          '400': 'rgba(var(--primary-400), var(--tw-bg-opacity))',
          '500': 'rgba(var(--primary-500), var(--tw-bg-opacity))',
          '600': 'rgba(var(--primary-600), var(--tw-bg-opacity))',
          '700': 'rgba(var(--primary-700), var(--tw-bg-opacity))',
          '800': 'rgba(var(--primary-800), var(--tw-bg-opacity))',
          '900': 'rgba(var(--primary-900), var(--tw-bg-opacity))',
          '950': 'rgba(var(--primary-950), var(--tw-bg-opacity))',
        },
      },
    },
  },
}

ログイン後にコピー

この構成により、Tailwind の不透明度モディファイアを使用して不透明度を適用する機能を維持しながら、Tailwind クラス (bg-primary-500 や text-primary-200 など) でこれらの色を使用できるようになります。

ダーク/ライトモードテーマの next-themes パッケージ

インストール後、基本的なテーマ変数を設定する必要があります。新しい CSS ファイル (例: globals.css) を作成するか、既存の CSS ファイルに追加します:

// app/layout.jsx
:root {
  /* Add your light mode colors */
  --tw-bg-opacity: 1;

  --primary-50: 242, 242, 242;
  --primary-100: 230, 230, 230;
  --primary-200: 204, 204, 204;
  --primary-300: 179, 179, 179;
}

[data-theme='dark'] {

/* Add your dark mode colors */
  --primary-50: 13, 13, 13;
  --primary-100: 26, 26, 26;
  --primary-200: 51, 51, 51;
  --primary-300: 77, 77, 77;
}

ログイン後にコピー

この CSS は、明るいテーマと暗いテーマの基本的な色の変数を定義します。 [data-theme=’dark’] セレクターは、ダークモードがアクティブな場合、next-主題によって自動的に適用されます。

次に、layout.tsx ファイルに ThemeProvider を実装しましょう。

// app/layout.jsx

"use client";

import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

ログイン後にコピー

コンポーネントで useTheme フックを使用して、現在のテーマにアクセスし、変更できるようになりました。

"use client";

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

export default ThemeChanger

ログイン後にコピー

この設定により、ページをリロードしてもテーマが保持され、ライトモードとダークモード間のスムーズな移行が可能になります。

shadcn/ui を使用したテーマ切り替えのドロップダウン

より洗練された UI の場合、shadcn/ui のドロップダウンコンポーネントを使用してテーマの切り替えを作成できます。まず、必要なコンポーネントをインストールします:

npx shadcn-ui@latest add dropdown-menu

ログイン後にコピー

それでは、テーマのトグルを実装してみましょう:

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Sun, Moon } from "lucide-react"

export function ThemeToggle() {
  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>
  )
}

ログイン後にコピー

このコンポーネントは、ライト、ダーク、システムテーマを切り替えるオプションを含むドロップダウンメニューを作成します。このボタンは太陽と月のアイコンを使用して、現在のテーマを視覚的に表します。