refactor: use theme builder and adjust script

frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart

@@ -46,6 +46,8 @@ class DesktopAppearance extends BaseAppearance {
       shadow: theme.shadow,
     );
 
+    final newThemeBuilder = AppFlowyDefaultTheme();
+
     // Due to Desktop version has multiple themes, it relies on the current theme to build the ThemeData
     return ThemeData(
       visualDensity: VisualDensity.standard,
@@ -153,7 +155,7 @@ class DesktopAppearance extends BaseAppearance {
           toolbarHoverColor: theme.toolbarHoverColor,
         ),
         AppFlowyTheme(
-          themeData: buildAppFlowyDefaultThemeDataLight(),
+          themeData: isLight ? newThemeBuilder.light() : newThemeBuilder.dark(),
         ),
       ],
     );

frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart

@@ -29,13 +29,12 @@ class MobileAppearance extends BaseAppearance {
       fontWeight: FontWeight.w400,
     );
 
+    final isLight = brightness == Brightness.light;
     final codeFontStyle = getFontStyle(fontFamily: codeFontFamily);
 
-    final theme = brightness == Brightness.light
-        ? appTheme.lightTheme
-        : appTheme.darkTheme;
+    final theme = isLight ? appTheme.lightTheme : appTheme.darkTheme;
 
-    final colorTheme = brightness == Brightness.light
+    final colorTheme = isLight
         ? ColorScheme(
             brightness: brightness,
             primary: _primaryColor,
@@ -72,13 +71,11 @@ class MobileAppearance extends BaseAppearance {
             onSurface: const Color(0xffC5C6C7), // text/body color
             surfaceContainerHighest: theme.sidebarBg,
           );
-    final hintColor = brightness == Brightness.light
-        ? const Color(0x991F2329)
-        : _hintColorInDarkMode;
-    final onBackground =
-        brightness == Brightness.light ? _onBackgroundColor : Colors.white;
-    final background =
-        brightness == Brightness.light ? Colors.white : const Color(0xff121212);
+    final hintColor = isLight ? const Color(0x991F2329) : _hintColorInDarkMode;
+    final onBackground = isLight ? _onBackgroundColor : Colors.white;
+    final background = isLight ? Colors.white : const Color(0xff121212);
+
+    final newThemeBuilder = AppFlowyDefaultTheme();
 
     return ThemeData(
       useMaterial3: false,
@@ -285,7 +282,7 @@ class MobileAppearance extends BaseAppearance {
         ),
         ToolbarColorExtension.fromBrightness(brightness),
         AppFlowyTheme(
-          themeData: buildAppFlowyDefaultThemeDataLight(),
+          themeData: isLight ? newThemeBuilder.light() : newThemeBuilder.dark(),
         ),
       ],
     );

frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart

