_app.js

import '../styles/globals.css';
import { CssBaseline, ThemeProvider } from '@nextui-org/react';
import useDarkMode from 'use-dark-mode';
import { useEffect } from 'react';
import React from 'react';
import sharedTheme from '@nextui-org/react/cjs/theme/shared';


function IdentityApp({ Component, pageProps }) {
  const [theme, setTheme] = React.useState({
    ...sharedTheme
  });

  const themeChangeHandle = (isDark) => {
    if (theme.type === 'dark' && !isDark) {
      setTheme({
        ...theme,
        type: "light"
      });
    } else if (theme.type === 'light' && isDark) {
      setTheme({
        ...theme,
        type: "dark"
      });
    }
  };

  const darkMode = useDarkMode(true, {
    onChange: themeChangeHandle
  });

  useEffect(() => {
    const savedTheme = window.localStorage.getItem('darkMode') ? 'dark' : 'light';

    setTheme((prevTheme) => ({
      ...prevTheme,
      type: savedTheme || 'dark'
    }));
  }, []);

  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

export default IdentityApp