mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-09-11 19:17:43 +03:00
feat: adjust font background color in dark mode (#5333)
This commit is contained in:
parent
eb0c9d3264
commit
3bead0bab9
@ -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;
|
||||
}
|
||||
}
|
@ -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(
|
||||
|
@ -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,7 +155,7 @@ class _TextColorAndBackgroundColorState
|
||||
}
|
||||
|
||||
class _BackgroundColors extends StatelessWidget {
|
||||
_BackgroundColors({
|
||||
const _BackgroundColors({
|
||||
this.selectedColor,
|
||||
required this.onSelectedColor,
|
||||
});
|
||||
@ -162,29 +163,11 @@ class _BackgroundColors extends StatelessWidget {
|
||||
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,
|
||||
|
@ -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(),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user