feat: add theme change handler

src/pages/_app.tsx

@@ -1,12 +1,11 @@
 import type { AppProps } from 'next/app';
-import { ThemeProvider } from '@emotion/react';
-import { theme } from '../styles';
+import { ThemeProvider } from '@/styles';
 
 import '../../public/globals.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider>
       <Component {...pageProps} />
     </ThemeProvider>
   );

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import type { NextPage } from 'next';
-import styled from '@emotion/styled';
-
+import { styled, useTheme } from '@/styles';
 import '@/components/simple-counter';
 
 const Button = styled('div')(({ theme }) => {
@@ -10,10 +9,18 @@ const Button = styled('div')(({ theme }) => {
 });
 
 const Home: NextPage = () => {
+  const { changeMode, mode } = useTheme();
   return (
     <div>
       <Button>A button use the theme styles</Button>
       <simple-counter name="A counter created by web component" />
+      <button
+        onClick={() => {
+          changeMode(mode === 'dark' ? 'light' : 'dark');
+        }}
+      >
+        current theme mode :{mode}(click to change)
+      </button>
     </div>
   );
 };