@@ -26,21 +26,24 @@ class MyApp extends StatelessWidget {
     return ValueListenableBuilder(
       valueListenable: themeMode,
       builder: (context, themeMode, child) {
+        final themeBuilder = AppFlowyDefaultTheme();
         ThemeData themeData =
             themeMode == ThemeMode.light ? ThemeData.light() : ThemeData.dark();
         themeData = themeData.copyWith(
+          visualDensity: VisualDensity.standard,
           extensions: [
             AppFlowyTheme(
               themeData: themeMode == ThemeMode.light
-                  ? buildAppFlowyDefaultThemeDataLight()
-                  : buildAppFlowyDefaultThemeDataDark(),
+                  ? themeBuilder.light()
+                  : themeBuilder.dark(),
             ),
           ],
         );
+
         return MaterialApp(
           debugShowCheckedModeBanner: false,
           title: 'AppFlowy UI Example',
-          theme: themeData.copyWith(visualDensity: VisualDensity.standard),
+          theme: themeData,
           home: const MyHomePage(
             title: 'AppFlowy UI',
           ),

frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart

@@ -1,6 +1,8 @@
 import 'package:appflowy_ui/src/theme/theme.dart';
 import 'package:flutter/material.dart';
 
+/// A class that provides a way to access the AppFlowy theme data in the widget
+/// tree. We ask [ThemeData] to the dependcy injection for us.
 class AppFlowyTheme extends ThemeExtension<AppFlowyTheme> {
   const AppFlowyTheme({required this.themeData});
 

frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/appflowy_default/primitive.dart

@@ -3,7 +3,7 @@
 // AUTO-GENERATED - DO NOT EDIT DIRECTLY
 //
 // This file is auto-generated by the generate_theme.dart script
-// Generation time: 2025-04-15T23:05:39.278903
+// Generation time: 2025-04-16T15:59:51.993312
 //
 // To modify these colors, edit the source JSON files and run the script:
 //

frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/appflowy_default/semantic.dart

@@ -3,7 +3,7 @@
 // AUTO-GENERATED - DO NOT EDIT DIRECTLY
 //
 // This file is auto-generated by the generate_theme.dart script
-// Generation time: 2025-04-15T23:05:39.288085
+// Generation time: 2025-04-16T15:59:52.002683
 //
 // To modify these colors, edit the source JSON files and run the script:
 //
@@ -12,311 +12,315 @@
 import 'package:appflowy_ui/appflowy_ui.dart';
 import 'package:flutter/material.dart';
 
-import '../builder.dart';
+import '../shared.dart';
 import 'primitive.dart';
 
-AppFlowyBaseThemeData buildAppFlowyDefaultThemeDataLight() {
-  final textStyle = AppFlowyBaseTextStyle();
-  final borderRadius = AppFlowyThemeBuilder.buildBorderRadius();
-  final spacing = AppFlowyThemeBuilder.buildSpacing();
-  final shadow = AppFlowyThemeBuilder.buildShadow(Brightness.light);
+class AppFlowyDefaultTheme implements AppFlowyThemeBuilder {
+  @override
+  AppFlowyBaseThemeData light() {
+    final textStyle = AppFlowyBaseTextStyle();
+    final borderRadius = AppFlowySharedTokens.buildBorderRadius();
+    final spacing = AppFlowySharedTokens.buildSpacing();
+    final shadow = AppFlowySharedTokens.buildShadow(Brightness.light);
 
-  final textColorScheme = AppFlowyTextColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral1000,
-    secondary: AppFlowyPrimitiveTokens.neutral600,
-    tertiary: AppFlowyPrimitiveTokens.neutral400,
-    quaternary: AppFlowyPrimitiveTokens.neutral200,
-    inverse: AppFlowyPrimitiveTokens.neutralWhite,
-    onFill: AppFlowyPrimitiveTokens.neutralWhite,
-    theme: AppFlowyPrimitiveTokens.blue500,
-    themeHover: AppFlowyPrimitiveTokens.blue600,
-    action: AppFlowyPrimitiveTokens.blue500,
-    actionHover: AppFlowyPrimitiveTokens.blue600,
-    info: AppFlowyPrimitiveTokens.blue500,
-    infoHover: AppFlowyPrimitiveTokens.blue600,
-    success: AppFlowyPrimitiveTokens.green600,
-    successHover: AppFlowyPrimitiveTokens.green700,
-    warning: AppFlowyPrimitiveTokens.orange600,
-    warningHover: AppFlowyPrimitiveTokens.orange700,
-    error: AppFlowyPrimitiveTokens.red600,
-    errorHover: AppFlowyPrimitiveTokens.red700,
-    purple: AppFlowyPrimitiveTokens.purple500,
-    purpleHover: AppFlowyPrimitiveTokens.purple600,
-  );
+    final textColorScheme = AppFlowyTextColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral1000,
+      secondary: AppFlowyPrimitiveTokens.neutral600,
+      tertiary: AppFlowyPrimitiveTokens.neutral400,
+      quaternary: AppFlowyPrimitiveTokens.neutral200,
+      inverse: AppFlowyPrimitiveTokens.neutralWhite,
+      onFill: AppFlowyPrimitiveTokens.neutralWhite,
+      theme: AppFlowyPrimitiveTokens.blue500,
+      themeHover: AppFlowyPrimitiveTokens.blue600,
+      action: AppFlowyPrimitiveTokens.blue500,
+      actionHover: AppFlowyPrimitiveTokens.blue600,
+      info: AppFlowyPrimitiveTokens.blue500,
+      infoHover: AppFlowyPrimitiveTokens.blue600,
+      success: AppFlowyPrimitiveTokens.green600,
+      successHover: AppFlowyPrimitiveTokens.green700,
+      warning: AppFlowyPrimitiveTokens.orange600,
+      warningHover: AppFlowyPrimitiveTokens.orange700,
+      error: AppFlowyPrimitiveTokens.red600,
+      errorHover: AppFlowyPrimitiveTokens.red700,
+      purple: AppFlowyPrimitiveTokens.purple500,
+      purpleHover: AppFlowyPrimitiveTokens.purple600,
+    );
 
-  final iconColorScheme = AppFlowyIconColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral1000,
-    secondary: AppFlowyPrimitiveTokens.neutral600,
-    tertiary: AppFlowyPrimitiveTokens.neutral400,
-    quaternary: AppFlowyPrimitiveTokens.neutral200,
-    white: AppFlowyPrimitiveTokens.neutralWhite,
-    purpleThick: AppFlowyPrimitiveTokens.purple500,
-    purpleThickHover: AppFlowyPrimitiveTokens.purple600,
-  );
+    final iconColorScheme = AppFlowyIconColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral1000,
+      secondary: AppFlowyPrimitiveTokens.neutral600,
+      tertiary: AppFlowyPrimitiveTokens.neutral400,
+      quaternary: AppFlowyPrimitiveTokens.neutral200,
+      white: AppFlowyPrimitiveTokens.neutralWhite,
+      purpleThick: AppFlowyPrimitiveTokens.purple500,
+      purpleThickHover: AppFlowyPrimitiveTokens.purple600,
+    );
 
-  final borderColorScheme = AppFlowyBorderColorScheme(
-    greyPrimary: AppFlowyPrimitiveTokens.neutral1000,
-    greyPrimaryHover: AppFlowyPrimitiveTokens.neutral900,
-    greySecondary: AppFlowyPrimitiveTokens.neutral800,
-    greySecondaryHover: AppFlowyPrimitiveTokens.neutral700,
-    greyTertiary: AppFlowyPrimitiveTokens.neutral300,
-    greyTertiaryHover: AppFlowyPrimitiveTokens.neutral400,
-    greyQuaternary: AppFlowyPrimitiveTokens.neutral100,
-    greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral200,
-    transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
-    themeThick: AppFlowyPrimitiveTokens.blue500,
-    themeThickHover: AppFlowyPrimitiveTokens.blue600,
-    infoThick: AppFlowyPrimitiveTokens.blue500,
-    infoThickHover: AppFlowyPrimitiveTokens.blue600,
-    successThick: AppFlowyPrimitiveTokens.green600,
-    successThickHover: AppFlowyPrimitiveTokens.green700,
-    warningThick: AppFlowyPrimitiveTokens.orange600,
-    warningThickHover: AppFlowyPrimitiveTokens.orange700,
-    errorThick: AppFlowyPrimitiveTokens.red600,
-    errorThickHover: AppFlowyPrimitiveTokens.red700,
-    purpleThick: AppFlowyPrimitiveTokens.purple500,
-    purpleThickHover: AppFlowyPrimitiveTokens.purple600,
-  );
+    final borderColorScheme = AppFlowyBorderColorScheme(
+      greyPrimary: AppFlowyPrimitiveTokens.neutral1000,
+      greyPrimaryHover: AppFlowyPrimitiveTokens.neutral900,
+      greySecondary: AppFlowyPrimitiveTokens.neutral800,
+      greySecondaryHover: AppFlowyPrimitiveTokens.neutral700,
+      greyTertiary: AppFlowyPrimitiveTokens.neutral300,
+      greyTertiaryHover: AppFlowyPrimitiveTokens.neutral400,
+      greyQuaternary: AppFlowyPrimitiveTokens.neutral100,
+      greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral200,
+      transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
+      themeThick: AppFlowyPrimitiveTokens.blue500,
+      themeThickHover: AppFlowyPrimitiveTokens.blue600,
+      infoThick: AppFlowyPrimitiveTokens.blue500,
+      infoThickHover: AppFlowyPrimitiveTokens.blue600,
+      successThick: AppFlowyPrimitiveTokens.green600,
+      successThickHover: AppFlowyPrimitiveTokens.green700,
+      warningThick: AppFlowyPrimitiveTokens.orange600,
+      warningThickHover: AppFlowyPrimitiveTokens.orange700,
+      errorThick: AppFlowyPrimitiveTokens.red600,
+      errorThickHover: AppFlowyPrimitiveTokens.red700,
+      purpleThick: AppFlowyPrimitiveTokens.purple500,
+      purpleThickHover: AppFlowyPrimitiveTokens.purple600,
+    );
 
-  final fillColorScheme = AppFlowyFillColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral1000,
-    primaryHover: AppFlowyPrimitiveTokens.neutral900,
-    secondary: AppFlowyPrimitiveTokens.neutral600,
-    secondaryHover: AppFlowyPrimitiveTokens.neutral500,
-    tertiary: AppFlowyPrimitiveTokens.neutral300,
-    tertiaryHover: AppFlowyPrimitiveTokens.neutral400,
-    quaternary: AppFlowyPrimitiveTokens.neutral100,
-    quaternaryHover: AppFlowyPrimitiveTokens.neutral200,
-    transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
-    primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey100005,
-    primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100010,
-    primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
-    primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
-    white: AppFlowyPrimitiveTokens.neutralWhite,
-    whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
-    whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
-    black: AppFlowyPrimitiveTokens.neutralBlack,
-    themeLight: AppFlowyPrimitiveTokens.blue100,
-    themeLightHover: AppFlowyPrimitiveTokens.blue200,
-    themeThick: AppFlowyPrimitiveTokens.blue500,
-    themeThickHover: AppFlowyPrimitiveTokens.blue600,
-    themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
-    infoLight: AppFlowyPrimitiveTokens.blue100,
-    infoLightHover: AppFlowyPrimitiveTokens.blue200,
-    infoThick: AppFlowyPrimitiveTokens.blue500,
-    infoThickHover: AppFlowyPrimitiveTokens.blue600,
-    successLight: AppFlowyPrimitiveTokens.green100,
-    successLightHover: AppFlowyPrimitiveTokens.green200,
-    successThick: AppFlowyPrimitiveTokens.green600,
-    successThickHover: AppFlowyPrimitiveTokens.green700,
-    warningLight: AppFlowyPrimitiveTokens.orange100,
-    warningLightHover: AppFlowyPrimitiveTokens.orange200,
-    warningThick: AppFlowyPrimitiveTokens.orange600,
-    warningThickHover: AppFlowyPrimitiveTokens.orange700,
-    errorLight: AppFlowyPrimitiveTokens.red100,
-    errorLightHover: AppFlowyPrimitiveTokens.red200,
-    errorThick: AppFlowyPrimitiveTokens.red600,
-    errorThickHover: AppFlowyPrimitiveTokens.red700,
-    errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
-    purpleLight: AppFlowyPrimitiveTokens.purple100,
-    purpleLightHover: AppFlowyPrimitiveTokens.purple200,
-    purpleThickHover: AppFlowyPrimitiveTokens.purple600,
-    purpleThick: AppFlowyPrimitiveTokens.purple500,
-  );
+    final fillColorScheme = AppFlowyFillColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral1000,
+      primaryHover: AppFlowyPrimitiveTokens.neutral900,
+      secondary: AppFlowyPrimitiveTokens.neutral600,
+      secondaryHover: AppFlowyPrimitiveTokens.neutral500,
+      tertiary: AppFlowyPrimitiveTokens.neutral300,
+      tertiaryHover: AppFlowyPrimitiveTokens.neutral400,
+      quaternary: AppFlowyPrimitiveTokens.neutral100,
+      quaternaryHover: AppFlowyPrimitiveTokens.neutral200,
+      transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
+      primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey100005,
+      primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100010,
+      primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
+      primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
+      white: AppFlowyPrimitiveTokens.neutralWhite,
+      whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
+      whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
+      black: AppFlowyPrimitiveTokens.neutralBlack,
+      themeLight: AppFlowyPrimitiveTokens.blue100,
+      themeLightHover: AppFlowyPrimitiveTokens.blue200,
+      themeThick: AppFlowyPrimitiveTokens.blue500,
+      themeThickHover: AppFlowyPrimitiveTokens.blue600,
+      themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
+      infoLight: AppFlowyPrimitiveTokens.blue100,
+      infoLightHover: AppFlowyPrimitiveTokens.blue200,
+      infoThick: AppFlowyPrimitiveTokens.blue500,
+      infoThickHover: AppFlowyPrimitiveTokens.blue600,
+      successLight: AppFlowyPrimitiveTokens.green100,
+      successLightHover: AppFlowyPrimitiveTokens.green200,
+      successThick: AppFlowyPrimitiveTokens.green600,
+      successThickHover: AppFlowyPrimitiveTokens.green700,
+      warningLight: AppFlowyPrimitiveTokens.orange100,
+      warningLightHover: AppFlowyPrimitiveTokens.orange200,
+      warningThick: AppFlowyPrimitiveTokens.orange600,
+      warningThickHover: AppFlowyPrimitiveTokens.orange700,
+      errorLight: AppFlowyPrimitiveTokens.red100,
+      errorLightHover: AppFlowyPrimitiveTokens.red200,
+      errorThick: AppFlowyPrimitiveTokens.red600,
+      errorThickHover: AppFlowyPrimitiveTokens.red700,
+      errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
+      purpleLight: AppFlowyPrimitiveTokens.purple100,
+      purpleLightHover: AppFlowyPrimitiveTokens.purple200,
+      purpleThickHover: AppFlowyPrimitiveTokens.purple600,
+      purpleThick: AppFlowyPrimitiveTokens.purple500,
+    );
 
-  final surfaceColorScheme = AppFlowySurfaceColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutralWhite,
-    overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
-  );
+    final surfaceColorScheme = AppFlowySurfaceColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutralWhite,
+      overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
+    );
 
