[PR #7771] [MERGED] feat: appflowy theme lerp #8100

New issue

Closed

opened 2026-03-23 23:22:37 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:22:37 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7771
Author: @richardshiue
Created: 4/17/2025
Status: ✅ Merged
Merged: 4/18/2025
Merged by: @LucasXu0

Base: feat/custom-prompt ← Head: feat/appflowy-theme-lerp

📝 Commits (8)

99e18ce feat: implement appflowy theme lerping
a66fa03 refactor: use theme builder and adjust script
338fb2a chore: rename theme data
1c03b4d chore: add doc comments
74caa39 chore: rename function
8b303b7 chore: don't use theme extension
44c341d chore: use the animated appflowy theme widget
2f90dcd chore: clean up inherited theme

📊 Changes

21 files changed (+465 additions, -220 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart (+27 -20)
📝 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart (+6 -11)
📝 frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart (+8 -4)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/textfield/textfield.dart (+2 -2)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart (+93 -12)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/appflowy_default/primitive.dart (+1 -1)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/appflowy_default/semantic.dart (+15 -66)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/custom/custom_theme.dart (+23 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/shared.dart (+5 -5)
➖ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/base_theme.dart (+0 -33)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/background_color_scheme.dart (+12 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/border_color_scheme.dart (+36 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/brand_color_scheme.dart (+17 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/fill_color_scheme.dart (+59 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/icon_color_scheme.dart (+16 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/other_color_scheme.dart (+9 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/surface_color_scheme.dart (+10 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/text_color_scheme.dart (+28 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/theme_data.dart (+86 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/theme.dart (+1 -1)

...and 1 more files

📄 Description

Supports lerping when changing between themes or when changing between light and dark mode.

https://github.com/user-attachments/assets/b1fb1dee-2d54-4d3f-9d2d-16345f0574ce

https://github.com/user-attachments/assets/a137192a-3629-40f1-a899-82649401194e

To support this, I need to make the following changes:

rename AppFlowyBaseThemeData to AppFlowyThemeData. It is no longer an interface, but rather a class that different themes and their respective brightness variants should instantiate.
to support the above, the script to generate the theme has been modified as well. Built in themes should implement the AppFlowyThemeBuilder interface
Use an AnimatedAppFlowyTheme widget to support lerping, which then encapsulates the original AppFlowyTheme that provides DI

Other misc changes:

rename the original AppFlowyThemeBuilder to AppFlowySharedTokens to avoid naming conflicts

Feature Preview

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

Summary by Sourcery

Refactor AppFlowy theme system to support theme interpolation (lerping) and improve theme management by using Material's ThemeExtension

New Features:

Add support for theme interpolation between light and dark modes
Implement lerp method for color schemes to enable smooth theme transitions

Enhancements:

Migrate theme management from custom InheritedWidget to Material's ThemeExtension
Rename and restructure theme-related classes for better clarity
Simplify theme retrieval using Theme.of(context).extension

Chores:

Rename AppFlowyBaseThemeData to AppFlowyThemeData
Rename AppFlowyThemeBuilder to AppFlowySharedTokens
Update theme generation script to support new theme structure

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/7771 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 4/17/2025 **Status:** ✅ Merged **Merged:** 4/18/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `feat/custom-prompt` ← **Head:** `feat/appflowy-theme-lerp` --- ### 📝 Commits (8) - [`99e18ce`](https://github.com/AppFlowy-IO/AppFlowy/commit/99e18cef5b4625426210118f8d8c759b4b33e830) feat: implement appflowy theme lerping - [`a66fa03`](https://github.com/AppFlowy-IO/AppFlowy/commit/a66fa0313f657b8ef6c146fb10e3c75967c3a778) refactor: use theme builder and adjust script - [`338fb2a`](https://github.com/AppFlowy-IO/AppFlowy/commit/338fb2ac7ed5c33be3338d94f2c4ce0162dca6be) chore: rename theme data - [`1c03b4d`](https://github.com/AppFlowy-IO/AppFlowy/commit/1c03b4dbd888889048bba13aea7a5a5172875d31) chore: add doc comments - [`74caa39`](https://github.com/AppFlowy-IO/AppFlowy/commit/74caa39655621d6cb94d90321f5978bf6be5a16b) chore: rename function - [`8b303b7`](https://github.com/AppFlowy-IO/AppFlowy/commit/8b303b7e9da60b6a36cde155815bf7b9e6eeedd2) chore: don't use theme extension - [`44c341d`](https://github.com/AppFlowy-IO/AppFlowy/commit/44c341de616fac65be3e0ea43a0f35c6cf0919c5) chore: use the animated appflowy theme widget - [`2f90dcd`](https://github.com/AppFlowy-IO/AppFlowy/commit/2f90dcdd710bc2ef14a5b1a077e2f20b4debd0b7) chore: clean up inherited theme ### 📊 Changes **21 files changed** (+465 additions, -220 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/startup/tasks/app_widget.dart` (+27 -20) 📝 `frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart` (+6 -11) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart` (+8 -4) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/textfield/textfield.dart` (+2 -2) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/appflowy_theme.dart` (+93 -12) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/appflowy_default/primitive.dart` (+1 -1) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/appflowy_default/semantic.dart` (+15 -66) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/custom/custom_theme.dart` (+23 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/data/shared.dart` (+5 -5) ➖ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/base_theme.dart` (+0 -33) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/background_color_scheme.dart` (+12 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/border_color_scheme.dart` (+36 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/brand_color_scheme.dart` (+17 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/fill_color_scheme.dart` (+59 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/icon_color_scheme.dart` (+16 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/other_color_scheme.dart` (+9 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/surface_color_scheme.dart` (+10 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/color_scheme/text_color_scheme.dart` (+28 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/definition/theme_data.dart` (+86 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/theme/theme.dart` (+1 -1) _...and 1 more files_ </details> ### 📄 Description Supports lerping when changing between themes or when changing between light and dark mode. https://github.com/user-attachments/assets/b1fb1dee-2d54-4d3f-9d2d-16345f0574ce https://github.com/user-attachments/assets/a137192a-3629-40f1-a899-82649401194e To support this, I need to make the following changes: - rename `AppFlowyBaseThemeData` to `AppFlowyThemeData`. It is no longer an interface, but rather a class that different themes and their respective brightness variants should instantiate. - to support the above, the script to generate the theme has been modified as well. Built in themes should implement the `AppFlowyThemeBuilder` interface - Use an `AnimatedAppFlowyTheme` widget to support lerping, which then encapsulates the original `AppFlowyTheme` that provides DI Other misc changes: - rename the original `AppFlowyThemeBuilder` to `AppFlowySharedTokens` to avoid naming conflicts ### Feature Preview  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [x] All existing tests are passing. ## Summary by Sourcery Refactor AppFlowy theme system to support theme interpolation (lerping) and improve theme management by using Material's ThemeExtension New Features: - Add support for theme interpolation between light and dark modes - Implement lerp method for color schemes to enable smooth theme transitions Enhancements: - Migrate theme management from custom InheritedWidget to Material's ThemeExtension - Rename and restructure theme-related classes for better clarity - Simplify theme retrieval using Theme.of(context).extension Chores: - Rename AppFlowyBaseThemeData to AppFlowyThemeData - Rename AppFlowyThemeBuilder to AppFlowySharedTokens - Update theme generation script to support new theme structure --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>