ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 変数を使用して Next.js にダーク モードを適用する
CSS 変数を使用して Next.js にダーク モードを適用する
- WBOYオリジナル
- 2024-08-10 20:37:02709ブラウズ
今日の 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カラージェネレーター
明るいモードと暗いモードの両方で調和のとれたカラー パレットを作成するには、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>
)
}
このコンポーネントは、ライト、ダーク、システム テーマを切り替えるオプションを含むドロップダウン メニューを作成します。このボタンは太陽と月のアイコンを使用して、現在のテーマを視覚的に表します。
結論
CSS 変数、Tailwind CSS、next-主題を使用して Next.js アプリケーションにダーク モードを実装すると、柔軟で保守可能なソリューションが提供されます。私たちが達成したことの概要は次のとおりです:
- 実用性を第一に考えたスタイリングのために Tailwind CSS をセットアップしました。
- Orea Color Generator を使用して、明るいモードと暗いモードの両方で一貫したカラー パレットを作成しました。
- ネクストテーマを使用してテーマの切り替えを実装し、ライトモードとダークモードを簡単に切り替えられるようにしました。
- shadcn/ui を使用して洗練されたテーマ切り替えコンポーネントを作成し、ユーザー エクスペリエンスを向上させました。
CSS 変数を活用することで、保守と拡張が簡単なシステムを作成しました。 next-theme を使用すると、テーマの設定が確実に保持され、ユーザーにシームレスなエクスペリエンスが提供されます。
ダーク モードを実装するときは、次の重要な点に注意してください:
- アクセシビリティを常に考慮し、両方のテーマで十分なコントラストを確保してください。
- ライト モードとダーク モードの両方でアプリケーションを徹底的にテストします。
- ユーザーのシステム設定を尊重するために、prefers-color-scheme メディア クエリの使用を検討してください。
- すべてのコンポーネントとページにわたってテーマに一貫性を持たせてください。
この設定を使用すると、Next.js アプリケーションで最新の使いやすいダーク モード オプションを提供する準備が整います。コーディングを楽しんでください!
以上がCSS 変数を使用して Next.js にダーク モードを適用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。