[PR #4168] [MERGED] feat: customized cursor and selection color #6103

New issue

Closed

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

mirror commented

2026-03-23 22:21:43 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/4168
Author: @hyj1204
Created: 12/19/2023
Status: ✅ Merged
Merged: 12/21/2023
Merged by: @LucasXu0

Base: main ← Head: feat/customized_cursor_and_selection_color

📝 Commits (10+)

6555313 feat:customized cursor and selection color
5db58c5 feat: set null as default color and use share preference
f1060f4 feat: improve the default color and copyWith method
00dc5de feat: improve the colors in dark mode
42bdcc3 chore: improve naming
af2254d feat: add localization
c2c91a2 feat: improve the setting dialog
eb1c037 feat: improve validator mode
028090b fix: fix validation logic
6db1988 chore: fix pr review issues

📊 Changes

24 files changed (+698 additions, -32 deletions)

View changed files

📝 frontend/appflowy_flutter/lib/core/config/kv_keys.dart (+4 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart (+10 -6)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart (+86 -1)
➕ frontend/appflowy_flutter/lib/util/color_to_hex_string.dart (+8 -0)
📝 frontend/appflowy_flutter/lib/workspace/application/appearance_defaults.dart (+8 -0)
📝 frontend/appflowy_flutter/lib/workspace/application/settings/appearance/appearance_cubit.dart (+49 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/brightness_setting.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/color_scheme.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/create_file_setting.dart (+1 -1)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/date_format_setting.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/direction_setting.dart (+4 -4)
➕ frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/document_color_setting_button.dart (+266 -0)
➕ frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/document_cursor_color_setting.dart (+82 -0)
➕ frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/document_selection_color_setting.dart (+85 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/settings_appearance.dart (+2 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/theme_setting_entry_template.dart (+11 -7)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/time_format_setting.dart (+2 -2)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart (+15 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_notifications_view.dart (+1 -1)

...and 4 more files

📄 Description

Feature Preview

Customized document cursor and selection color

To close #3972

When users enter 'return' on the text field, the preview area will get updated. Thus, users can get a brief preview of how it will look like. If users type an invalid value of color, it will show the error message below the text field.
When users click 'Apply', it will validate all the values and save the value only if it is validated.
When users reset the color, the value will be null and the UI will use the corresponding theme color from DefaultAppearanceSettings. get**Color.
The color values are saved both in the backend and shared preference.

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/1ce1e188-0b16-4a2b-828a-a819117729c7

https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/d5b2b628-4e9e-4776-b817-90d20b2614b0

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.

_{🔄 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/4168 **Author:** [@hyj1204](https://github.com/hyj1204) **Created:** 12/19/2023 **Status:** ✅ Merged **Merged:** 12/21/2023 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `feat/customized_cursor_and_selection_color` --- ### 📝 Commits (10+) - [`6555313`](https://github.com/AppFlowy-IO/AppFlowy/commit/655531322c13c7718fe57cb5d82a963d14eadbec) feat:customized cursor and selection color - [`5db58c5`](https://github.com/AppFlowy-IO/AppFlowy/commit/5db58c5f9d3bc2f90f08b09903d22b35ad58eed4) feat: set null as default color and use share preference - [`f1060f4`](https://github.com/AppFlowy-IO/AppFlowy/commit/f1060f40c56e23702c6d4e44a1b59cdce3c71c84) feat: improve the default color and copyWith method - [`00dc5de`](https://github.com/AppFlowy-IO/AppFlowy/commit/00dc5de1b775b9bbf1f2f9311f9d78271e491949) feat: improve the colors in dark mode - [`42bdcc3`](https://github.com/AppFlowy-IO/AppFlowy/commit/42bdcc305f0821e41217b284e73667858d4e984e) chore: improve naming - [`af2254d`](https://github.com/AppFlowy-IO/AppFlowy/commit/af2254db55d0c8dd0a2dad44b243c2625c7cdab4) feat: add localization - [`c2c91a2`](https://github.com/AppFlowy-IO/AppFlowy/commit/c2c91a232d42b663f480a864364b148da0eacc88) feat: improve the setting dialog - [`eb1c037`](https://github.com/AppFlowy-IO/AppFlowy/commit/eb1c037f5c966d1b05655a82ea23df5eaf949f5c) feat: improve validator mode - [`028090b`](https://github.com/AppFlowy-IO/AppFlowy/commit/028090b7e2fe6f04eb18b695f1f09c8807c566a1) fix: fix validation logic - [`6db1988`](https://github.com/AppFlowy-IO/AppFlowy/commit/6db19888b15823b869b963796ccbf5bae75d5091) chore: fix pr review issues ### 📊 Changes **24 files changed** (+698 additions, -32 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/lib/core/config/kv_keys.dart` (+4 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart` (+10 -6) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart` (+86 -1) ➕ `frontend/appflowy_flutter/lib/util/color_to_hex_string.dart` (+8 -0) 📝 `frontend/appflowy_flutter/lib/workspace/application/appearance_defaults.dart` (+8 -0) 📝 `frontend/appflowy_flutter/lib/workspace/application/settings/appearance/appearance_cubit.dart` (+49 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/brightness_setting.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/color_scheme.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/create_file_setting.dart` (+1 -1) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/date_format_setting.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/direction_setting.dart` (+4 -4) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/document_color_setting_button.dart` (+266 -0) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/document_cursor_color_setting.dart` (+82 -0) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/document_selection_color_setting.dart` (+85 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/settings_appearance.dart` (+2 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/theme_setting_entry_template.dart` (+11 -7) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/time_format_setting.dart` (+2 -2) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart` (+15 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_notifications_view.dart` (+1 -1) _...and 4 more files_ </details> ### 📄 Description   ### Feature Preview **Customized document cursor and selection color** To close #3972 - When users enter 'return' on the text field, the preview area will get updated. Thus, users can get a brief preview of how it will look like. If users type an invalid value of color, it will show the error message below the text field. - When users click 'Apply', it will validate all the values and save the value only if it is validated. - When users reset the color, the value will be `null` and the UI will use the corresponding theme color from `DefaultAppearanceSettings. get**Color. ` - The color values are saved both in the backend and shared preference. https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/1ce1e188-0b16-4a2b-828a-a819117729c7 https://github.com/AppFlowy-IO/AppFlowy/assets/14248245/d5b2b628-4e9e-4776-b817-90d20b2614b0  ---  #### 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. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>