-  final backgroundColorScheme = AppFlowyBackgroundColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutralWhite,
-    secondary: AppFlowyPrimitiveTokens.neutral100,
-    tertiary: AppFlowyPrimitiveTokens.neutral200,
-    quaternary: AppFlowyPrimitiveTokens.neutral300,
-  );
+    final backgroundColorScheme = AppFlowyBackgroundColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutralWhite,
+      secondary: AppFlowyPrimitiveTokens.neutral100,
+      tertiary: AppFlowyPrimitiveTokens.neutral200,
+      quaternary: AppFlowyPrimitiveTokens.neutral300,
+    );
 
-  final brandColorScheme = AppFlowyBrandColorScheme(
-    skyline: Color(0xFF00B5FF),
-    aqua: Color(0xFF00C8FF),
-    violet: Color(0xFF9327FF),
-    amethyst: Color(0xFF8427E0),
-    berry: Color(0xFFE3006D),
-    coral: Color(0xFFFB006D),
-    golden: Color(0xFFF7931E),
-    amber: Color(0xFFFFBD00),
-    lemon: Color(0xFFFFCE00),
-  );
+    final brandColorScheme = AppFlowyBrandColorScheme(
+      skyline: Color(0xFF00B5FF),
+      aqua: Color(0xFF00C8FF),
+      violet: Color(0xFF9327FF),
+      amethyst: Color(0xFF8427E0),
+      berry: Color(0xFFE3006D),
+      coral: Color(0xFFFB006D),
+      golden: Color(0xFFF7931E),
+      amber: Color(0xFFFFBD00),
+      lemon: Color(0xFFFFCE00),
+    );
 
