[PR #3550] [MERGED] feat: dandelion theme improvement #5760

New issue

Closed

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

mirror commented

2026-03-23 22:20:11 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/3550
Author: @hyj1204
Created: 9/27/2023
Status: ✅ Merged
Merged: 9/28/2023
Merged by: @LucasXu0

Base: main ← Head: feat/dandelion_improvement

📝 Commits (4)

214c90d chore: add tooltip text on upload theme button and unify hover color
1b1ea75 chore: set new app icon color to primary color
37a9677 feat: improve dandelion theme light mode color
2c9a0c6 feat: improve dandelion theme dark mode color

📊 Changes

4 files changed (+30 additions, -21 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_new_page_button.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/color_scheme.dart (+5 -2)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart (+22 -17)
📝 frontend/resources/translations/en.json (+1 -0)

📄 Description

Feature Preview

To close #3268 and improve the following UI.

Add a tooltip and set the hover color in the upload theme button as same as other icon buttons around.
Set new page icon color to primary color

I modified the following part from the draft design under the issue discussion.
For light mode:

I set all the hover colors to yellow style rather than green or yellow in different parts.
Only the sidebar background has a green color, the rest part uses a yellow style color.
I didn't change the border color(divider color) because it is also linked to the divider in the settings page, which looks weird if we add a colorful color there.

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/e41a4dd2-ac5f-4f6e-8d28-b91c093c4950

There are two options for the sidebar color I feel it would be good too. Just let me know which one you think is the best:
Option A: A light green color (f3fae3)

Option B: Use a light yellow instead of green color(faf0c8)

For Dark mode:

I used only yellow color there to keep it simple.
I didn't change the border color for the same reason as the light mode.

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/a2208b8c-588b-4f51-923c-31f7897a62b9

PR Checklist

My code adheres to the AppFlowy Style Guide
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.

_{🔄 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/3550 **Author:** [@hyj1204](https://github.com/hyj1204) **Created:** 9/27/2023 **Status:** ✅ Merged **Merged:** 9/28/2023 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `feat/dandelion_improvement` --- ### 📝 Commits (4) - [`214c90d`](https://github.com/AppFlowy-IO/AppFlowy/commit/214c90d9f7e4693826706d9d33befdcdd91a148d) chore: add tooltip text on upload theme button and unify hover color - [`1b1ea75`](https://github.com/AppFlowy-IO/AppFlowy/commit/1b1ea75279b06ea872d0492bce528ce8cc0b9284) chore: set new app icon color to primary color - [`37a9677`](https://github.com/AppFlowy-IO/AppFlowy/commit/37a9677516ad9bf61c5b52efd12a9e473979c0af) feat: improve dandelion theme light mode color - [`2c9a0c6`](https://github.com/AppFlowy-IO/AppFlowy/commit/2c9a0c6b21280f78e55b3f8084c732353b5c1af9) feat: improve dandelion theme dark mode color ### 📊 Changes **4 files changed** (+30 additions, -21 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar_new_page_button.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/color_scheme.dart` (+5 -2) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart` (+22 -17) 📝 `frontend/resources/translations/en.json` (+1 -0) </details> ### 📄 Description   ### Feature Preview To close #3268 and improve the following UI. 1. Add a tooltip and set the hover color in the upload theme button as same as other icon buttons around. <img width="249" alt="Pasted Graphic 3" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/93c52c3c-67fa-4d1a-8ef1-865b3b5e06ae"> 2. Set new page icon color to primary color <img width="144" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/ccb7531c-8879-41fb-9993-3b25f678bfcb"> <img width="241" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/6e561abf-3c5c-492f-97d5-be63087feb8b"> <img width="183" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/29fd6551-3a98-451f-8907-40b5aa228d6c"> <img width="183" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/aa04d2fc-4362-4fe9-b5bf-692762e8dcfe"> <img width="206" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/e0db9789-6f4b-4b8a-9931-6d08ebbac10d"> <img width="168" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/4cdd7dc4-2c0e-42ca-a747-9b541dbbd11b"> --- 3. I modified the following part from the draft design under the issue discussion. For light mode: - I set all the hover colors to yellow style rather than green or yellow in different parts. - Only the sidebar background has a green color, the rest part uses a yellow style color. - I didn't change the border color(divider color) because it is also linked to the divider in the settings page, which looks weird if we add a colorful color there. https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/e41a4dd2-ac5f-4f6e-8d28-b91c093c4950 There are two options for the sidebar color I feel it would be good too. Just let me know which one you think is the best: **Option A: A light green color (f3fae3)** <img width="803" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/2e860b49-70af-4173-a68d-da82ecc77e65"> **Option B: Use a light yellow instead of green color(faf0c8)** <img width="803" alt="image" src="https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/5dfd5c8b-63a3-4165-94e3-83267c3915a4"> For Dark mode: - I used only yellow color there to keep it simple. - I didn't change the border color for the same reason as the light mode. https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/a2208b8c-588b-4f51-923c-31f7897a62b9  ---  #### PR Checklist - [x] My code adheres to the [AppFlowy Style Guide](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/software-contributions/submitting-code/style-guides) - [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. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>