feat: add theme change handler

src/components/simple-counter/index.ts

@@ -1,7 +1,6 @@
-import { LitElement, css, html, unsafeCSS } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import * as React from 'react';
-import { theme } from '@/styles';
 
 export const tagName = 'simple-counter';
 
@@ -28,7 +27,7 @@ export class Counter extends LitElement {
   static styles = css`
     .counter-container {
       display: flex;
-      color: ${unsafeCSS(theme.colors.primary)};
+      color: var(--color-primary);
     }
     button {
       margin: 0 5px;

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>
   );
 };

src/styles/hooks.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { ThemeContext } from './themeProvider';
+
+export const useTheme = () => useContext(ThemeContext);

src/styles/index.ts

@@ -1 +1,6 @@
-export * from './theme';
+export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
+
+export { styled } from './styled';
+export { ThemeProvider } from './themeProvider';
+export { lightTheme, darkTheme } from './theme';
+export { useTheme } from './hooks';

src/styles/styled.ts

@@ -0,0 +1,3 @@
+import emotionStyled from '@emotion/styled';
+
+export const styled = emotionStyled;

src/styles/theme.ts

@@ -1,17 +1,20 @@
 import '@emotion/react';
+import { AffineTheme } from './types';
 
-interface AffineTheme {
-  colors: {
-    primary: string;
-  };
-}
-
-export const theme: AffineTheme = {
+export const lightTheme: AffineTheme = {
   colors: {
     primary: '#0070f3',
   },
 };
 
-declare module '@emotion/react' {
-  export interface Theme extends AffineTheme {}
-}
+export const darkTheme: AffineTheme = {
+  colors: {
+    primary: '#000',
+  },
+};
+
+export const globalThemeConstant = (theme: AffineTheme) => {
+  return {
+    '--color-primary': theme.colors.primary,
+  };
+};

src/styles/themeProvider.tsx

@@ -0,0 +1,39 @@
+import {
+  ThemeProvider as EmotionThemeProvider,
+  Global,
+  css,
+} from '@emotion/react';
+import { createContext, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { ThemeMode, ThemeProviderProps, ThemeProviderValue } from './types';
+import { lightTheme, darkTheme, globalThemeConstant } from './theme';
+
+export const ThemeContext = createContext<ThemeProviderValue>({
+  mode: 'light',
+  changeMode: () => {},
+  theme: lightTheme,
+});
+
+export const ThemeProvider = ({
+  defaultMode = 'light',
+  children,
+}: PropsWithChildren<ThemeProviderProps>) => {
+  const [mode, setMode] = useState<ThemeMode>(defaultMode);
+  const theme = mode === 'dark' ? darkTheme : lightTheme;
+  const changeMode = (themeMode: ThemeMode) => {
+    setMode(themeMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ mode, changeMode, theme }}>
+      <Global
+        styles={css`
+          :root {
+            ${globalThemeConstant(theme)}
+          }
+        `}
+      />
+      <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
+    </ThemeContext.Provider>
+  );
+};

src/styles/types.ts

@@ -0,0 +1,21 @@
+export type ThemeMode = 'light' | 'dark';
+
+export type ThemeProviderProps = {
+  defaultMode?: ThemeMode;
+};
+
+export type ThemeProviderValue = {
+  theme: AffineTheme;
+  mode: ThemeMode;
+  changeMode: (newMode: ThemeMode) => void;
+};
+
+export interface AffineTheme {
+  colors: {
+    primary: string;
+  };
+}
+
+declare module '@emotion/react' {
+  export interface Theme extends AffineTheme {}
+}