feat: adjust font background color in dark mode (AppFlowy-IO#5333)

Trapiz · May 14, 2024 · a408876 · a408876
1 parent 818c583
commit a408876
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 32 deletions.
diff --git a/...d/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/font_colors.dart b/...d/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/font_colors.dart
@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+
+class EditorFontColors {
+  static final lightColors = [
+    const Color(0x00FFFFFF),
+    const Color(0xFFE8E0FF),
+    const Color(0xFFFFE6FD),
+    const Color(0xFFFFDAE6),
+    const Color(0xFFFFEFE3),
+    const Color(0xFFF5FFDC),
+    const Color(0xFFDDFFD6),
+    const Color(0xFFDEFFF1),
+    const Color(0xFFE1FBFF),
+    const Color(0xFFFFADAD),
+    const Color(0xFFFFE088),
+    const Color(0xFFA7DF4A),
+    const Color(0xFFD4C0FF),
+    const Color(0xFFFDB2FE),
+    const Color(0xFFFFD18B),
+    const Color(0xFF65E7F0),
+    const Color(0xFF71E6B4),
+    const Color(0xFF80F1FF),
+  ];
+
+  static final darkColors = [
+    const Color(0x00FFFFFF),
+    const Color(0xFF8B80AD),
+    const Color(0xFF987195),
+    const Color(0xFF906D78),
+    const Color(0xFFA68B77),
+    const Color(0xFF88936D),
+    const Color(0xFF72936B),
+    const Color(0xFF6B9483),
+    const Color(0xFF658B90),
+    const Color(0xFF95405A),
+    const Color(0xFFA6784D),
+    const Color(0xFF6E9234),
+    const Color(0xFF6455A2),
+    const Color(0xFF924F83),
+    const Color(0xFFA48F34),
+    const Color(0xFF29A3AC),
+    const Color(0xFF2E9F84),
+    const Color(0xFF405EA6),
+  ];
+
+  // if the input color doesn't exist in the list, return the input color itself.
+  static Color? fromBuiltInColors(BuildContext context, Color? color) {
+    if (color == null) {
+      return null;
+    }
+
+    final brightness = Theme.of(context).brightness;
+
+    // if the dark mode color using light mode, return it's corresponding light color. Same for light mode.
+    if (brightness == Brightness.light) {
+      if (darkColors.contains(color)) {
+        return lightColors[darkColors.indexOf(color)];
+      }
+    } else {
+      if (lightColors.contains(color)) {
+        return darkColors[lightColors.indexOf(color)];
+      }
+    }
+    return color;
+  }
+}
diff --git a/...b/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart b/...b/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_item.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
@@ -25,7 +26,10 @@ class ColorItem extends StatelessWidget {
         editorState.getSelectionColor(AppFlowyRichTextKeys.textColor);
     final String? selectedBackgroundColor =
         editorState.getSelectionColor(AppFlowyRichTextKeys.backgroundColor);
-
+    final backgroundColor = EditorFontColors.fromBuiltInColors(
+      context,
+      selectedBackgroundColor?.tryToColor(),
+    );
     return MobileToolbarMenuItemWrapper(
       size: const Size(82, 52),
       onTap: () async {
@@ -48,10 +52,12 @@ class ColorItem extends StatelessWidget {
         );
       },
       icon: FlowySvgs.m_aa_font_color_m,
-      iconColor: selectedTextColor?.tryToColor(),
-      backgroundColor: selectedBackgroundColor?.tryToColor() ??
-          theme.toolbarMenuItemBackgroundColor,
-      selectedBackgroundColor: selectedBackgroundColor?.tryToColor(),
+      iconColor: EditorFontColors.fromBuiltInColors(
+        context,
+        selectedTextColor?.tryToColor(),
+      ),
+      backgroundColor: backgroundColor ?? theme.toolbarMenuItemBackgroundColor,
+      selectedBackgroundColor: backgroundColor,
       isSelected: selectedBackgroundColor != null,
       showRightArrow: true,
       iconPadding: const EdgeInsets.only(

diff --git a/...b/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart b/...b/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart
@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_get_selection_color.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_toolbar_theme.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -154,37 +155,19 @@ class _TextColorAndBackgroundColorState
 }
 
 class _BackgroundColors extends StatelessWidget {
-  _BackgroundColors({
+  const _BackgroundColors({
     this.selectedColor,
     required this.onSelectedColor,
   });
 
   final Color? selectedColor;
   final void Function(Color color) onSelectedColor;
 
-  final colors = [
-    const Color(0x00FFFFFF),
-    const Color(0xFFE8E0FF),
-    const Color(0xFFFFE6FD),
-    const Color(0xFFFFDAE6),
-    const Color(0xFFFFEFE3),
-    const Color(0xFFF5FFDC),
-    const Color(0xFFDDFFD6),
-    const Color(0xFFDEFFF1),
-    const Color(0xFFE1FBFF),
-    const Color(0xFFFFADAD),
-    const Color(0xFFFFE088),
-    const Color(0xFFA7DF4A),
-    const Color(0xFFD4C0FF),
-    const Color(0xFFFDB2FE),
-    const Color(0xFFFFD18B),
-    const Color(0xFFFFF176),
-    const Color(0xFF71E6B4),
-    const Color(0xFF80F1FF),
-  ];
-
   @override
   Widget build(BuildContext context) {
+    final colors = Theme.of(context).brightness == Brightness.light
+        ? EditorFontColors.lightColors
+        : EditorFontColors.darkColors;
     return GridView.count(
       crossAxisCount: _count,
       shrinkWrap: true,

diff --git a/...ib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart b/...ib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/biusc_toolbar_item.dart
@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/aa_menu/_color_list.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -122,11 +123,17 @@ final colorToolbarItem = AppFlowyMobileToolbarItem(
           padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(9),
-            color: backgroundColor?.tryToColor(),
+            color: EditorFontColors.fromBuiltInColors(
+              context,
+              backgroundColor?.tryToColor(),
+            ),
           ),
           child: FlowySvg(
             FlowySvgs.m_aa_font_color_m,
-            color: textColor?.tryToColor(),
+            color: EditorFontColors.fromBuiltInColors(
+              context,
+              textColor?.tryToColor(),
+            ),
           ),
         );
       },

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart
@@ -1,11 +1,9 @@
 import 'dart:math';
 
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/mobile/application/page_style/document_page_style_bloc.dart';
 import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/font_colors.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_item/utils.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
@@ -17,6 +15,8 @@ import 'package:appflowy/workspace/application/settings/appearance/appearance_cu
 import 'package:appflowy/workspace/application/settings/appearance/base_appearance.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
 import 'package:collection/collection.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
@@ -243,6 +243,21 @@ class EditorStyleCustomizer {
       return before;
     }
 
+    if (attributes.backgroundColor != null) {
+      final color = EditorFontColors.fromBuiltInColors(
+        context,
+        attributes.backgroundColor!,
+      );
+      if (color != null) {
+        return TextSpan(
+          text: before.text,
+          style: after.style?.merge(
+            TextStyle(backgroundColor: color),
+          ),
+        );
+      }
+    }
+
     // try to refresh font here.
     if (attributes.fontFamily != null) {
       try {