feat: add affine next theme (#1867)

apps/electron/yarn.lock

@@ -75,6 +75,7 @@ __metadata:
     clsx: ^1.2.1
     concurrently: ^8.0.1
     jest-mock: ^29.5.0
+    kebab-case: ^1.0.2
     lit: ^2.7.2
     react: ^18.2.0
     react-dnd: ^16.0.1
@@ -12289,6 +12290,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kebab-case@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "kebab-case@npm:1.0.2"
+  checksum: bf01164e11c544ee9b3aa1a91c2e7d6aa6b3356b834a5e885d43f36db14aae5d347cd4a298a566133321b82fde6bac6b597f148ac19bfd3d3fc81e1034a79729
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.0.0":
   version: 4.5.2
   resolution: "keyv@npm:4.5.2"

apps/web/src/providers/ThemeProvider.tsx

@@ -1,11 +1,19 @@
-import type { AffineTheme, ThemeProviderProps } from '@affine/component';
+import type {
+  AffineNextCssVariables,
+  AffineNextLightColorScheme,
+  AffineTheme,
+  ThemeProviderProps,
+} from '@affine/component';
 import {
   getDarkTheme,
   getLightTheme,
   globalThemeVariables,
+  nextDarkColorScheme,
+  nextLightColorScheme,
   ThemeProvider as AffineThemeProvider,
 } from '@affine/component';
 import { GlobalStyles } from '@mui/material';
+import kebabCase from 'kebab-case';
 import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
 import type React from 'react';
@@ -15,7 +23,15 @@ import { useCurrentMode } from '../hooks/current/use-current-mode';
 
 const ThemeInjector = memo<{
   themeStyle: AffineTheme;
-}>(function ThemeInjector({ themeStyle }) {
+  nextThemeStyle: AffineNextLightColorScheme;
+}>(function ThemeInjector({ themeStyle, nextThemeStyle }) {
+  const injectAffineNextTheme = useMemo(() => {
+    return Object.entries(nextThemeStyle).reduce((variables, [key, value]) => {
+      variables[`--affine-${kebabCase(key)}` as keyof AffineNextCssVariables] =
+        value;
+      return variables;
+    }, {} as AffineNextCssVariables);
+  }, [nextThemeStyle]);
   return (
     <GlobalStyles
       styles={{
@@ -24,6 +40,7 @@ const ThemeInjector = memo<{
         // },
         ':root': {
           ...globalThemeVariables(themeStyle),
+          ...injectAffineNextTheme,
         },
         html: {
           fontFamily: themeStyle.font.family,
@@ -56,6 +73,9 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
       >
         <ThemeInjector
           themeStyle={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
+          nextThemeStyle={
+            deferTheme === 'dark' ? nextDarkColorScheme : nextLightColorScheme
+          }
         />
         {children}
       </AffineThemeProvider>