Implementing a Dark Mode Toggle with Next.js and styled-components

import { ThemeProvider, createGlobalStyle } from 'styled-components';
import { useState, useEffect } from 'react';

// Define our theme objects for light and dark modes
const lightTheme = {
  body: '#FFF',
  text: '#363537'
};

const darkTheme = {
  body: '#363537',
  text: '#FAFAFA'
};

// Create a global style that will be altered based on the current theme
const GlobalStyle = createGlobalStyle`
  body {
    background-color: ${props => props.theme.body};
    color: ${props => props.theme.text};
    transition: all 0.25s linear;
  }
`;

function MyApp({ Component, pageProps }) {
  // State to hold the current theme
  const [theme, setTheme] = useState('light');

  // Function to toggle the theme state
  const toggleTheme = () => {
    theme === 'light' ? setTheme('dark') : setTheme('light');
  };

  // Use useEffect to set the theme based on user preference on mount
  useEffect(() => {
    const localTheme = window.localStorage.getItem('theme');
    localTheme && setTheme(localTheme);
  }, []);

  // Save the user's theme preference
  useEffect(() => {
    window.localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <GlobalStyle />
      <button onClick={toggleTheme}>Toggle Theme</button>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;