feat(core): new theme editor poc (#7810)

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -15,6 +15,7 @@ import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting
 import { LanguageMenu } from '../../../language-menu';
 import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';
+import { ThemeEditorSetting } from './theme-editor-setting';
 
 export const ThemeSettings = () => {
   const t = useI18n();
@@ -172,6 +173,7 @@ export const AppearanceSettings = () => {
             />
           </SettingRow>
         ) : null}
+        {runtimeConfig.enableThemeEditor ? <ThemeEditorSetting /> : null}
       </SettingWrapper>
       {runtimeConfig.enableNewSettingUnstableApi ? (
         <SettingWrapper title={t['com.affine.appearanceSettings.date.title']()}>

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/theme-editor-setting.tsx

@@ -0,0 +1,49 @@
+import { Button } from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import { ThemeEditorService } from '@affine/core/modules/theme-editor';
+import { popupWindow } from '@affine/core/utils';
+import { apis } from '@affine/electron-api';
+import { DeleteIcon } from '@blocksuite/icons/rc';
+import { useLiveData, useService } from '@toeverything/infra';
+import { cssVar } from '@toeverything/theme';
+import { useCallback } from 'react';
+
+export const ThemeEditorSetting = () => {
+  const themeEditor = useService(ThemeEditorService);
+  const modified = useLiveData(themeEditor.modified$);
+
+  const open = useCallback(() => {
+    if (environment.isDesktop) {
+      apis?.ui.openThemeEditor().catch(console.error);
+    } else {
+      popupWindow('/theme-editor');
+    }
+  }, []);
+
+  return (
+    <SettingRow
+      name="Customize Theme"
+      desc="Edit all AFFiNE theme variables here"
+    >
+      <div style={{ display: 'flex', gap: 16 }}>
+        {modified ? (
+          <Button
+            style={{
+              color: cssVar('errorColor'),
+              borderColor: cssVar('errorColor'),
+            }}
+            prefixStyle={{
+              color: cssVar('errorColor'),
+            }}
+            onClick={() => themeEditor.reset()}
+            variant="secondary"
+            prefix={<DeleteIcon />}
+          >
+            Reset all
+          </Button>
+        ) : null}
+        <Button onClick={open}>Open Theme Editor</Button>
+      </div>
+    </SettingRow>
+  );
+};