[PR #1407] [MERGED] refactor: appflowy theme system pt. 1 #4717

New issue

Closed

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

mirror commented

2026-03-23 22:15:30 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/1407
Author: @richardshiue
Created: 10/31/2022
Status: ✅ Merged
Merged: 11/10/2022
Merged by: @appflowy

Base: main ← Head: port-to-bloc-theme

📝 Commits (10+)

ed322ce refactor: port theme provider to bloc
69eff9f refactor: port from custom theme type enum to material design's brightness
abf23d6 chore: add custom color extension to ThemeData
c056530 refactor: use Theme.of(context) when trying to get theme colors
186a01b refactor: toggle widget code refactor
2c5a226 refactor: flowy hover style refactor
e77e04c refactor: flowy icon refactor
7ae2d74 fix: regression on sidebar tooltip text from #1210
a56aea1 chore: Merge branch 'main' into port-to-bloc-theme
d682b7e chore: read color from theme.of

📊 Changes

87 files changed (+831 additions, -920 deletions)

View changed files

📝 frontend/app_flowy/lib/plugins/board/presentation/board_page.dart (+23 -40)
📝 frontend/app_flowy/lib/plugins/board/presentation/card/board_date_cell.dart (+1 -2)
📝 frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart (+1 -3)
📝 frontend/app_flowy/lib/plugins/board/presentation/card/card.dart (+5 -4)
📝 frontend/app_flowy/lib/plugins/board/presentation/card/container/accessory.dart (+7 -9)
📝 frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart (+4 -4)
📝 frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart (+5 -6)
📝 frontend/app_flowy/lib/plugins/doc/document.dart (+8 -22)
📝 frontend/app_flowy/lib/plugins/doc/document_page.dart (+1 -3)
📝 frontend/app_flowy/lib/plugins/doc/editor_styles.dart (+9 -10)
📝 frontend/app_flowy/lib/plugins/doc/presentation/banner.dart (+13 -14)
📝 frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart (+1 -4)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart (+6 -8)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart (+8 -5)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checkbox_cell.dart (+2 -1)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart (+26 -26)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart (+10 -14)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart (+3 -5)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart (+9 -8)
📝 frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart (+8 -6)

...and 67 more files

📄 Description

This is a replacement for PR #259. Among the tasks outlined in the above PR, the first task (port from context.watch<AppTheme> to Theme.of(context) syntax) and second task (port from provider to bloc) were implemented, while the hydrated bloc task was skipped due to AppFlowy already storing this information inside the DB. I’ve also added some default colors to shared widgets such as FlowyHover and FlowyButton to reduce duplicate code.

Applying this PR also makes the app’s transition between light and dark themes seem a bit smoother as well.

There is now more usage of Material Design’s color tokens throughout the application. These are mapped from the AppTheme tokens that made up the original design specs. Visually, there shouldn’t be any major changes (exception: grid border color to shader 6, divider width to 1 px to match the design specs) or regressions.

Please test abundantly before merging and please let me know if there is something I can improve here.

~~Blocking: UI regression from scrollbars on AppFlowyPopovers~~ (fixed)

_{🔄 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/1407 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 10/31/2022 **Status:** ✅ Merged **Merged:** 11/10/2022 **Merged by:** [@appflowy](https://github.com/appflowy) **Base:** `main` ← **Head:** `port-to-bloc-theme` --- ### 📝 Commits (10+) - [`ed322ce`](https://github.com/AppFlowy-IO/AppFlowy/commit/ed322ce59a99b13edb567c83396a31d2258c03ff) refactor: port theme provider to bloc - [`69eff9f`](https://github.com/AppFlowy-IO/AppFlowy/commit/69eff9f07e79b315f794a7094764fa7330396170) refactor: port from custom theme type enum to material design's brightness - [`abf23d6`](https://github.com/AppFlowy-IO/AppFlowy/commit/abf23d6c994087e20a60e01a5eefea4d570c16eb) chore: add custom color extension to ThemeData - [`c056530`](https://github.com/AppFlowy-IO/AppFlowy/commit/c0565302b9e469fe0204147122f5912a76f0bdc3) refactor: use Theme.of(context) when trying to get theme colors - [`186a01b`](https://github.com/AppFlowy-IO/AppFlowy/commit/186a01bc4a4770d02ebf0b7ac1977553012fa059) refactor: toggle widget code refactor - [`2c5a226`](https://github.com/AppFlowy-IO/AppFlowy/commit/2c5a2268ec4016044b147118a3d5943fa6d9c889) refactor: flowy hover style refactor - [`e77e04c`](https://github.com/AppFlowy-IO/AppFlowy/commit/e77e04c6fb53e3d59484bda542b108e98af10e6a) refactor: flowy icon refactor - [`7ae2d74`](https://github.com/AppFlowy-IO/AppFlowy/commit/7ae2d74162ddb3d84f8fcb692113b5f199089a5e) fix: regression on sidebar tooltip text from #1210 - [`a56aea1`](https://github.com/AppFlowy-IO/AppFlowy/commit/a56aea13c85adc578153bb73122c864caf21f69d) chore: Merge branch 'main' into port-to-bloc-theme - [`d682b7e`](https://github.com/AppFlowy-IO/AppFlowy/commit/d682b7ed07e22eefdc53b4d8e945beb69ea3c68a) chore: read color from theme.of ### 📊 Changes **87 files changed** (+831 additions, -920 deletions) <details> <summary>View changed files</summary> 📝 `frontend/app_flowy/lib/plugins/board/presentation/board_page.dart` (+23 -40) 📝 `frontend/app_flowy/lib/plugins/board/presentation/card/board_date_cell.dart` (+1 -2) 📝 `frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart` (+1 -3) 📝 `frontend/app_flowy/lib/plugins/board/presentation/card/card.dart` (+5 -4) 📝 `frontend/app_flowy/lib/plugins/board/presentation/card/container/accessory.dart` (+7 -9) 📝 `frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart` (+4 -4) 📝 `frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_toolbar.dart` (+5 -6) 📝 `frontend/app_flowy/lib/plugins/doc/document.dart` (+8 -22) 📝 `frontend/app_flowy/lib/plugins/doc/document_page.dart` (+1 -3) 📝 `frontend/app_flowy/lib/plugins/doc/editor_styles.dart` (+9 -10) 📝 `frontend/app_flowy/lib/plugins/doc/presentation/banner.dart` (+13 -14) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart` (+1 -4) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart` (+6 -8) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_container.dart` (+8 -5) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/checkbox_cell.dart` (+2 -1) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart` (+26 -26) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart` (+10 -14) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_cell.dart` (+3 -5) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart` (+9 -8) 📝 `frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart` (+8 -6) _...and 67 more files_ </details> ### 📄 Description This is a replacement for PR #259. Among the tasks outlined in the above PR, the first task (port from `context.watch<AppTheme>` to `Theme.of(context)` syntax) and second task (port from provider to bloc) were implemented, while the hydrated bloc task was skipped due to AppFlowy already storing this information inside the DB. I’ve also added some default colors to shared widgets such as `FlowyHover` and `FlowyButton` to reduce duplicate code. Applying this PR also makes the app’s transition between light and dark themes seem a bit smoother as well. There is now more usage of Material Design’s color tokens throughout the application. These are mapped from the `AppTheme` tokens that made up the original design specs. Visually, there shouldn’t be any major changes (exception: grid border color to shader 6, divider width to 1 px to match the design specs) or regressions. Please test abundantly before merging and please let me know if there is something I can improve here. ~~Blocking: UI regression from scrollbars on `AppFlowyPopovers`~~ (fixed) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>