fix: reopen the application lost the theme (#3254)

frontend/.vscode/launch.json

@@ -24,7 +24,7 @@
             "program": "./lib/main.dart",
             "type": "dart",
             "env": {
-                "RUST_LOG": "trace",
+                "RUST_LOG": "debug",
             },
             "cwd": "${workspaceRoot}/appflowy_flutter"
         },

frontend/.vscode/tasks.json

@@ -279,7 +279,7 @@
       }
     },
     {
-      "label": "AF: Generate Env",
+      "label": "AF: Generate Env File",
       "type": "shell",
       "command": "dart run build_runner clean && dart run build_runner build --delete-conflicting-outputs ",
       "options": {

frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
@@ -28,6 +29,7 @@ class InitAppWidgetTask extends LaunchTask {
     final app = ApplicationWidget(
       key: ValueKey(context),
       appearanceSetting: appearanceSetting,
+      appTheme: await appTheme(appearanceSetting.theme),
       child: widget,
     );
 
@@ -73,16 +75,18 @@ class InitAppWidgetTask extends LaunchTask {
 class ApplicationWidget extends StatelessWidget {
   final Widget child;
   final AppearanceSettingsPB appearanceSetting;
+  final AppTheme appTheme;
 
   const ApplicationWidget({
     Key? key,
     required this.child,
+    required this.appTheme,
     required this.appearanceSetting,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    final cubit = AppearanceSettingsCubit(appearanceSetting)
+    final cubit = AppearanceSettingsCubit(appearanceSetting, appTheme)
       ..readLocaleWhenAppLaunch(context);
 
     return MultiBlocProvider(
@@ -137,3 +141,16 @@ class ApplicationBlocObserver extends BlocObserver {
   //   super.onEvent(bloc, event);
   // }
 }
+
+Future<AppTheme> appTheme(String themeName) async {
+  if (themeName.isEmpty) {
+    return AppTheme.fallback;
+  } else {
+    try {
+      return await AppTheme.fromName(themeName);
+    } catch (e) {
+      Log.error(e);
+      return AppTheme.fallback;
+    }
+  }
+}

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

@@ -22,11 +22,13 @@ const _white = Color(0xFFFFFFFF);
 class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
   final AppearanceSettingsPB _setting;
 
-  AppearanceSettingsCubit(AppearanceSettingsPB setting)
-      : _setting = setting,
+  AppearanceSettingsCubit(
+    AppearanceSettingsPB setting,
+    AppTheme appTheme,
+  )   : _setting = setting,
         super(
           AppearanceSettingsState.initial(
-            setting.theme,
+            appTheme,
             setting.themeMode,
             setting.font,
             setting.monospaceFont,
@@ -203,7 +205,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
   }) = _AppearanceSettingsState;
 
   factory AppearanceSettingsState.initial(
-    String themeName,
+    AppTheme appTheme,
     ThemeModePB themeModePB,
     String font,
     String monospaceFont,
@@ -212,7 +214,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
     double menuOffset,
   ) {
     return AppearanceSettingsState(
-      appTheme: AppTheme.fallback,
+      appTheme: appTheme,
       font: font,
       monospaceFont: monospaceFont,
       themeMode: _themeModeFromPB(themeModePB),

frontend/appflowy_flutter/test/bloc_test/app_setting_test/appearance_test.dart

@@ -25,7 +25,10 @@ void main() {
 
     blocTest<AppearanceSettingsCubit, AppearanceSettingsState>(
       'default theme',
-      build: () => AppearanceSettingsCubit(appearanceSetting),
+      build: () => AppearanceSettingsCubit(
+        appearanceSetting,
+        AppTheme.fallback,
+      ),
       verify: (bloc) {
         // expect(bloc.state.appTheme.info.name, "light");
         expect(bloc.state.font, 'Poppins');
@@ -36,7 +39,10 @@ void main() {
 
     blocTest<AppearanceSettingsCubit, AppearanceSettingsState>(
       'save key/value',
-      build: () => AppearanceSettingsCubit(appearanceSetting),
+      build: () => AppearanceSettingsCubit(
+        appearanceSetting,
+        AppTheme.fallback,
+      ),
       act: (bloc) {
         bloc.setKeyValue("123", "456");
       },
@@ -47,7 +53,10 @@ void main() {
 
     blocTest<AppearanceSettingsCubit, AppearanceSettingsState>(
       'remove key/value',
-      build: () => AppearanceSettingsCubit(appearanceSetting),
+      build: () => AppearanceSettingsCubit(
+        appearanceSetting,
+        AppTheme.fallback,
+      ),
       act: (bloc) {
         bloc.setKeyValue("123", null);
       },
@@ -58,7 +67,10 @@ void main() {
 
     blocTest<AppearanceSettingsCubit, AppearanceSettingsState>(
       'initial state uses fallback theme',
-      build: () => AppearanceSettingsCubit(appearanceSetting),
+      build: () => AppearanceSettingsCubit(
+        appearanceSetting,
+        AppTheme.fallback,
+      ),
       verify: (bloc) {
         expect(bloc.state.appTheme.themeName, AppTheme.fallback.themeName);
       },