diff --git a/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart b/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart
index e35bb29843..ca00323cdc 100644
--- a/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart
+++ b/frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart
@@ -251,7 +251,7 @@ class _ApplicationWidgetState extends State<ApplicationWidget> {
                           .orDefault(defaultFontFamily)
                           .fontFamilyName;
 
-                      return AppFlowyTheme(
+                      return AnimatedAppFlowyTheme(
                         data: brightness == Brightness.light
                             ? themeBuilder.light(fontFamily: fontFamily)
                             : themeBuilder.dark(fontFamily: fontFamily),
diff --git a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart
index b8dc5a1149..26e45ca8f1 100644
--- a/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart
+++ b/frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart
@@ -132,7 +132,7 @@ class _AnimatedThemeState
   @override
   Widget build(BuildContext context) {
     return AppFlowyTheme(
-      data: widget.data,
+      data: data!.evaluate(animation),
       child: widget.child,
     );
   }