[PR #2344] [MERGED] fix: UI issues in dark mode #5193

New issue

Closed

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

mirror commented

2026-03-23 22:17:39 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/2344
Author: @hyj1204
Created: 4/24/2023
Status: ✅ Merged
Merged: 5/2/2023
Merged by: @appflowy

Base: main ← Head: fix/ui_issues_in_dark_mode

📝 Commits (8)

bf729a6 fix: date cell UI issue #2301
0096706 chore: update font size toggle button hover effect
aaaa20f chore: update more button background
468d38a chore: update NumberTypeOptionWidge hover style
591ba7b chore: improve the hover color in _SelectOptionColorCell
bab94a0 chore: update User setting UI
475a427 fix: delete unused file
8bf37fb fix: remove the hover effect when delete button is disable

📊 Changes

17 files changed (+198 additions, -174 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_editor.dart (+1 -0)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart (+2 -6)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart (+2 -11)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart (+4 -9)
📝 frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart (+6 -7)
📝 frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart (+12 -3)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart (+1 -0)
📝 frontend/appflowy_flutter/lib/workspace/application/appearance.dart (+3 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart (+1 -3)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart (+84 -70)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart (+4 -2)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart (+51 -47)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart (+6 -3)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart (+6 -3)
📝 frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart (+12 -6)

📄 Description

This PR is to fix the following UI issues

Feature Preview

1. Update the hover effect on the FieldTypeOptionEditor and FieldTypeCell. Fix #2301
The updated UI
Date cell

Number cell

2. Update the font size switcher UI. Fix #2299
Since the text color cannot be changed when it is hovered in ToggleButtons. I modified the UI to make it suitable in light&dark mode. The hover color is 30% opacity of the background color when it is selected.
In light mode

In dark mode

3. Improve the hover effect in _SelectOptionColorCell
The hover effect for tag deletion has been updated to a high-contrast blue color in order to draw the user's attention to the action.
The hover effect for selecting a color has been updated to a light grey color. This change was made to avoid the blue color in the list from blending in with the background, as it was the same color as the previous hover effect.

4. Improve the User setting UI

Resize the font size to match all the setting title
Make the underline in the text field visible in dark mode
Update the hover style in picking the user avatar. The previous IconButton had a circle hover effect that interfered with the hover area. To fix this, I replaced it with InkWell to create a hover shape in the form of a rounded rectangle.

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/2344 **Author:** [@hyj1204](https://github.com/hyj1204) **Created:** 4/24/2023 **Status:** ✅ Merged **Merged:** 5/2/2023 **Merged by:** [@appflowy](https://github.com/appflowy) **Base:** `main` ← **Head:** `fix/ui_issues_in_dark_mode` --- ### 📝 Commits (8) - [`bf729a6`](https://github.com/AppFlowy-IO/AppFlowy/commit/bf729a6108e72a928be4f82724a489a38051d812) fix: date cell UI issue #2301 - [`0096706`](https://github.com/AppFlowy-IO/AppFlowy/commit/0096706b957e20cbd770a4b06a5806a5acb11d62) chore: update font size toggle button hover effect - [`aaaa20f`](https://github.com/AppFlowy-IO/AppFlowy/commit/aaaa20fbfea79be2a80b05fb0b030f8eba82b1a9) chore: update more button background - [`468d38a`](https://github.com/AppFlowy-IO/AppFlowy/commit/468d38ab0178aef7c97cf0834d94064de5b39631) chore: update NumberTypeOptionWidge hover style - [`591ba7b`](https://github.com/AppFlowy-IO/AppFlowy/commit/591ba7bff7e614efe24e24f50b5cca207730a845) chore: improve the hover color in _SelectOptionColorCell - [`bab94a0`](https://github.com/AppFlowy-IO/AppFlowy/commit/bab94a008f7bfda81b1867779d5b538c608fa2df) chore: update User setting UI - [`475a427`](https://github.com/AppFlowy-IO/AppFlowy/commit/475a42729c8420a7f296fd557a60dc348d7c9018) fix: delete unused file - [`8bf37fb`](https://github.com/AppFlowy-IO/AppFlowy/commit/8bf37fbb59bedd828bc2666f152e800d0e6b1cee) fix: remove the hover effect when delete button is disable ### 📊 Changes **17 files changed** (+198 additions, -174 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_editor.dart` (+1 -0) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart` (+2 -6) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart` (+2 -11) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart` (+4 -9) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart` (+6 -7) 📝 `frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart` (+12 -3) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart` (+1 -0) 📝 `frontend/appflowy_flutter/lib/workspace/application/appearance.dart` (+3 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_file_customize_location_view.dart` (+1 -3) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_user_view.dart` (+84 -70) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart` (+4 -2) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart` (+51 -47) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart` (+6 -3) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart` (+6 -3) 📝 `frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart` (+12 -6) </details> ### 📄 Description This PR is to fix the following UI issues ### Feature Preview **1. Update the hover effect on the `FieldTypeOptionEditor` and `FieldTypeCell`. Fix #2301** The updated UI Date cell ![image](https://user-images.githubusercontent.com/14248245/234125697-2cc9a168-aaa0-4e1d-b9a1-197caf853cf4.png) ![image](https://user-images.githubusercontent.com/14248245/234125719-ac78a58a-302c-4c09-8fd6-27775789e7fc.png) Number cell <img width="422" alt="image" src="https://user-images.githubusercontent.com/14248245/234150521-a9341c2c-b7bb-4f50-a976-d6ddbe8ed741.png"> <img width="205" alt="image" src="https://user-images.githubusercontent.com/14248245/234150867-0a544321-b5dd-4ad1-854f-fe5c7330e4f7.png"> **2. Update the font size switcher UI. Fix #2299** Since the text color cannot be changed when it is hovered in ToggleButtons. I modified the UI to make it suitable in light&dark mode. The hover color is 30% opacity of the background color when it is selected. In light mode <img width="306" alt="image" src="https://user-images.githubusercontent.com/14248245/234151455-120d8117-2269-4282-952a-0f64425ea6f9.png"> In dark mode <img width="307" alt="image" src="https://user-images.githubusercontent.com/14248245/234151416-1c3f4a1d-250b-40ed-a587-6041e3311bbf.png"> **3. Improve the hover effect in `_SelectOptionColorCell`** The hover effect for tag deletion has been updated to a high-contrast blue color in order to draw the user's attention to the action. The hover effect for selecting a color has been updated to a light grey color. This change was made to avoid the blue color in the list from blending in with the background, as it was the same color as the previous hover effect. ![image](https://user-images.githubusercontent.com/14248245/235499949-02a15fdb-1385-4389-9b11-0d3b0617aa0d.png) ![image](https://user-images.githubusercontent.com/14248245/235500799-3733b1cb-dddb-4ab4-89b8-f0f79235db88.png) **4. Improve the User setting UI** - Resize the font size to match all the setting title - Make the underline in the text field visible in dark mode - Update the hover style in picking the user avatar. The previous `IconButton` had a circle hover effect that interfered with the hover area. To fix this, I replaced it with InkWell to create a hover shape in the form of a rounded rectangle. ![image](https://user-images.githubusercontent.com/14248245/235533696-029077ea-9278-49f8-a947-6c90fbce6da3.png)  ---  #### 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>