diff --git a/src/components/header.jsx b/src/components/header.jsx index 8bf66f5a..601e4235 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -10,6 +10,13 @@ import logo from '../images/mdg.png'; const Header = (props) => { const { heading } = props; + // Theme state: 'light' or 'dark'. Persisted to localStorage. + const [theme, setTheme] = useState(() => { + if (typeof window === 'undefined') return 'light'; + const stored = window.localStorage.getItem('theme'); + if (stored) return stored; + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + }); const [stats, setstats] = useState({ starsCount: 0, forksCount: 0, @@ -37,7 +44,7 @@ const Header = (props) => { } }; useEffect(() => { - fetchData(); + fetchData(); setInterval(fetchData, 60000); gsap.set('.star, .fork', { @@ -52,15 +59,26 @@ const Header = (props) => { }); }, []); + // Apply theme to document root and persist selection + useEffect(() => { + if (typeof document !== 'undefined') { + if (theme === 'dark') document.documentElement.classList.add('dark'); + else document.documentElement.classList.remove('dark'); + } + if (typeof window !== 'undefined') window.localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark')); + return (
-

+

github profile markdown generator logo
{heading}

-
+
{ {stats.starsCount}
+ - - - + diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index fa6af16c..62f646ce 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -108,3 +108,20 @@ .markdown .highlight pre { @apply bg-gray-100 !important; } + +/* Dark mode overrides */ +.dark .markdown { + @apply text-gray-100; +} + +.dark body, .dark .min-h-screen { + background-color: #0f172a; /* slate-900 */ +} + +.dark .border-gray-900 { + border-color: #e5e7eb; +} + +.dark .bg-gray-100 { + background-color: #0b1220; /* darker panel */ +} diff --git a/tailwind.config.js b/tailwind.config.js index 0fbc5f1d..7c4d26ba 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ module.exports = { purge: [], + darkMode: 'class', // enable class-based dark mode theme: { extend: {}, fontSize: {