AppFlowy-IO/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-10-27 11:58:35 +03:00
Code Issues Projects Releases Wiki Activity

Feat(appflowy_flutter): dark mode improvement for generic area/widgets (#2099)

Browse Source 
* chore: update color scheme for dark mode

* chore: update dark color scheme

1. update the background color for side bar, surface and divider in dark mode
2. comment out dandelion and lavender theme temporarily

* chore: update top bar BGcolor and icon color

* chore: update text color

* chore: update share button color on the top bar

* chore: add tooltip theme data in global

* chore: add hint and tertiary color and update font size pop up menu style

* chore: update all the semibold texts color

* chore: update all the hover color

* chore: update setting BG color

* chore: add FlowySvg to get the icon color through current theme

1. Add FlowySvg widget
2. Update all the icons those have hover effect to FlowySvg
3. Recover shader1 for the text color when it is in hovered

* chore: update side bar UI

1. Update AddButton hover style
2. Update MenuAppHeader icon color and its hover style
3. Update NewAppButton(New page) font color
4. Update MenuUser username font color

* chore: update SettingsDialog style in dart mode

    1. Update title and text color
    2. Update the hover color on FlowyTextButton
    3. Update the LanguageSelectorDropdown background color and hover enter color

* chore: update NewAppButton icon in dark mode

* chore: update default icon color

* chore: rename the hover color and update ViewSectionItem hover color from default theme color

* chore: add question bubble background color

* chore: update cover image button color

* chore: remove fixed icon color on _AddCoverButton

* chore: put Dandelion and Lavender color scheme back with basic modification

* fix: delete unused import files and deprecated field

* chore: add comma and put color back

* chore: update AppFlowyPopover background color

* chore: remove the hover color on primary and secondary button

* chore: update shadow color in dark mode

* chore: update SettingsMenuElement hover effect

* chore: update the text color in DropdownMenuItem
This commit is contained in:
Yijing Huang 2023-03-29 20:44:37 -05:00 committed by GitHub
parent bdf7f37dc5
commit 8541ca8bec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
71 changed files with 446 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/appflowy_flutter/assets/images/home/new_app_dark.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" rx="8" fill="#00BCF0"/>
<rect x="7.5" y="4" width="1" height="8" rx="0.5" fill="#131720"/>
<rect x="12" y="7.5" width="1" height="8" rx="0.5" transform="rotate(90 12 7.5)" fill="#131720"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

4
frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/board_page.dart
View File

@ -184,7 +184,7 @@ class _BoardContentState extends State<BoardContent> {
width: 20,
child: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
onAddButtonClick: () {
@ -207,7 +207,7 @@ class _BoardContentState extends State<BoardContent> {
width: 20,
child: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
title: FlowyText.medium(

2
frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart
View File

@ -113,7 +113,7 @@ class _SettingItem extends StatelessWidget {
},
leftIcon: svgWidget(
action.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);

2
frontend/appflowy_flutter/lib/plugins/database_view/calendar/presentation/calendar_day.dart
View File

@ -203,7 +203,7 @@ class _NewEventButton extends StatelessWidget {
iconPadding: EdgeInsets.zero,
icon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
width: 22,
);

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/choicechip/choicechip.dart
View File

@ -43,7 +43,7 @@ class ChoiceChipButton extends StatelessWidget {
radius: const BorderRadius.all(Radius.circular(14)),
leftIcon: svgWidget(
filterInfo.fieldInfo.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
rightIcon: _ChoicechipFilterDesc(filterDesc: filterDesc),
hoverColor: AFThemeExtension.of(context).lightGreyHover,

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/create_filter_list.dart
View File

@ -162,7 +162,7 @@ class _FilterPropertyCell extends StatelessWidget {
onTap: () => onTap(fieldInfo),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/disclosure_button.dart
View File

@ -34,7 +34,7 @@ class _DisclosureButtonState extends State<DisclosureButton> {
width: 20,
icon: svgWidget(
"editor/details",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onPressed: () => controller.show(),
);

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/filter/filter_menu.dart
View File

@ -76,7 +76,7 @@ class _AddFilterButtonState extends State<AddFilterButton> {
hoverColor: AFThemeExtension.of(context).lightGreyHover,
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onTap: () => popoverController.show(),
),

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/footer/grid_footer.dart
View File

@ -19,7 +19,7 @@ class GridAddRowButton extends StatelessWidget {
onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
View File

@ -168,7 +168,7 @@ class FieldCellButton extends StatelessWidget {
onTap: onTap,
leftIcon: svgWidget(
field.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
radius: BorderRadius.zero,
text: FlowyText.medium(

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_list.dart
View File

@ -61,7 +61,7 @@ class FieldTypeCell extends StatelessWidget {
onTap: () => onSelectField(fieldType),
leftIcon: svgWidget(
fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);

4
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_type_option_editor.dart
View File

@ -116,11 +116,11 @@ class _SwitchFieldButton extends StatelessWidget {
margin: GridSize.typeOptionContentInsets,
leftIcon: svgWidget(
bloc.state.field.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
View File

@ -182,7 +182,7 @@ class CreateFieldButton extends StatelessWidget {
onTap: () {},
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
popupBuilder: (BuildContext popover) {

4
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/date.dart
View File

@ -153,7 +153,7 @@ class DateFormatButton extends StatelessWidget {
onHover: onHover,
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);
@ -184,7 +184,7 @@ class TimeFormatButton extends StatelessWidget {
onHover: onHover,
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart
View File

@ -61,7 +61,7 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
margin: GridSize.typeOptionContentInsets,
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
text: Row(
children: [

4
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart
View File

@ -194,7 +194,7 @@ class _OptionCellState extends State<_OptionCell> {
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: svgWidget(
"grid/details",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
],
@ -251,7 +251,7 @@ class _AddOptionButton extends StatelessWidget {
},
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
),

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option_editor.dart
View File

@ -106,7 +106,7 @@ class _DeleteTag extends StatelessWidget {
text: FlowyText.medium(LocaleKeys.grid_selectOption_deleteTag.tr()),
leftIcon: svgWidget(
"grid/delete",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onTap: () {
context

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/row/action.dart
View File

@ -67,7 +67,7 @@ class _ActionCell extends StatelessWidget {
},
leftIcon: svgWidget(
action.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/create_sort_list.dart
View File

@ -161,7 +161,7 @@ class _SortPropertyCell extends StatelessWidget {
onTap: () => onTap(fieldInfo),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

6
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart
View File

@ -125,7 +125,7 @@ class _SortItem extends StatelessWidget {
hoverColor: AFThemeExtension.of(context).lightGreyHover,
icon: svgWidget(
"home/close",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
@ -187,7 +187,7 @@ class _AddSortButtonState extends State<_AddSortButton> {
onTap: () => _popoverController.show(),
leftIcon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
),
@ -222,7 +222,7 @@ class _DeleteSortButton extends StatelessWidget {
},
leftIcon: svgWidget(
"editor/delete",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart
View File

@ -61,7 +61,7 @@ class SortChoiceChip extends StatelessWidget {
final text = LocaleKeys.grid_settings_sort.tr();
final leftIcon = svgWidget(
"grid/setting/sort",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
);
return SizedBox(

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart
View File

@ -82,7 +82,7 @@ class _GridGroupCell extends StatelessWidget {
text: FlowyText.medium(fieldInfo.name),
leftIcon: svgWidget(
fieldInfo.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
rightIcon: rightIcon,
onTap: () {

4
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_property.dart
View File

@ -96,7 +96,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
Widget build(BuildContext context) {
final checkmark = svgWidget(
widget.fieldInfo.visibility ? 'home/show' : 'home/hide',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
);
return SizedBox(
@ -118,7 +118,7 @@ class _GridPropertyCellState extends State<_GridPropertyCell> {
text: FlowyText.medium(widget.fieldInfo.name),
leftIcon: svgWidget(
widget.fieldInfo.fieldType.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
rightIcon: FlowyIconButton(
hoverColor: Colors.transparent,

2
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_setting.dart
View File

@ -78,7 +78,7 @@ class _SettingItem extends StatelessWidget {
onTap: () => onAction(action),
leftIcon: svgWidget(
action.iconName(),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
);

4
frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/card.dart
View File

@ -232,7 +232,7 @@ class _CardMoreOption extends StatelessWidget with CardAccessory {
padding: const EdgeInsets.all(3.0),
child: svgWidget(
'grid/details',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}
@ -254,7 +254,7 @@ class _CardEditOption extends StatelessWidget with CardAccessory {
padding: const EdgeInsets.all(3.0),
child: svgWidget(
'editor/edit',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

2
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/accessory/cell_accessory.dart
View File

@ -7,7 +7,6 @@ import 'package:flowy_infra/size.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
import '../cell_builder.dart';
@ -69,7 +68,6 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
Widget build(BuildContext context) {
return Tooltip(
message: LocaleKeys.tooltip_openAsPage.tr(),
textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: svgWidget(
"grid/expander",
color: Theme.of(context).colorScheme.primary,

2
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart
View File

@ -137,7 +137,7 @@ class _ChecklistOptionCellState extends State<_ChecklistOptionCell> {
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget(
"editor/details",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

8
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/date_cell/date_editor.dart
View File

@ -173,13 +173,13 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
leftChevronPadding: EdgeInsets.zero,
leftChevronIcon: svgWidget(
"home/arrow_left",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
rightChevronPadding: EdgeInsets.zero,
rightChevronMargin: EdgeInsets.zero,
rightChevronIcon: svgWidget(
"home/arrow_right",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
headerMargin: const EdgeInsets.only(bottom: 8.0),
),
@ -254,7 +254,7 @@ class _IncludeTimeButton extends StatelessWidget {
children: [
svgWidget(
"grid/clock",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
const HSpace(4),
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
@ -387,7 +387,7 @@ class _DateTypeOptionButton extends StatelessWidget {
margin: GridSize.typeOptionContentInsets,
rightIcon: svgWidget(
"grid/more",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
),

2
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart
View File

@ -116,7 +116,7 @@ class SelectOptionTag extends StatelessWidget {
hoverColor: Colors.transparent,
icon: svgWidget(
'home/close',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
],

2
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart
View File

@ -277,7 +277,7 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
iconPadding: const EdgeInsets.symmetric(horizontal: 6.0),
icon: svgWidget(
"editor/details",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
],

4
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart
View File

@ -213,7 +213,7 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
offset: const Offset(0, 8),
child: svgWidget(
"editor/edit",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
popupBuilder: (BuildContext popoverContext) {
return URLEditorPopover(
@ -246,7 +246,7 @@ class _CopyURLAccessoryState extends State<_CopyURLAccessory>
Widget build(BuildContext context) {
return svgWidget(
"editor/copy",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
);
}

2
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart
View File

@ -103,7 +103,7 @@ class _CloseButton extends StatelessWidget {
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget(
"home/close",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

5
frontend/appflowy_flutter/lib/plugins/document/presentation/banner.dart
View File

@ -34,7 +34,8 @@ class DocumentBanner extends StatelessWidget {
contentPadding: EdgeInsets.zero,
bgColor: Colors.transparent,
hoverColor: Theme.of(context).colorScheme.primary,
downColor: Theme.of(context).colorScheme.primaryContainer,
highlightColor:
Theme.of(context).colorScheme.primaryContainer,
outlineColor: Colors.white,
borderRadius: Corners.s8Border,
onPressed: onRestore,
@ -50,7 +51,7 @@ class DocumentBanner extends StatelessWidget {
contentPadding: EdgeInsets.zero,
bgColor: Colors.transparent,
hoverColor: Theme.of(context).colorScheme.primaryContainer,
downColor: Theme.of(context).colorScheme.primary,
highlightColor: Theme.of(context).colorScheme.primary,
outlineColor: Colors.white,
borderRadius: Corners.s8Border,
onPressed: onDelete,

6
frontend/appflowy_flutter/lib/plugins/document/presentation/more/font_size_switcher.dart
View File

@ -32,6 +32,7 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
FlowyText.semibold(
LocaleKeys.moreAction_fontSize.tr(),
fontSize: 12,
color: Theme.of(context).colorScheme.tertiary,
),
const SizedBox(
height: 5,
@ -43,9 +44,8 @@ class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
_updateSelectedFontSize(_fontSizes[index].item2);
},
borderRadius: const BorderRadius.all(Radius.circular(5)),
selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
selectedColor: Theme.of(context).colorScheme.onSurface,
fillColor: Theme.of(context).colorScheme.primaryContainer,
selectedColor: Theme.of(context).colorScheme.tertiary,
fillColor: Theme.of(context).colorScheme.primary,
color: Theme.of(context).hintColor,
constraints: const BoxConstraints(
minHeight: 40.0,

2
frontend/appflowy_flutter/lib/plugins/document/presentation/more/more_button.dart
View File

@ -28,7 +28,7 @@ class DocumentMoreButton extends StatelessWidget {
child: svgWidget(
'editor/details',
size: const Size(18, 18),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
);
}

4
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/built_in_page_widget.dart
View File

@ -119,7 +119,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
iconPadding: const EdgeInsets.all(3),
icon: svgWidget(
'common/information',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
// Name
@ -143,7 +143,7 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
iconPadding: const EdgeInsets.all(3),
icon: svgWidget(
'common/settings',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onPressed: () => controller.show(),
);

2
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/base/link_to_page_widget.dart
View File

@ -149,7 +149,7 @@ class _LinkToPageMenuState extends State<LinkToPageMenu> {
FlowyButton(
leftIcon: svgWidget(
_iconName(value),
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
text: FlowyText.regular(value.name),
onTap: () => widget.onSelected(app.value1, value),

15
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/change_cover_popover.dart
View File

@ -104,15 +104,24 @@ class _ChangeCoverPopoverState extends State<ChangeCoverPopover> {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlowyText.semibold(LocaleKeys.document_plugins_cover_colors.tr()),
FlowyText.semibold(
LocaleKeys.document_plugins_cover_colors.tr(),
color: Theme.of(context).colorScheme.tertiary,
),
const SizedBox(height: 10),
_buildColorPickerList(),
const SizedBox(height: 10),
FlowyText.semibold(LocaleKeys.document_plugins_cover_images.tr()),
FlowyText.semibold(
LocaleKeys.document_plugins_cover_images.tr(),
color: Theme.of(context).colorScheme.tertiary,
),
const SizedBox(height: 10),
_buildFileImagePicker(),
const SizedBox(height: 10),
FlowyText.semibold(LocaleKeys.document_plugins_cover_abstract.tr()),
FlowyText.semibold(
LocaleKeys.document_plugins_cover_abstract.tr(),
color: Theme.of(context).colorScheme.tertiary,
),
const SizedBox(height: 10),
_buildAbstractImagePicker(),
],

14
frontend/appflowy_flutter/lib/plugins/document/presentation/plugins/cover/cover_node_widget.dart
View File

@ -156,10 +156,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
leftIconSize: const Size.square(18),
onTap: widget.onTap,
useIntrinsicWidth: true,
leftIcon: svgWidget(
'editor/image',
color: Theme.of(context).colorScheme.onSurface,
),
leftIcon: const FlowySvg(name: 'editor/image'),
text: FlowyText.regular(
LocaleKeys.document_plugins_cover_addCover.tr(),
),
@ -174,7 +171,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
useIntrinsicWidth: true,
leftIcon: Icon(
Icons.emoji_emotions_outlined,
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
size: 18,
),
text: FlowyText.regular(LocaleKeys
@ -197,8 +194,7 @@ class _AddCoverButtonState extends State<_AddCoverButton> {
child: FlowyButton(
leftIconSize: const Size.square(18),
useIntrinsicWidth: true,
leftIcon: Icon(Icons.emoji_emotions_outlined,
color: Theme.of(context).colorScheme.onSurface,
leftIcon: const Icon(Icons.emoji_emotions_outlined,
size: 18),
text: FlowyText.regular(
LocaleKeys.document_plugins_cover_addIcon.tr()),
@ -400,7 +396,7 @@ class _CoverImageState extends State<_CoverImage> {
popoverController.show();
},
hoverColor: Theme.of(context).colorScheme.surface,
textColor: Theme.of(context).colorScheme.onSurface,
textColor: Theme.of(context).colorScheme.tertiary,
fillColor: Theme.of(context).colorScheme.surface.withOpacity(0.8),
width: 120,
height: 28,
@ -422,7 +418,7 @@ class _CoverImageState extends State<_CoverImage> {
width: 28,
icon: svgWidget(
'editor/delete',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).colorScheme.tertiary,
),
onPressed: () {
widget.onCoverChanged(CoverSelectionType.initial, null);

10
frontend/appflowy_flutter/lib/plugins/trash/menu.dart
View File

@ -45,13 +45,9 @@ class MenuTrash extends StatelessWidget {
Widget _render(BuildContext context) {
return Row(
children: [
SizedBox(
width: 16,
height: 16,
child: svgWidget(
"home/trash",
color: Theme.of(context).colorScheme.onSurface,
),
const FlowySvg(
size: Size(16, 16),
name: 'home/trash',
),
const HSpace(6),
FlowyText.medium(LocaleKeys.trash_text.tr()),

4
frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart
View File

@ -43,7 +43,7 @@ class TrashCell extends StatelessWidget {
iconPadding: const EdgeInsets.all(5),
icon: svgWidget(
"editor/restore",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
const HSpace(20),
@ -53,7 +53,7 @@ class TrashCell extends StatelessWidget {
iconPadding: const EdgeInsets.all(5),
icon: svgWidget(
"editor/delete",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
],

5
frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart
View File

@ -90,6 +90,7 @@ class _TrashPageState extends State<TrashPage> {
FlowyText.semibold(
LocaleKeys.trash_text.tr(),
fontSize: FontSizes.s16,
color: Theme.of(context).colorScheme.tertiary,
),
const Spacer(),
IntrinsicWidth(
@ -97,7 +98,7 @@ class _TrashPageState extends State<TrashPage> {
text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr()),
leftIcon: svgWidget(
'editor/restore',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onTap: () => context.read<TrashBloc>().add(
const TrashEvent.restoreAll(),
@ -110,7 +111,7 @@ class _TrashPageState extends State<TrashPage> {
text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr()),
leftIcon: svgWidget(
'editor/delete',
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onTap: () =>
context.read<TrashBloc>().add(const TrashEvent.deleteAll()),

1
frontend/appflowy_flutter/lib/user/presentation/widgets/background.dart
View File

@ -49,6 +49,7 @@ class FlowyLogoTitle extends StatelessWidget {
FlowyText.semibold(
title,
fontSize: FontSizes.s24,
color: Theme.of(context).colorScheme.tertiary,
),
],
),

42
frontend/appflowy_flutter/lib/workspace/application/appearance.dart
View File

@ -212,14 +212,20 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
return ThemeData(
brightness: brightness,
textTheme:
_getTextTheme(fontFamily: fontFamily, fontColor: theme.shader1),
textTheme: _getTextTheme(fontFamily: fontFamily, fontColor: theme.text),
textSelectionTheme: TextSelectionThemeData(
cursorColor: theme.main2,
selectionHandleColor: theme.main2,
),
primaryIconTheme: IconThemeData(color: theme.hover),
iconTheme: IconThemeData(color: theme.shader1),
iconTheme: IconThemeData(color: theme.icon),
tooltipTheme: TooltipThemeData(
textStyle: _getFontStyle(
fontFamily: fontFamily,
fontSize: FontSizes.s11,
fontWeight: FontWeight.w400,
fontColor: theme.surface,
),
),
scrollbarTheme: ScrollbarThemeData(
thumbColor: MaterialStateProperty.all(theme.shader3),
thickness: MaterialStateProperty.resolveWith((states) {
@ -239,30 +245,38 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
canvasColor: theme.shader6,
dividerColor: theme.shader6,
hintColor: theme.shader3,
dividerColor: theme.divider,
hintColor: theme.hint,
//action item hover color
hoverColor: theme.hoverBG2,
disabledColor: theme.shader4,
highlightColor: theme.main1,
indicatorColor: theme.main1,
toggleableActiveColor: theme.main1,
cardColor: theme.input,
colorScheme: ColorScheme(
brightness: brightness,
primary: theme.main1,
onPrimary: _white,
primary: theme.primary,
onPrimary: theme.onPrimary,
primaryContainer: theme.main2,
onPrimaryContainer: _white,
secondary: theme.hover,
// page title hover color
secondary: theme.hoverBG1,
onSecondary: theme.shader1,
// setting value hover color
secondaryContainer: theme.selector,
onSecondaryContainer: theme.shader1,
onSecondaryContainer: theme.topbarBg,
tertiary: theme.shader7,
tertiaryContainer: theme.questionBubbleBG,
background: theme.surface,
onBackground: theme.shader1,
onBackground: theme.text,
surface: theme.surface,
onSurface: theme.shader1,
// text&icon color when it is hovered
onSurface: theme.hoverFG,
onError: theme.shader7,
error: theme.red,
outline: theme.shader4,
surfaceVariant: theme.bg1,
surfaceVariant: theme.sidebarBg,
shadow: theme.shadow,
),
extensions: [
@ -278,7 +292,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
tint7: theme.tint7,
tint8: theme.tint8,
tint9: theme.tint9,
greyHover: theme.bg2,
greyHover: theme.hoverBG1,
greySelect: theme.bg3,
lightGreyHover: theme.shader6,
toggleOffFill: theme.shader5,

2
frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
View File

@ -36,7 +36,7 @@ extension ViewExtension on ViewPB {
Widget renderThumbnail({Color? iconColor}) {
String thumbnail = "file_icon";
final Widget widget = svgWidget(thumbnail, color: iconColor);
final Widget widget = FlowySvg(name: thumbnail);
return widget;
}

2
frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart
View File

@ -199,7 +199,7 @@ class HomeTopBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).colorScheme.surface,
color: Theme.of(context).colorScheme.onSecondaryContainer,
height: HomeSizes.topBarHeight,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,

9
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/create_button.dart
View File

@ -18,9 +18,14 @@ class NewAppButton extends StatelessWidget {
LocaleKeys.newPageText.tr(),
fillColor: Colors.transparent,
hoverColor: Colors.transparent,
fontColor: Theme.of(context).colorScheme.onSurfaceVariant,
fontColor: Theme.of(context).colorScheme.tertiary,
onPressed: () async => await _showCreateAppDialog(context),
heading: svgWidget("home/new_app", size: const Size(16, 16)),
heading: Theme.of(context).brightness == Brightness.light
? svgWidget("home/new_app", size: const Size(16, 16))
: svgWidget(
"home/new_app_dark",
size: const Size(16, 16),
),
padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
);

30
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart
View File

@ -6,9 +6,9 @@ import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
import 'package:appflowy_editor/appflowy_editor.dart' show Document;
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flutter/material.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
@ -50,13 +50,19 @@ class AddButton extends StatelessWidget {
actions: actions,
offset: const Offset(0, 8),
buildChild: (controller) {
return FlowyIconButton(
return SizedBox(
width: 22,
onPressed: () => controller.show(),
icon: svgWidget(
"home/add",
color: Theme.of(context).colorScheme.onSurface,
).padding(horizontal: 3, vertical: 3),
child: InkWell(
onTap: () => controller.show(),
child: FlowyHover(
style: HoverStyle(
hoverColor: AFThemeExtension.of(context).greySelect,
),
builder: (context, onHover) => const FlowySvg(
name: 'home/add',
),
),
),
);
},
onSelected: (action, controller) {
@ -83,8 +89,7 @@ class AddButtonActionWrapper extends ActionCell {
AddButtonActionWrapper({required this.pluginBuilder});
@override
Widget? leftIcon(Color iconColor) =>
svgWidget(pluginBuilder.menuIcon, color: iconColor);
Widget? leftIcon(Color iconColor) => FlowySvg(name: pluginBuilder.menuIcon);
@override
String get name => pluginBuilder.menuName;
@ -100,9 +105,8 @@ class ImportActionWrapper extends ActionCell {
});
@override
Widget? leftIcon(Color iconColor) => svgWidget(
'editor/import',
color: iconColor,
Widget? leftIcon(Color iconColor) => const FlowySvg(
name: 'editor/import',
);
@override

10
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart
View File

@ -5,7 +5,6 @@ import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:expandable/expandable.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra/icon_data.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/app.pb.dart';
@ -15,7 +14,6 @@ import 'package:appflowy/workspace/application/app/app_bloc.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:flowy_infra/image.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
import '../menu_app.dart';
import 'add_button.dart';
@ -58,7 +56,7 @@ class MenuAppHeader extends StatelessWidget {
theme: ExpandableThemeData(
expandIcon: FlowyIconData.drop_down_show,
collapseIcon: FlowyIconData.drop_down_hide,
iconColor: Theme.of(context).colorScheme.onSurface,
iconColor: Theme.of(context).colorScheme.tertiary,
iconSize: MenuAppSizes.iconSize,
iconPadding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
hasIcon: false,
@ -104,7 +102,6 @@ class MenuAppHeader extends StatelessWidget {
Widget _renderCreateViewButton(BuildContext context) {
return Tooltip(
message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: AddButton(
onSelected: (pluginBuilder, document) {
context.read<AppBloc>().add(
@ -139,9 +136,9 @@ extension AppDisclosureExtension on AppDisclosureAction {
Widget icon(Color iconColor) {
switch (this) {
case AppDisclosureAction.rename:
return svgWidget('editor/edit', color: iconColor);
return const FlowySvg(name: 'editor/edit');
case AppDisclosureAction.delete:
return svgWidget('editor/delete', color: iconColor);
return const FlowySvg(name: 'editor/delete');
}
}
}
@ -174,6 +171,7 @@ class AppActionList extends StatelessWidget {
builder: (context, app) => FlowyText.medium(
app.name,
overflow: TextOverflow.ellipsis,
color: Theme.of(context).colorScheme.tertiary,
),
),
);

1
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart
View File

@ -24,6 +24,7 @@ Future<void> showImportPanel(
title: FlowyText.semibold(
LocaleKeys.moreAction_import.tr(),
fontSize: 20,
color: Theme.of(context).colorScheme.tertiary,
),
content: _ImportPanel(importCallback: callback),
contentPadding: const EdgeInsets.symmetric(

15
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/section/item.dart
View File

@ -4,7 +4,6 @@ import 'package:appflowy/workspace/application/view/view_ext.dart';
import 'package:appflowy/workspace/presentation/home/menu/menu.dart';
import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
@ -51,7 +50,7 @@ class ViewSectionItem extends StatelessWidget {
onTap: () => onSelected(blocContext.read<ViewBloc>().state.view),
child: FlowyHover(
style: HoverStyle(
hoverColor: AFThemeExtension.of(context).greySelect,
hoverColor: Theme.of(context).colorScheme.secondary,
),
// If current state.isEditing is true, the hover should not
// rebuild when onEnter/onExit events happened.
@ -60,7 +59,6 @@ class ViewSectionItem extends StatelessWidget {
blocContext,
onHover,
state,
Theme.of(context).colorScheme.onSurface,
),
isSelected: () => state.isEditing || isSelected,
),
@ -75,13 +73,12 @@ class ViewSectionItem extends StatelessWidget {
BuildContext blocContext,
bool onHover,
ViewState state,
Color iconColor,
) {
List<Widget> children = [
SizedBox(
width: 16,
height: 16,
child: state.view.renderThumbnail(iconColor: iconColor),
child: state.view.renderThumbnail(),
),
const HSpace(2),
Expanded(
@ -154,11 +151,11 @@ extension ViewDisclosureExtension on ViewDisclosureAction {
Widget icon(Color iconColor) {
switch (this) {
case ViewDisclosureAction.rename:
return svgWidget('editor/edit', color: iconColor);
return const FlowySvg(name: 'editor/edit');
case ViewDisclosureAction.delete:
return svgWidget('editor/delete', color: iconColor);
return const FlowySvg(name: 'editor/delete');
case ViewDisclosureAction.duplicate:
return svgWidget('editor/copy', color: iconColor);
return const FlowySvg(name: 'editor/copy');
}
}
}
@ -186,7 +183,7 @@ class ViewDisclosureButton extends StatelessWidget {
width: 26,
icon: svgWidget(
"editor/details",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
onPressed: () {
onEdit(true);

2
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu.dart
View File

@ -229,7 +229,7 @@ class MenuTopBar extends StatelessWidget {
iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
icon: svgWidget(
"home/hide_menu",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
),
)

6
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart
View File

@ -2,7 +2,6 @@ import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/workspace/application/menu/menu_user_bloc.dart';
import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
@ -13,7 +12,6 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
class MenuUser extends StatelessWidget {
final UserProfilePB user;
@ -69,6 +67,7 @@ class MenuUser extends StatelessWidget {
return FlowyText.medium(
name,
overflow: TextOverflow.ellipsis,
color: Theme.of(context).colorScheme.tertiary,
);
}
@ -76,7 +75,6 @@ class MenuUser extends StatelessWidget {
final userProfile = context.read<MenuUserBloc>().state.userProfile;
return Tooltip(
message: LocaleKeys.settings_menu_open.tr(),
textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: IconButton(
onPressed: () {
showDialog(
@ -90,7 +88,7 @@ class MenuUser extends StatelessWidget {
dimension: 20,
child: svgWidget(
"home/settings",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).colorScheme.tertiary,
),
),
),

6
frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
View File

@ -6,14 +6,12 @@ import 'package:appflowy/workspace/presentation/home/home_stack.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/icon_button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:provider/provider.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
typedef NaviAction = void Function();
@ -87,7 +85,7 @@ class FlowyNavigation extends StatelessWidget {
iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
icon: svgWidget(
"home/hide_menu",
color: Theme.of(context).colorScheme.onSurface,
color: Theme.of(context).iconTheme.color,
),
)),
);
@ -180,11 +178,9 @@ TextSpan sidebarTooltipTextSpan(BuildContext context, String hintText) =>
children: [
TextSpan(
text: "$hintText\n",
style: AFThemeExtension.of(context).callout.textColor(Colors.white),
),
TextSpan(
text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
style: AFThemeExtension.of(context).caption.textColor(Colors.white60),
),
],
);

5
frontend/appflowy_flutter/lib/workspace/presentation/settings/settings_dialog.dart
View File

@ -32,6 +32,7 @@ class SettingsDialog extends StatelessWidget {
LocaleKeys.settings_title.tr(),
fontSize: 20,
fontWeight: FontWeight.w700,
color: Theme.of(context).colorScheme.tertiary,
),
),
child: ScaffoldMessenger(
@ -54,7 +55,9 @@ class SettingsDialog extends StatelessWidget {
context.read<SettingsDialogBloc>().state.page,
),
),
const VerticalDivider(),
VerticalDivider(
color: Theme.of(context).dividerColor,
),
const SizedBox(width: 10),
Expanded(
child: getSettingsView(

4
frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
View File

@ -50,8 +50,8 @@ class ThemeSetting extends StatelessWidget {
direction: PopoverDirection.bottomWithRightAligned,
child: FlowyTextButton(
currentTheme,
fontColor: Theme.of(context).colorScheme.onBackground,
fillColor: Colors.transparent,
hoverColor: Theme.of(context).colorScheme.secondary,
onPressed: () {},
),
popupBuilder: (BuildContext context) {
@ -107,8 +107,8 @@ class ThemeModeSetting extends StatelessWidget {
direction: PopoverDirection.bottomWithRightAligned,
child: FlowyTextButton(
_themeModeLabelText(currentThemeMode),
fontColor: Theme.of(context).colorScheme.onBackground,
fillColor: Colors.transparent,
hoverColor: Theme.of(context).colorScheme.secondary,
onPressed: () {},
),
popupBuilder: (BuildContext context) {

8
frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_language_view.dart
View File

@ -47,7 +47,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
void hoverEnterLanguage() {
setState(() {
currHoverColor = Theme.of(context).colorScheme.primary;
currHoverColor = Theme.of(context).colorScheme.secondaryContainer;
});
}
@ -67,6 +67,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
padding: const EdgeInsets.symmetric(horizontal: 6),
child: DropdownButton<Locale>(
value: context.locale,
dropdownColor: Theme.of(context).cardColor,
onChanged: (locale) {
context
.read<AppearanceSettingsCubit>()
@ -80,7 +81,10 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
value: locale,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: FlowyText.medium(languageFromLocale(locale)),
child: FlowyText.medium(
languageFromLocale(locale),
color: Theme.of(context).colorScheme.tertiary,
),
),
);
}).toList(),

48
frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
View File

@ -1,5 +1,6 @@
import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
@ -21,29 +22,32 @@ class SettingsMenuElement extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListTile(
leading: Icon(
icon,
size: 16,
color: page == selectedPage
? Theme.of(context).colorScheme.onSurface
: Theme.of(context).colorScheme.onSurface,
return FlowyHover(
style: HoverStyle(
hoverColor: Theme.of(context).colorScheme.primary,
),
onTap: () {
changeSelectedPage(page);
},
selected: page == selectedPage,
selectedColor: Theme.of(context).colorScheme.onSurface,
selectedTileColor: Theme.of(context).colorScheme.primaryContainer,
hoverColor: Theme.of(context).colorScheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
minLeadingWidth: 0,
title: FlowyText.semibold(
label,
fontSize: FontSizes.s14,
overflow: TextOverflow.ellipsis,
child: ListTile(
leading: Icon(icon,
size: 16,
color: page == selectedPage
? Theme.of(context).colorScheme.onSurface
: null),
onTap: () {
changeSelectedPage(page);
},
selected: page == selectedPage,
selectedColor: Theme.of(context).colorScheme.onSurface,
selectedTileColor: Theme.of(context).colorScheme.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
minLeadingWidth: 0,
title: FlowyText.semibold(label,
fontSize: FontSizes.s14,
overflow: TextOverflow.ellipsis,
color: page == selectedPage
? Theme.of(context).colorScheme.onSurface
: null),
),
);
}

3
frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
View File

@ -48,6 +48,9 @@ class BubbleActionList extends StatelessWidget {
'?',
tooltip: LocaleKeys.questionBubble_help.tr(),
fontWeight: FontWeight.w600,
fontColor: Theme.of(context).colorScheme.tertiary,
fillColor: Theme.of(context).colorScheme.tertiaryContainer,
hoverColor: Theme.of(context).colorScheme.tertiaryContainer,
mainAxisAlignment: MainAxisAlignment.center,
radius: Corners.s10Border,
onPressed: () => controller.show(),

29
frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/colorscheme.dart
View File

@ -56,6 +56,22 @@ abstract class FlowyColorScheme {
final Color main1;
final Color main2;
final Color shadow;
final Color sidebarBg;
final Color divider;
final Color topbarBg;
final Color icon;
final Color text;
final Color input;
final Color hint;
final Color primary;
final Color onPrimary;
//page title hover effect
final Color hoverBG1;
//action item hover effect
final Color hoverBG2;
//the text color when it is hovered
final Color hoverFG;
final Color questionBubbleBG;
const FlowyColorScheme({
required this.surface,
@ -87,6 +103,19 @@ abstract class FlowyColorScheme {
required this.main1,
required this.main2,
required this.shadow,
required this.sidebarBg,
required this.divider,
required this.topbarBg,
required this.icon,
required this.text,
required this.input,
required this.hint,
required this.primary,
required this.onPrimary,
required this.hoverBG1,
required this.hoverBG2,
required this.hoverFG,
required this.questionBubbleBG,
});
factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {

57
frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart
View File

@ -4,6 +4,21 @@ import 'colorscheme.dart';
const _black = Color(0xff000000);
const _white = Color(0xFFFFFFFF);
const _lightHover = Color(0xFFe0f8ff);
const _lightSelector = Color(0xfff2fcff);
const _lightBg1 = Color(0xFFFFD13E);
const _lightBg2 = Color(0xffedeef2);
const _lightShader1 = Color(0xff333333);
const _lightShader3 = Color(0xff828282);
const _lightShader6 = Color(0xfff2f2f2);
const _lightMain1 = Color(0xffe21f74);
const _darkShader1 = Color(0xff131720);
const _darkShader2 = Color(0xff1A202C);
const _darkShader3 = Color(0xff363D49);
const _darkShader5 = Color(0xffBBC3CD);
const _darkShader6 = Color(0xffF2F2F2);
const _darkMain1 = Color(0xffe21f74);
class DandelionColorScheme extends FlowyColorScheme {
const DandelionColorScheme.light()
@ -20,8 +35,8 @@ class DandelionColorScheme extends FlowyColorScheme {
shader4: const Color(0xffbdbdbd),
shader5: const Color(0xffe0e0e0),
shader6: const Color(0xfff2f2f2),
shader7: const Color(0xffffffff),
bg1: const Color(0xFFFFD13E),
shader7: _black,
bg1: _lightBg1,
bg2: const Color(0xffedeef2),
bg3: const Color(0xffe2e4eb),
bg4: const Color(0xff2c144b),
@ -34,9 +49,22 @@ class DandelionColorScheme extends FlowyColorScheme {
tint7: const Color(0xffddffd6),
tint8: const Color(0xffdefff1),
tint9: const Color(0xffe1fbff),
main1: const Color(0xffe21f74),
main1: _lightMain1,
main2: const Color.fromARGB(255, 224, 25, 111),
shadow: _black,
sidebarBg: _lightBg1,
divider: _lightShader6,
topbarBg: _white,
icon: _lightShader1,
text: _lightShader1,
input: _white,
hint: _lightShader3,
primary: _lightMain1,
onPrimary: _white,
hoverBG1: _lightBg2,
hoverBG2: _lightHover,
hoverFG: _lightShader1,
questionBubbleBG: _lightSelector,
);
const DandelionColorScheme.dark()
@ -48,12 +76,12 @@ class DandelionColorScheme extends FlowyColorScheme {
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
shader1: _white,
shader2: const Color(0xffffffff),
shader2: _darkShader2,
shader3: const Color(0xff828282),
shader4: const Color(0xffbdbdbd),
shader5: _white,
shader6: _black,
shader7: _black,
shader5: _darkShader5,
shader6: _darkShader6,
shader7: _white,
bg1: const Color(0xFFD5A200),
bg2: _black,
bg3: const Color(0xff4f4f4f),
@ -67,8 +95,21 @@ class DandelionColorScheme extends FlowyColorScheme {
tint7: const Color(0xffbcffad),
tint8: const Color(0xffadffe2),
tint9: const Color(0xffade4ff),
main1: const Color(0xffe21f74),
main1: _darkMain1,
main2: const Color.fromARGB(255, 224, 25, 111),
shadow: _black,
sidebarBg: const Color(0xff232B38),
divider: _darkShader3,
topbarBg: _darkShader1,
icon: _darkShader5,
text: _darkShader5,
input: const Color(0xff282E3A),
hint: _darkShader5,
primary: _darkMain1,
onPrimary: _darkShader1,
hoverBG1: _darkMain1,
hoverBG2: _darkMain1,
hoverFG: _darkShader1,
questionBubbleBG: _darkShader3,
);
}

116
frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
View File

@ -4,25 +4,39 @@ import 'colorscheme.dart';
const _black = Color(0xff000000);
const _white = Color(0xFFFFFFFF);
const _lightHover = Color(0xFFe0f8ff);
const _lightSelector = Color(0xfff2fcff);
const _lightBg1 = Color(0xfff7f8fc);
const _lightBg2 = Color(0xffedeef2);
const _lightShader1 = Color(0xff333333);
const _lightShader3 = Color(0xff828282);
const _lightShader6 = Color(0xfff2f2f2);
const _lightMain1 = Color(0xff00bcf0);
const _darkShader1 = Color(0xff131720);
const _darkShader2 = Color(0xff1A202C);
const _darkShader3 = Color(0xff363D49);
const _darkShader5 = Color(0xffBBC3CD);
const _darkShader6 = Color(0xffF2F2F2);
const _darkMain1 = Color(0xff00BCF0);
class DefaultColorScheme extends FlowyColorScheme {
const DefaultColorScheme.light()
: super(
surface: Colors.white,
hover: const Color(0xFFe0f8ff),
selector: const Color(0xfff2fcff),
surface: _white,
hover: _lightHover,
selector: _lightSelector,
red: const Color(0xfffb006d),
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
shader1: const Color(0xff333333),
shader1: _lightShader1,
shader2: const Color(0xff4f4f4f),
shader3: const Color(0xff828282),
shader3: _lightShader3,
shader4: const Color(0xffbdbdbd),
shader5: const Color(0xffe0e0e0),
shader6: const Color(0xfff2f2f2),
shader7: const Color(0xffffffff),
bg1: const Color(0xfff7f8fc),
bg2: const Color(0xffedeef2),
shader6: _lightShader6,
shader7: _lightShader1,
bg1: _lightBg1,
bg2: _lightBg2,
bg3: const Color(0xffe2e4eb),
bg4: const Color(0xff2c144b),
tint1: const Color(0xffe8e0ff),
@ -34,41 +48,67 @@ class DefaultColorScheme extends FlowyColorScheme {
tint7: const Color(0xffddffd6),
tint8: const Color(0xffdefff1),
tint9: const Color(0xffe1fbff),
main1: const Color(0xff00bcf0),
main1: _lightMain1,
main2: const Color(0xff00b7ea),
shadow: _black,
sidebarBg: _lightBg1,
divider: _lightShader6,
topbarBg: _white,
icon: _lightShader1,
text: _lightShader1,
input: _white,
hint: _lightShader3,
primary: _lightMain1,
onPrimary: _white,
hoverBG1: _lightBg2,
hoverBG2: _lightHover,
hoverFG: _lightShader1,
questionBubbleBG: _lightSelector,
);
const DefaultColorScheme.dark()
: super(
surface: const Color(0xff292929),
hover: const Color(0xff1f1f1f),
selector: const Color(0xff333333),
surface: _darkShader2,
hover: _darkMain1,
selector: _darkShader2,
red: const Color(0xfffb006d),
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
shader1: _white,
shader2: const Color(0xffffffff),
shader3: const Color(0xff828282),
shader4: const Color(0xffbdbdbd),
shader5: _white,
shader6: _black,
shader7: _black,
bg1: _black,
bg2: _black,
bg3: const Color(0xff4f4f4f),
bg4: const Color(0xff2c144b),
tint1: const Color(0xffc3adff),
tint2: const Color(0xffffadf9),
tint3: const Color(0xffffadad),
tint4: const Color(0xffffcfad),
tint5: const Color(0xfffffead),
tint6: const Color(0xffe6ffa3),
tint7: const Color(0xffbcffad),
tint8: const Color(0xffadffe2),
tint9: const Color(0xffade4ff),
main1: const Color(0xff00bcf0),
main2: const Color(0xff009cc7),
shadow: _black,
yellow: const Color(0xffF7CF46),
green: const Color(0xff66CF80),
shader1: _darkShader1,
shader2: _darkShader2,
shader3: _darkShader3,
shader4: const Color(0xff7C8CA5),
shader5: _darkShader5,
shader6: _darkShader6,
shader7: _white,
bg1: const Color(0xffF7F8FC),
bg2: const Color(0xffEDEEF2),
bg3: _darkMain1,
bg4: const Color(0xff2C144B),
tint1: const Color(0xff8738F5),
tint2: const Color(0xffE6336E),
tint3: const Color(0xffFF2D9E),
tint4: const Color(0xffE9973E),
tint5: const Color(0xffFBF000),
tint6: const Color(0xffC0F000),
tint7: const Color(0xff15F74E),
tint8: const Color(0xff00F0E2),
tint9: const Color(0xff00BCF0),
main1: _darkMain1,
main2: const Color(0xff00B7EA),
shadow: const Color(0xff0F131C),
sidebarBg: const Color(0xff232B38),
divider: _darkShader3,
topbarBg: _darkShader1,
icon: _darkShader5,
text: _darkShader5,
input: const Color(0xff282E3A),
hint: _darkShader5,
primary: _darkMain1,
onPrimary: _darkShader1,
hoverBG1: _darkMain1,
hoverBG2: _darkMain1,
hoverFG: _darkShader1,
questionBubbleBG: _darkShader3,
);
}

54
frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart
View File

@ -5,6 +5,22 @@ import 'colorscheme.dart';
const _black = Color(0xff000000);
const _white = Color(0xFFFFFFFF);
const _lightHover = Color(0xFFe0f8ff);
const _lightSelector = Color(0xfff2fcff);
const _lightBg1 = Color(0xfff7f8fc);
const _lightBg2 = Color(0xffedeef2);
const _lightShader1 = Color(0xff333333);
const _lightShader3 = Color(0xff828282);
const _lightShader6 = Color(0xfff2f2f2);
const _lightMain1 = Color(0xffA652FB);
const _darkShader1 = Color(0xff131720);
const _darkShader2 = Color(0xff1A202C);
const _darkShader3 = Color(0xff363D49);
const _darkShader5 = Color(0xffBBC3CD);
const _darkShader6 = Color(0xffF2F2F2);
const _darkMain1 = Color(0xffA652FB);
class LavenderColorScheme extends FlowyColorScheme {
const LavenderColorScheme.light()
: super(
@ -20,7 +36,7 @@ class LavenderColorScheme extends FlowyColorScheme {
shader4: const Color(0xffbdbdbd),
shader5: const Color(0xffe0e0e0),
shader6: const Color(0xfff2f2f2),
shader7: const Color(0xffffffff),
shader7: _black,
bg1: const Color(0xffAC59FF),
bg2: const Color(0xffedeef2),
bg3: const Color(0xffe2e4eb),
@ -34,9 +50,22 @@ class LavenderColorScheme extends FlowyColorScheme {
tint7: const Color(0xffddffd6),
tint8: const Color(0xffdefff1),
tint9: const Color(0xffe1fbff),
main1: const Color(0xffA652FB),
main1: _lightMain1,
main2: const Color(0xff9327FF),
shadow: _black,
sidebarBg: _lightBg1,
divider: _lightShader6,
topbarBg: _white,
icon: _lightShader1,
text: _lightShader1,
input: _white,
hint: _lightShader3,
primary: _lightMain1,
onPrimary: _white,
hoverBG1: _lightBg2,
hoverBG2: _lightHover,
hoverFG: _lightShader1,
questionBubbleBG: _lightSelector,
);
const LavenderColorScheme.dark()
@ -48,12 +77,12 @@ class LavenderColorScheme extends FlowyColorScheme {
yellow: const Color(0xffffd667),
green: const Color(0xff66cf80),
shader1: _white,
shader2: const Color(0xffffffff),
shader2: _darkShader2,
shader3: const Color(0xff828282),
shader4: const Color(0xffbdbdbd),
shader5: _white,
shader6: _black,
shader7: _black,
shader6: _darkShader6,
shader7: _white,
bg1: const Color(0xff8C23F6),
bg2: _black,
bg3: const Color(0xff4f4f4f),
@ -67,8 +96,21 @@ class LavenderColorScheme extends FlowyColorScheme {
tint7: const Color(0xffbcffad),
tint8: const Color(0xffadffe2),
tint9: const Color(0xffade4ff),
main1: const Color(0xffA652FB),
main1: _darkMain1,
main2: const Color(0xff9327FF),
shadow: _black,
sidebarBg: const Color(0xff232B38),
divider: _darkShader3,
topbarBg: _darkShader1,
icon: _darkShader5,
text: _darkShader5,
input: const Color(0xff282E3A),
hint: _darkShader5,
primary: _darkMain1,
onPrimary: _darkShader1,
hoverBG1: _darkMain1,
hoverBG2: _darkMain1,
hoverFG: _darkShader1,
questionBubbleBG: _darkShader3,
);
}

26
frontend/appflowy_flutter/packages/flowy_infra/lib/image.dart
View File

@ -1,6 +1,30 @@
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';
/// For icon that needs to change color when it is on hovered
///
/// Get the hover color from ThemeData
class FlowySvg extends StatelessWidget {
const FlowySvg({super.key, this.size, required this.name});
final String name;
final Size? size;
@override
Widget build(BuildContext context) {
if (size != null) {
return SizedBox.fromSize(
size: size,
child: SvgPicture.asset('assets/images/$name.svg',
color: Theme.of(context).iconTheme.color),
);
} else {
return SvgPicture.asset('assets/images/$name.svg',
color: Theme.of(context).iconTheme.color);
}
}
}
Widget svgWidget(String name, {Size? size, Color? color}) {
if (size != null) {
return SizedBox.fromSize(

2
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart
View File

@ -81,7 +81,7 @@ class _PopoverContainer extends StatelessWidget {
Widget build(BuildContext context) {
final decoration = this.decoration ??
FlowyDecoration.decoration(
Theme.of(context).colorScheme.surface,
Theme.of(context).cardColor,
Theme.of(context).colorScheme.shadow.withOpacity(0.15),
);

1
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_dialog.dart
View File

@ -26,6 +26,7 @@ class FlowyDialog extends StatelessWidget {
final size = windowSize * 0.7;
return SimpleDialog(
contentPadding: EdgeInsets.zero,
backgroundColor: Theme.of(context).cardColor,
title: title,
shape: shape ??
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),

7
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
View File

@ -1,11 +1,9 @@
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/material.dart';
import 'package:textstyle_extensions/textstyle_extensions.dart';
class FlowyButton extends StatelessWidget {
final Widget text;
@ -177,7 +175,8 @@ class FlowyTextButton extends StatelessWidget {
highlightElevation: 0,
shape: RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
fillColor: fillColor ?? Theme.of(context).colorScheme.secondaryContainer,
hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
hoverColor:
hoverColor ?? Theme.of(context).colorScheme.secondaryContainer,
focusColor: Colors.transparent,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
@ -195,7 +194,6 @@ class FlowyTextButton extends StatelessWidget {
if (tooltip != null) {
child = Tooltip(
message: tooltip!,
textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: child,
);
}
@ -285,7 +283,6 @@ class FlowyRichTextButton extends StatelessWidget {
if (tooltip != null) {
child = Tooltip(
message: tooltip!,
textStyle: AFThemeExtension.of(context).caption.textColor(Colors.white),
child: child,
);
}

17
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/hover.dart
View File

@ -137,7 +137,22 @@ class FlowyHoverContainer extends StatelessWidget {
color: style.hoverColor ?? Theme.of(context).colorScheme.secondary,
borderRadius: style.borderRadius,
),
child: child,
child:
//override text's theme with new color when it is hovered
Theme(
data: Theme.of(context).copyWith(
textTheme: Theme.of(context).textTheme.copyWith(
bodyMedium: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(color: Theme.of(context).colorScheme.onSurface),
),
iconTheme: Theme.of(context)
.iconTheme
.copyWith(color: Theme.of(context).colorScheme.onSurface),
),
child: child!,
),
);
}
}

10
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
View File

@ -9,7 +9,7 @@ class BaseStyledButton extends StatefulWidget {
final Color? bgColor;
final Color? focusColor;
final Color? hoverColor;
final Color? downColor;
final Color? highlightColor;
final EdgeInsets? contentPadding;
final double? minWidth;
final double? minHeight;
@ -34,7 +34,7 @@ class BaseStyledButton extends StatefulWidget {
this.minHeight,
this.borderRadius,
this.hoverColor,
this.downColor,
this.highlightColor,
this.shape,
this.useBtnText = true,
this.autoFocus = false,
@ -116,10 +116,8 @@ class BaseStyledBtnState extends State<BaseStyledButton> {
highlightElevation: 0,
focusElevation: 0,
fillColor: Colors.transparent,
hoverColor:
widget.hoverColor ?? Theme.of(context).colorScheme.secondary,
highlightColor:
widget.downColor ?? Theme.of(context).colorScheme.primary,
hoverColor: widget.hoverColor ?? Colors.transparent,
highlightColor: widget.highlightColor ?? Colors.transparent,
focusColor: widget.focusColor ?? Colors.grey.withOpacity(0.35),
constraints: BoxConstraints(
minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0),

1
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/primary_button.dart
View File

@ -42,7 +42,6 @@ class PrimaryButton extends StatelessWidget {
contentPadding: EdgeInsets.zero,
bgColor: Theme.of(context).colorScheme.primary,
hoverColor: Theme.of(context).colorScheme.primaryContainer,
downColor: Theme.of(context).colorScheme.primary,
borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
onPressed: onPressed,
child: child,

2
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/buttons/secondary_button.dart
View File

@ -42,8 +42,6 @@ class SecondaryButton extends StatelessWidget {
minHeight: bigMode ? 40 : 38,
contentPadding: EdgeInsets.zero,
bgColor: Theme.of(context).colorScheme.surface,
hoverColor: Theme.of(context).colorScheme.secondary,
downColor: Theme.of(context).colorScheme.primary,
outlineColor: Theme.of(context).colorScheme.primary,
borderRadius: bigMode ? Corners.s12Border : Corners.s8Border,
onPressed: onPressed,