-  final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
-    textHighlight: AppFlowyPrimitiveTokens.blue200,
-  );
+    final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
+      textHighlight: AppFlowyPrimitiveTokens.blue200,
+    );
 
-  return AppFlowyBaseThemeData(
-    textStyle: textStyle,
-    textColorScheme: textColorScheme,
-    borderColorScheme: borderColorScheme,
-    fillColorScheme: fillColorScheme,
-    surfaceColorScheme: surfaceColorScheme,
-    backgroundColorScheme: backgroundColorScheme,
-    iconColorScheme: iconColorScheme,
-    brandColorScheme: brandColorScheme,
-    otherColorsColorScheme: otherColorsColorScheme,
-    borderRadius: borderRadius,
-    spacing: spacing,
-    shadow: shadow,
-  );
-}
-
-AppFlowyBaseThemeData buildAppFlowyDefaultThemeDataDark() {
-  final textStyle = AppFlowyBaseTextStyle();
-  final borderRadius = AppFlowyThemeBuilder.buildBorderRadius();
-  final spacing = AppFlowyThemeBuilder.buildSpacing();
-  final shadow = AppFlowyThemeBuilder.buildShadow(Brightness.dark);
-
-  final textColorScheme = AppFlowyTextColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral200,
-    secondary: AppFlowyPrimitiveTokens.neutral400,
-    tertiary: AppFlowyPrimitiveTokens.neutral600,
-    quaternary: AppFlowyPrimitiveTokens.neutral1000,
-    inverse: AppFlowyPrimitiveTokens.neutral1000,
-    onFill: AppFlowyPrimitiveTokens.neutralWhite,
-    theme: AppFlowyPrimitiveTokens.blue500,
-    themeHover: AppFlowyPrimitiveTokens.blue600,
-    action: AppFlowyPrimitiveTokens.blue500,
-    actionHover: AppFlowyPrimitiveTokens.blue600,
-    info: AppFlowyPrimitiveTokens.blue500,
-    infoHover: AppFlowyPrimitiveTokens.blue600,
-    success: AppFlowyPrimitiveTokens.green600,
-    successHover: AppFlowyPrimitiveTokens.green700,
-    warning: AppFlowyPrimitiveTokens.orange600,
-    warningHover: AppFlowyPrimitiveTokens.orange700,
-    error: AppFlowyPrimitiveTokens.red500,
-    errorHover: AppFlowyPrimitiveTokens.red400,
-    purple: AppFlowyPrimitiveTokens.purple500,
-    purpleHover: AppFlowyPrimitiveTokens.purple600,
-  );
-
-  final iconColorScheme = AppFlowyIconColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral200,
-    secondary: AppFlowyPrimitiveTokens.neutral400,
-    tertiary: AppFlowyPrimitiveTokens.neutral600,
-    quaternary: AppFlowyPrimitiveTokens.neutral1000,
-    white: AppFlowyPrimitiveTokens.neutralWhite,
-    purpleThick: Color(0xFFFFFFFF),
-    purpleThickHover: Color(0xFFFFFFFF),
-  );
-
-  final borderColorScheme = AppFlowyBorderColorScheme(
-    greyPrimary: AppFlowyPrimitiveTokens.neutral100,
-    greyPrimaryHover: AppFlowyPrimitiveTokens.neutral200,
-    greySecondary: AppFlowyPrimitiveTokens.neutral300,
-    greySecondaryHover: AppFlowyPrimitiveTokens.neutral400,
-    greyTertiary: AppFlowyPrimitiveTokens.neutral800,
-    greyTertiaryHover: AppFlowyPrimitiveTokens.neutral700,
-    greyQuaternary: AppFlowyPrimitiveTokens.neutral1000,
-    greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral900,
-    transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
-    themeThick: AppFlowyPrimitiveTokens.blue500,
-    themeThickHover: AppFlowyPrimitiveTokens.blue600,
-    infoThick: AppFlowyPrimitiveTokens.blue500,
-    infoThickHover: AppFlowyPrimitiveTokens.blue600,
-    successThick: AppFlowyPrimitiveTokens.green600,
-    successThickHover: AppFlowyPrimitiveTokens.green700,
-    warningThick: AppFlowyPrimitiveTokens.orange600,
-    warningThickHover: AppFlowyPrimitiveTokens.orange700,
-    errorThick: AppFlowyPrimitiveTokens.red500,
-    errorThickHover: AppFlowyPrimitiveTokens.red400,
-    purpleThick: AppFlowyPrimitiveTokens.purple500,
-    purpleThickHover: AppFlowyPrimitiveTokens.purple600,
-  );
-
-  final fillColorScheme = AppFlowyFillColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral100,
-    primaryHover: AppFlowyPrimitiveTokens.neutral200,
-    secondary: AppFlowyPrimitiveTokens.neutral300,
-    secondaryHover: AppFlowyPrimitiveTokens.neutral400,
-    tertiary: AppFlowyPrimitiveTokens.neutral600,
-    tertiaryHover: AppFlowyPrimitiveTokens.neutral500,
-    quaternary: AppFlowyPrimitiveTokens.neutral1000,
-    quaternaryHover: AppFlowyPrimitiveTokens.neutral900,
-    transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
-    primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey10005,
-    primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey10010,
-    primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
-    primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
-    white: AppFlowyPrimitiveTokens.neutralWhite,
-    whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
-    whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
-    black: AppFlowyPrimitiveTokens.neutralBlack,
-    themeLight: AppFlowyPrimitiveTokens.blue100,
-    themeLightHover: AppFlowyPrimitiveTokens.blue200,
-    themeThick: AppFlowyPrimitiveTokens.blue500,
-    themeThickHover: AppFlowyPrimitiveTokens.blue400,
-    themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
-    infoLight: AppFlowyPrimitiveTokens.blue100,
-    infoLightHover: AppFlowyPrimitiveTokens.blue200,
-    infoThick: AppFlowyPrimitiveTokens.blue500,
-    infoThickHover: AppFlowyPrimitiveTokens.blue600,
-    successLight: AppFlowyPrimitiveTokens.green100,
-    successLightHover: AppFlowyPrimitiveTokens.green200,
-    successThick: AppFlowyPrimitiveTokens.green600,
-    successThickHover: AppFlowyPrimitiveTokens.green700,
-    warningLight: AppFlowyPrimitiveTokens.orange100,
-    warningLightHover: AppFlowyPrimitiveTokens.orange200,
-    warningThick: AppFlowyPrimitiveTokens.orange600,
-    warningThickHover: AppFlowyPrimitiveTokens.orange700,
-    errorLight: AppFlowyPrimitiveTokens.red100,
-    errorLightHover: AppFlowyPrimitiveTokens.red200,
-    errorThick: AppFlowyPrimitiveTokens.red600,
-    errorThickHover: AppFlowyPrimitiveTokens.red500,
-    errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
-    purpleLight: AppFlowyPrimitiveTokens.purple100,
-    purpleLightHover: AppFlowyPrimitiveTokens.purple200,
-    purpleThickHover: AppFlowyPrimitiveTokens.purple600,
-    purpleThick: AppFlowyPrimitiveTokens.purple500,
-  );
-
-  final surfaceColorScheme = AppFlowySurfaceColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral900,
-    overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
-  );
-
-  final backgroundColorScheme = AppFlowyBackgroundColorScheme(
-    primary: AppFlowyPrimitiveTokens.neutral1000,
-    secondary: AppFlowyPrimitiveTokens.neutral900,
-    tertiary: AppFlowyPrimitiveTokens.neutral800,
-    quaternary: AppFlowyPrimitiveTokens.neutral700,
-  );
-
-  final brandColorScheme = AppFlowyBrandColorScheme(
-    skyline: Color(0xFF00B5FF),
-    aqua: Color(0xFF00C8FF),
-    violet: Color(0xFF9327FF),
-    amethyst: Color(0xFF8427E0),
-    berry: Color(0xFFE3006D),
-    coral: Color(0xFFFB006D),
-    golden: Color(0xFFF7931E),
-    amber: Color(0xFFFFBD00),
-    lemon: Color(0xFFFFCE00),
-  );
-
-  final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
-    textHighlight: AppFlowyPrimitiveTokens.blue200,
-  );
-
-  return AppFlowyBaseThemeData(
-    textStyle: textStyle,
-    textColorScheme: textColorScheme,
-    borderColorScheme: borderColorScheme,
-    fillColorScheme: fillColorScheme,
-    surfaceColorScheme: surfaceColorScheme,
-    backgroundColorScheme: backgroundColorScheme,
-    iconColorScheme: iconColorScheme,
-    brandColorScheme: brandColorScheme,
-    otherColorsColorScheme: otherColorsColorScheme,
-    borderRadius: borderRadius,
-    spacing: spacing,
-    shadow: shadow,
-  );
+    return AppFlowyBaseThemeData(
+      textStyle: textStyle,
+      textColorScheme: textColorScheme,
+      borderColorScheme: borderColorScheme,
+      fillColorScheme: fillColorScheme,
+      surfaceColorScheme: surfaceColorScheme,
+      backgroundColorScheme: backgroundColorScheme,
+      iconColorScheme: iconColorScheme,
+      brandColorScheme: brandColorScheme,
+      otherColorsColorScheme: otherColorsColorScheme,
+      borderRadius: borderRadius,
+      spacing: spacing,
+      shadow: shadow,
+    );
+  }
+
+  @override
+  AppFlowyBaseThemeData dark() {
+    final textStyle = AppFlowyBaseTextStyle();
+    final borderRadius = AppFlowySharedTokens.buildBorderRadius();
+    final spacing = AppFlowySharedTokens.buildSpacing();
+    final shadow = AppFlowySharedTokens.buildShadow(Brightness.dark);
+
+    final textColorScheme = AppFlowyTextColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral200,
+      secondary: AppFlowyPrimitiveTokens.neutral400,
+      tertiary: AppFlowyPrimitiveTokens.neutral600,
+      quaternary: AppFlowyPrimitiveTokens.neutral1000,
+      inverse: AppFlowyPrimitiveTokens.neutral1000,
+      onFill: AppFlowyPrimitiveTokens.neutralWhite,
+      theme: AppFlowyPrimitiveTokens.blue500,
+      themeHover: AppFlowyPrimitiveTokens.blue600,
+      action: AppFlowyPrimitiveTokens.blue500,
+      actionHover: AppFlowyPrimitiveTokens.blue600,
+      info: AppFlowyPrimitiveTokens.blue500,
+      infoHover: AppFlowyPrimitiveTokens.blue600,
+      success: AppFlowyPrimitiveTokens.green600,
+      successHover: AppFlowyPrimitiveTokens.green700,
+      warning: AppFlowyPrimitiveTokens.orange600,
+      warningHover: AppFlowyPrimitiveTokens.orange700,
+      error: AppFlowyPrimitiveTokens.red500,
+      errorHover: AppFlowyPrimitiveTokens.red400,
+      purple: AppFlowyPrimitiveTokens.purple500,
+      purpleHover: AppFlowyPrimitiveTokens.purple600,
+    );
+
+    final iconColorScheme = AppFlowyIconColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral200,
+      secondary: AppFlowyPrimitiveTokens.neutral400,
+      tertiary: AppFlowyPrimitiveTokens.neutral600,
+      quaternary: AppFlowyPrimitiveTokens.neutral1000,
+      white: AppFlowyPrimitiveTokens.neutralWhite,
+      purpleThick: Color(0xFFFFFFFF),
+      purpleThickHover: Color(0xFFFFFFFF),
+    );
+
+    final borderColorScheme = AppFlowyBorderColorScheme(
+      greyPrimary: AppFlowyPrimitiveTokens.neutral100,
+      greyPrimaryHover: AppFlowyPrimitiveTokens.neutral200,
+      greySecondary: AppFlowyPrimitiveTokens.neutral300,
+      greySecondaryHover: AppFlowyPrimitiveTokens.neutral400,
+      greyTertiary: AppFlowyPrimitiveTokens.neutral800,
+      greyTertiaryHover: AppFlowyPrimitiveTokens.neutral700,
+      greyQuaternary: AppFlowyPrimitiveTokens.neutral1000,
+      greyQuaternaryHover: AppFlowyPrimitiveTokens.neutral900,
+      transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
+      themeThick: AppFlowyPrimitiveTokens.blue500,
+      themeThickHover: AppFlowyPrimitiveTokens.blue600,
+      infoThick: AppFlowyPrimitiveTokens.blue500,
+      infoThickHover: AppFlowyPrimitiveTokens.blue600,
+      successThick: AppFlowyPrimitiveTokens.green600,
+      successThickHover: AppFlowyPrimitiveTokens.green700,
+      warningThick: AppFlowyPrimitiveTokens.orange600,
+      warningThickHover: AppFlowyPrimitiveTokens.orange700,
+      errorThick: AppFlowyPrimitiveTokens.red500,
+      errorThickHover: AppFlowyPrimitiveTokens.red400,
+      purpleThick: AppFlowyPrimitiveTokens.purple500,
+      purpleThickHover: AppFlowyPrimitiveTokens.purple600,
+    );
+
+    final fillColorScheme = AppFlowyFillColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral100,
+      primaryHover: AppFlowyPrimitiveTokens.neutral200,
+      secondary: AppFlowyPrimitiveTokens.neutral300,
+      secondaryHover: AppFlowyPrimitiveTokens.neutral400,
+      tertiary: AppFlowyPrimitiveTokens.neutral600,
+      tertiaryHover: AppFlowyPrimitiveTokens.neutral500,
+      quaternary: AppFlowyPrimitiveTokens.neutral1000,
+      quaternaryHover: AppFlowyPrimitiveTokens.neutral900,
+      transparent: AppFlowyPrimitiveTokens.neutralAlphaWhite0,
+      primaryAlpha5: AppFlowyPrimitiveTokens.neutralAlphaGrey10005,
+      primaryAlpha5Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey10010,
+      primaryAlpha80: AppFlowyPrimitiveTokens.neutralAlphaGrey100080,
+      primaryAlpha80Hover: AppFlowyPrimitiveTokens.neutralAlphaGrey100070,
+      white: AppFlowyPrimitiveTokens.neutralWhite,
+      whiteAlpha: AppFlowyPrimitiveTokens.neutralAlphaWhite20,
+      whiteAlphaHover: AppFlowyPrimitiveTokens.neutralAlphaWhite30,
+      black: AppFlowyPrimitiveTokens.neutralBlack,
+      themeLight: AppFlowyPrimitiveTokens.blue100,
+      themeLightHover: AppFlowyPrimitiveTokens.blue200,
+      themeThick: AppFlowyPrimitiveTokens.blue500,
+      themeThickHover: AppFlowyPrimitiveTokens.blue400,
+      themeSelect: AppFlowyPrimitiveTokens.blueAlphaBlue50015,
+      infoLight: AppFlowyPrimitiveTokens.blue100,
+      infoLightHover: AppFlowyPrimitiveTokens.blue200,
+      infoThick: AppFlowyPrimitiveTokens.blue500,
+      infoThickHover: AppFlowyPrimitiveTokens.blue600,
+      successLight: AppFlowyPrimitiveTokens.green100,
+      successLightHover: AppFlowyPrimitiveTokens.green200,
+      successThick: AppFlowyPrimitiveTokens.green600,
+      successThickHover: AppFlowyPrimitiveTokens.green700,
+      warningLight: AppFlowyPrimitiveTokens.orange100,
+      warningLightHover: AppFlowyPrimitiveTokens.orange200,
+      warningThick: AppFlowyPrimitiveTokens.orange600,
+      warningThickHover: AppFlowyPrimitiveTokens.orange700,
+      errorLight: AppFlowyPrimitiveTokens.red100,
+      errorLightHover: AppFlowyPrimitiveTokens.red200,
+      errorThick: AppFlowyPrimitiveTokens.red600,
+      errorThickHover: AppFlowyPrimitiveTokens.red500,
+      errorSelect: AppFlowyPrimitiveTokens.redAlphaRed50010,
+      purpleLight: AppFlowyPrimitiveTokens.purple100,
+      purpleLightHover: AppFlowyPrimitiveTokens.purple200,
+      purpleThickHover: AppFlowyPrimitiveTokens.purple600,
+      purpleThick: AppFlowyPrimitiveTokens.purple500,
+    );
+
+    final surfaceColorScheme = AppFlowySurfaceColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral900,
+      overlay: AppFlowyPrimitiveTokens.neutralAlphaBlack60,
+    );
+
+    final backgroundColorScheme = AppFlowyBackgroundColorScheme(
+      primary: AppFlowyPrimitiveTokens.neutral1000,
+      secondary: AppFlowyPrimitiveTokens.neutral900,
+      tertiary: AppFlowyPrimitiveTokens.neutral800,
+      quaternary: AppFlowyPrimitiveTokens.neutral700,
+    );
+
+    final brandColorScheme = AppFlowyBrandColorScheme(
+      skyline: Color(0xFF00B5FF),
+      aqua: Color(0xFF00C8FF),
+      violet: Color(0xFF9327FF),
+      amethyst: Color(0xFF8427E0),
+      berry: Color(0xFFE3006D),
+      coral: Color(0xFFFB006D),
+      golden: Color(0xFFF7931E),
+      amber: Color(0xFFFFBD00),
+      lemon: Color(0xFFFFCE00),
+    );
+
+    final otherColorsColorScheme = AppFlowyOtherColorsColorScheme(
+      textHighlight: AppFlowyPrimitiveTokens.blue200,
+    );
+
+    return AppFlowyBaseThemeData(
+      textStyle: textStyle,
+      textColorScheme: textColorScheme,
+      borderColorScheme: borderColorScheme,
+      fillColorScheme: fillColorScheme,
+      surfaceColorScheme: surfaceColorScheme,
+      backgroundColorScheme: backgroundColorScheme,
+      iconColorScheme: iconColorScheme,
+      brandColorScheme: brandColorScheme,
+      otherColorsColorScheme: otherColorsColorScheme,
+      borderRadius: borderRadius,
+      spacing: spacing,
+      shadow: shadow,
+    );
+  }
 }

frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/custom/custom_theme.dart

@@ -0,0 +1,23 @@
+import 'package:appflowy_ui/appflowy_ui.dart';
+
+class CustomTheme implements AppFlowyThemeBuilder {
+  const CustomTheme({
+    required this.lightThemeJson,
+    required this.darkThemeJson,
+  });
+
+  final Map<String, dynamic> lightThemeJson;
+  final Map<String, dynamic> darkThemeJson;
+
+  @override
+  AppFlowyBaseThemeData dark() {
+    // TODO: implement dark
+    throw UnimplementedError();
+  }
+
+  @override
+  AppFlowyBaseThemeData light() {
+    // TODO: implement light
+    throw UnimplementedError();
+  }
+}

frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/shared.dart

@@ -21,8 +21,8 @@ class AppFlowyBorderRadiusConstant {
   static const double radius600 = 20;
 }
 
-class AppFlowyThemeBuilder {
-  const AppFlowyThemeBuilder();
+class AppFlowySharedTokens {
+  const AppFlowySharedTokens();
 
   static AppFlowyBorderRadius buildBorderRadius() {
     return AppFlowyBorderRadius(

frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/base_theme.dart

@@ -66,3 +66,10 @@ class AppFlowyBaseThemeData {
     );
   }
 }
+
+abstract class AppFlowyThemeBuilder {
+  const AppFlowyThemeBuilder();
+
+  AppFlowyBaseThemeData light();
+  AppFlowyBaseThemeData dark();
+}

frontend/appflowy_flutter/packages/appflowy_ui/script/generate_theme.dart

@@ -90,34 +90,20 @@ void generateSemantic() {
 import 'package:appflowy_ui/appflowy_ui.dart';
 import 'package:flutter/material.dart';
 
-import '../builder.dart';
+import '../shared.dart';
 import 'primitive.dart';
 
-class AppFlowyThemeData implements AppFlowyBaseThemeData {
-  const AppFlowyThemeData._({
-    required this.textStyle,
-    required this.textColorScheme,
-    required this.borderColorScheme,
-    required this.fillColorScheme,
-    required this.surfaceColorScheme,
-    required this.borderRadius,
-    required this.spacing,
-    required this.shadow,
-    required this.brandColorScheme,
-    required this.iconColorScheme,
-    required this.backgroundColorScheme,
-    required this.otherColorsColorScheme,
-  });
-''');
+class AppFlowyDefaultTheme implements AppFlowyThemeBuilder {''');
 
   // 3. Process light mode semantic tokens
   void writeThemeFactory(String brightness, Map<String, dynamic> jsonData) {
     buffer.writeln('''
-  factory AppFlowyThemeData.$brightness() {
+  @override
+  AppFlowyBaseThemeData $brightness() {
     final textStyle = AppFlowyBaseTextStyle();
-    final borderRadius = themeBuilder.buildBorderRadius();
-    final spacing = themeBuilder.buildSpacing();
-    final shadow = themeBuilder.buildShadow(Brightness.$brightness);''');
+    final borderRadius = AppFlowySharedTokens.buildBorderRadius();
+    final spacing = AppFlowySharedTokens.buildSpacing();
+    final shadow = AppFlowySharedTokens.buildShadow(Brightness.$brightness);''');
 
     jsonData.forEach((categoryName, categoryData) {
       if (categoryData is Map<String, dynamic>) {
@@ -165,7 +151,7 @@ class AppFlowyThemeData implements AppFlowyBaseThemeData {
 
     buffer.writeln();
     buffer.writeln('''
-    return AppFlowyThemeData._(
+    return AppFlowyBaseThemeData(
       textStyle: textStyle,
       textColorScheme: textColorScheme,
       borderColorScheme: borderColorScheme,
@@ -185,46 +171,6 @@ class AppFlowyThemeData implements AppFlowyBaseThemeData {
   writeThemeFactory('light', lightJsonData);
   buffer.writeln();
   writeThemeFactory('dark', darkJsonData);
-
-  buffer.writeln('''
-
-  static const AppFlowyThemeBuilder themeBuilder = AppFlowyThemeBuilder();
-
-  @override
-  final AppFlowyBaseTextStyle textStyle;
-
-  @override
-  final AppFlowyTextColorScheme textColorScheme;
-
-  @override
-  final AppFlowyBorderColorScheme borderColorScheme;
-
-  @override
-  final AppFlowyFillColorScheme fillColorScheme;
-
-  @override
-  final AppFlowySurfaceColorScheme surfaceColorScheme;
-
-  @override
-  final AppFlowyBorderRadius borderRadius;
-
-  @override
-  final AppFlowySpacing spacing;
-
-  @override
-  final AppFlowyShadow shadow;
-
-  @override
-  final AppFlowyBrandColorScheme brandColorScheme;
-
-  @override
-  final AppFlowyIconColorScheme iconColorScheme;
-
-  @override
-  final AppFlowyBackgroundColorScheme backgroundColorScheme;
-
-  @override
-  final AppFlowyOtherColorsColorScheme otherColorsColorScheme;''');
   buffer.writeln('}');
 
   // 4. Write the output to a Dart file.