import '@/styles/globals.css'; import Head from 'next/head'; import { useState, useEffect } from 'react'; function MyApp({ Component, pageProps }) { const [darkMode, setDarkMode] = useState(false); useEffect(() => { if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { setDarkMode(true); document.documentElement.classList.add('dark'); } else { setDarkMode(false); document.documentElement.classList.remove('dark'); } }, []); const toggleTheme = () => { if (darkMode) { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; setDarkMode(false); } else { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; setDarkMode(true); } }; return ( <> Nexus Dashboard | Enterprise Analytics ); } export const ThemeContext = React.createContext({ darkMode: false, toggleTheme: () => {}, }); import React from 'react'; export default MyApp;