الخطوة 1: إعداد Tailwind
// tailwind.config.js
module.exports = {
darkMode: 'class', // or 'media' for system preference
// ...
}
الخطوة 2: إنشاء مزوّد السمة (Theme Provider)
'use client';
import { createContext, useContext, useEffect, useState } from 'react';
const ThemeContext = createContext({
theme: 'light',
toggleTheme: () => {},
});
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
useEffect(() => {
// Check localStorage or system preference
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initial = saved || (prefersDark ? 'dark' : 'light');
setTheme(initial);
document.documentElement.classList.toggle('dark', initial === 'dark');
}, []);
const toggleTheme = () => {
const newTheme = theme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
document.documentElement.classList.toggle('dark', newTheme === 'dark');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
export const useTheme = () => useContext(ThemeContext);
الخطوة 3: زر تبديل السمة
'use client';
import { useTheme } from './ThemeProvider';
export function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
return (
<button
onClick={toggleTheme}
className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700"
>
{theme === 'light' ? '🌙' : '☀️'}
</button>
);
}
الخطوة 4: استخدام فئات الوضع الداكن
<div className="bg-white dark:bg-gray-900">
<h1 className="text-gray-900 dark:text-white">
Hello World
</h1>
<p className="text-gray-600 dark:text-gray-300">
This changes based on theme
</p>
</div>
الخطوة 5: منع الوميض (Flash)
// Add to <head> in layout
<script dangerouslySetInnerHTML={{
__html: `
(function() {
const theme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.classList.toggle('dark', theme === 'dark');
})();
`
}} />
التعليقات (0)
اترك تعليقًا
لا توجد تعليقات بعد. كن أول من يشارك أفكاره!