[PR #259] [CLOSED] Refactor default themes, and start migrating from `Provider` to `Bloc (Cubit)` #4024

New issue

Closed

opened 2026-03-23 21:35:57 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 21:35:57 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/259
Author: @hieugao
Created: 1/17/2022
Status: ❌ Closed

Base: main ← Head: default-theme-enhancement

📝 Commits (10+)

f1b53a5 refactor: use Theme.of(context)... instead of AppTheme:
e98494e refactor: change default colors
79bc3d4 refactor: disable unused code:
536a8ef chore: use Theme.of(context).hoverColor
33299c7 refactor: migrate to Theme.of(context)... then remove unused code
8366c61 refactor: migrate from AppTheme to Theme.of(context)...
421fbba refactor: migrate from AppTheme to Theme.of(context)...
72209a7 refactor: migrate from "Provider" to "Cubit"
ae18c6d feat: persist app's theme mode with Hydrated BLOC (Cubit)
6fe6f99 chore: update base colors

📊 Changes

53 files changed (+568 additions, -666 deletions)

View changed files

➕ frontend/app_flowy/lib/common/theme/theme.dart (+151 -0)
📝 frontend/app_flowy/lib/startup/tasks/app_widget.dart (+32 -41)
📝 frontend/app_flowy/lib/user/presentation/sign_in_screen.dart (+12 -17)
📝 frontend/app_flowy/lib/user/presentation/sign_up_screen.dart (+13 -21)
📝 frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart (+1 -4)
📝 frontend/app_flowy/lib/user/presentation/welcome_screen.dart (+1 -7)
📝 frontend/app_flowy/lib/user/presentation/widgets/background.dart (+1 -8)
📝 frontend/app_flowy/lib/workspace/application/appearance.dart (+42 -43)
📝 frontend/app_flowy/lib/workspace/presentation/home/home_stack.dart (+2 -5)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart (+2 -7)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart (+6 -8)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/app/menu_app.dart (+2 -3)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart (+3 -5)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart (+2 -4)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart (+5 -8)
📝 frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart (+9 -5)
📝 frontend/app_flowy/lib/workspace/presentation/home/navigation.dart (+3 -6)
📝 frontend/app_flowy/lib/workspace/presentation/plugins/doc/document.dart (+15 -25)
📝 frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/document_page.dart (+2 -3)
📝 frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/styles.dart (+8 -12)

...and 33 more files

📄 Description

Changes

Instead of using a custom AppTheme to theming, we could use Theme.of(context)... instead, leads to a more consistent app where the app, SDK and package widgets could benefit from
Using BLOC (Cubit) instead of Provider to control theming
Persist theme setting with Hydrated BLOC
Update the colors and terms according to https://github.com/AppFlowy-IO/appflowy/issues/31#issuecomment-995269689

Thought

We need to work more on the default theme currently because the colors are not working pretty well (using the same tints for both theme modes, etc). ~~IMO I don't think we should put a lot of time into this aspect but rather spending time on implementing features, it seems like Material Design is the way to go at the current point.~~ Seems like it's more practical if we could have an actual design (on Figma or something) so we could test out the colors and establish the default theme for AppFlowy.

~~But maybe it will not take a lot of time since~~ now we theming with Theme.of(context)..., changes will be applied throughout the app pretty easily 😅.

_{🔄 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/259 **Author:** [@hieugao](https://github.com/hieugao) **Created:** 1/17/2022 **Status:** ❌ Closed **Base:** `main` ← **Head:** `default-theme-enhancement` --- ### 📝 Commits (10+) - [`f1b53a5`](https://github.com/AppFlowy-IO/AppFlowy/commit/f1b53a5b46775fa731495f871d0aeee869c7b7e6) refactor: use `Theme.of(context)...` instead of `AppTheme`: - [`e98494e`](https://github.com/AppFlowy-IO/AppFlowy/commit/e98494e2d83bdaecf2fa5bce14f7d96df611380e) refactor: change default colors - [`79bc3d4`](https://github.com/AppFlowy-IO/AppFlowy/commit/79bc3d4260b13e9a720effba42a32f2404f9ec60) refactor: disable unused code: - [`536a8ef`](https://github.com/AppFlowy-IO/AppFlowy/commit/536a8ef833dd924826caef532688d5e4df3c392f) chore: use `Theme.of(context).hoverColor` - [`33299c7`](https://github.com/AppFlowy-IO/AppFlowy/commit/33299c728a18b6801cb0357e7ae06c5705575d15) refactor: migrate to `Theme.of(context)...` then remove unused code - [`8366c61`](https://github.com/AppFlowy-IO/AppFlowy/commit/8366c6189b5bced35c141051f59c7c79dbe7098d) refactor: migrate from `AppTheme` to `Theme.of(context)...` - [`421fbba`](https://github.com/AppFlowy-IO/AppFlowy/commit/421fbba31b57ef2eaeb316c0320e998ac4a53cab) refactor: migrate from `AppTheme` to `Theme.of(context)...` - [`72209a7`](https://github.com/AppFlowy-IO/AppFlowy/commit/72209a70499657ce90820963244887a198016ebd) refactor: migrate from "Provider" to "Cubit" - [`ae18c6d`](https://github.com/AppFlowy-IO/AppFlowy/commit/ae18c6d3906a80e4f839337a130c305bcd0b4fb9) feat: persist app's theme mode with Hydrated BLOC (Cubit) - [`6fe6f99`](https://github.com/AppFlowy-IO/AppFlowy/commit/6fe6f99d3cadab1c662ce21d51bea02c2eeb7823) chore: update base colors ### 📊 Changes **53 files changed** (+568 additions, -666 deletions) <details> <summary>View changed files</summary> ➕ `frontend/app_flowy/lib/common/theme/theme.dart` (+151 -0) 📝 `frontend/app_flowy/lib/startup/tasks/app_widget.dart` (+32 -41) 📝 `frontend/app_flowy/lib/user/presentation/sign_in_screen.dart` (+12 -17) 📝 `frontend/app_flowy/lib/user/presentation/sign_up_screen.dart` (+13 -21) 📝 `frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart` (+1 -4) 📝 `frontend/app_flowy/lib/user/presentation/welcome_screen.dart` (+1 -7) 📝 `frontend/app_flowy/lib/user/presentation/widgets/background.dart` (+1 -8) 📝 `frontend/app_flowy/lib/workspace/application/appearance.dart` (+42 -43) 📝 `frontend/app_flowy/lib/workspace/presentation/home/home_stack.dart` (+2 -5) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart` (+2 -7) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart` (+6 -8) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/app/menu_app.dart` (+2 -3) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/disclosure_action.dart` (+3 -5) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart` (+2 -4) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart` (+5 -8) 📝 `frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart` (+9 -5) 📝 `frontend/app_flowy/lib/workspace/presentation/home/navigation.dart` (+3 -6) 📝 `frontend/app_flowy/lib/workspace/presentation/plugins/doc/document.dart` (+15 -25) 📝 `frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/document_page.dart` (+2 -3) 📝 `frontend/app_flowy/lib/workspace/presentation/plugins/doc/src/styles.dart` (+8 -12) _...and 33 more files_ </details> ### 📄 Description #### Changes - Instead of using a custom `AppTheme` to theming, we could use `Theme.of(context)...` instead, leads to a more consistent app where the app, SDK and package widgets could benefit from - Using BLOC (Cubit) instead of Provider to control theming - Persist theme setting with Hydrated BLOC - Update the colors and terms according to https://github.com/AppFlowy-IO/appflowy/issues/31#issuecomment-995269689 #### Thought We need to work more on the default theme currently because the colors are not working pretty well (using the same tints for both theme modes, etc). ~IMO I don't think we should put a lot of time into this aspect but rather spending time on implementing features, it seems like Material Design is the way to go at the current point.~ Seems like it's more practical if we could have an actual design (on Figma or something) so we could test out the colors and establish the default theme for AppFlowy. ~But maybe it will not take a lot of time since~ now we theming with `Theme.of(context)...`, changes will be applied throughout the app pretty easily :sweat_smile:. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>