From 5e56f5e0ecb3900d39a17f8ba8eca0f5a9c9819e Mon Sep 17 00:00:00 2001 From: Sean RIley Hawkins Date: Sun, 9 Jan 2022 13:22:17 +0200 Subject: [PATCH] Fixed Dark Mode Bugs --- .../assets/images/flowy_logo_dark_mode.svg | 112 ++++++++++++++++++ .../domain/edit_action/app_edit.dart | 4 +- .../domain/edit_action/view_edit.dart | 6 +- .../app_flowy/lib/workspace/domain/image.dart | 4 +- .../widget/app/section/disclosure_action.dart | 5 +- .../widgets/menu/widget/app/section/item.dart | 6 +- .../widgets/menu/widget/menu_trash.dart | 4 +- .../widgets/menu/widget/top_bar.dart | 9 +- .../packages/flowy_infra/lib/theme.dart | 30 ++--- 9 files changed, 151 insertions(+), 29 deletions(-) create mode 100644 frontend/app_flowy/assets/images/flowy_logo_dark_mode.svg diff --git a/frontend/app_flowy/assets/images/flowy_logo_dark_mode.svg b/frontend/app_flowy/assets/images/flowy_logo_dark_mode.svg new file mode 100644 index 0000000000..911f37152b --- /dev/null +++ b/frontend/app_flowy/assets/images/flowy_logo_dark_mode.svg @@ -0,0 +1,112 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/app_flowy/lib/workspace/domain/edit_action/app_edit.dart b/frontend/app_flowy/lib/workspace/domain/edit_action/app_edit.dart index bca476e956..7ce5d3682c 100644 --- a/frontend/app_flowy/lib/workspace/domain/edit_action/app_edit.dart +++ b/frontend/app_flowy/lib/workspace/domain/edit_action/app_edit.dart @@ -21,9 +21,9 @@ extension AppDisclosureExtension on AppDisclosureAction { Widget get icon { switch (this) { case AppDisclosureAction.rename: - return svg('editor/edit'); + return svg('editor/edit', color: const Color(0xffe5e5e5)); case AppDisclosureAction.delete: - return svg('editor/delete'); + return svg('editor/delete', color: const Color(0xffe5e5e5)); } } } diff --git a/frontend/app_flowy/lib/workspace/domain/edit_action/view_edit.dart b/frontend/app_flowy/lib/workspace/domain/edit_action/view_edit.dart index 39a0b44aac..31a3c14307 100644 --- a/frontend/app_flowy/lib/workspace/domain/edit_action/view_edit.dart +++ b/frontend/app_flowy/lib/workspace/domain/edit_action/view_edit.dart @@ -24,11 +24,11 @@ extension ViewDisclosureExtension on ViewDisclosureAction { Widget get icon { switch (this) { case ViewDisclosureAction.rename: - return svg('editor/edit'); + return svg('editor/edit', color: const Color(0xff999999)); case ViewDisclosureAction.delete: - return svg('editor/delete'); + return svg('editor/delete', color: const Color(0xff999999)); case ViewDisclosureAction.duplicate: - return svg('editor/copy'); + return svg('editor/copy', color: const Color(0xff999999)); } } } diff --git a/frontend/app_flowy/lib/workspace/domain/image.dart b/frontend/app_flowy/lib/workspace/domain/image.dart index de61f144e6..2a41964b7d 100644 --- a/frontend/app_flowy/lib/workspace/domain/image.dart +++ b/frontend/app_flowy/lib/workspace/domain/image.dart @@ -8,9 +8,9 @@ AssetImage assetImageForViewType(ViewType type) { } extension SvgViewType on View { - Widget thumbnail() { + Widget thumbnail(Color iconColor) { final imageName = _imageNameForViewType(viewType); - final Widget widget = svg(imageName); + final Widget widget = svg(imageName, color: iconColor); return widget; } } diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/disclosure_action.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/disclosure_action.dart index 32aca2ded0..95bc5bf050 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/disclosure_action.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/disclosure_action.dart @@ -5,6 +5,8 @@ import 'package:flowy_infra/image.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart'; import 'package:flutter/material.dart'; +import 'package:flowy_infra/theme.dart'; +import 'package:provider/provider.dart'; // [[Widget: LifeCycle]] // https://flutterbyexample.com/lesson/stateful-widget-lifecycle @@ -23,6 +25,7 @@ class ViewDisclosureButton extends StatelessWidget @override Widget build(BuildContext context) { + final theme = context.watch(); return FlowyIconButton( iconPadding: const EdgeInsets.all(5), width: 26, @@ -30,7 +33,7 @@ class ViewDisclosureButton extends StatelessWidget onTap(); show(context, context); }, - icon: svg("editor/details"), + icon: svg("editor/details", color: theme.textColor), ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/item.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/item.dart index e83c995dd2..189ed88ac4 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/item.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/section/item.dart @@ -44,7 +44,7 @@ class ViewSectionItem extends StatelessWidget { onTap: () => onSelected(context.read().state.view), child: FlowyHover( config: HoverDisplayConfig(hoverColor: theme.bg3), - builder: (_, onHover) => _render(context, onHover, state), + builder: (_, onHover) => _render(context, onHover, state, theme.textColor), isOnSelected: () => state.isEditing || isSelected, ), ); @@ -53,9 +53,9 @@ class ViewSectionItem extends StatelessWidget { ); } - Widget _render(BuildContext context, bool onHover, ViewState state) { + Widget _render(BuildContext context, bool onHover, ViewState state, Color icon) { List children = [ - SizedBox(width: 16, height: 16, child: state.view.thumbnail()), + SizedBox(width: 16, height: 16, child: state.view.thumbnail(icon)), const HSpace(2), Expanded(child: FlowyText.regular(state.view.name, fontSize: 12, overflow: TextOverflow.clip)), ]; diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_trash.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_trash.dart index 73bcbe40b8..e5dd4b3d20 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_trash.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/menu_trash.dart @@ -9,6 +9,7 @@ import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:app_flowy/generated/locale_keys.g.dart'; +import 'package:flowy_infra/theme.dart'; class MenuTrash extends StatelessWidget { const MenuTrash({Key? key}) : super(key: key); @@ -28,8 +29,9 @@ class MenuTrash extends StatelessWidget { } Widget _render(BuildContext context) { + final theme = context.watch(); return Row(children: [ - SizedBox(width: 16, height: 16, child: svg("home/trash")), + SizedBox(width: 16, height: 16, child: svg("home/trash", color: theme.textColor)), const HSpace(6), FlowyText.medium(LocaleKeys.trash_text.tr(), fontSize: 12), ]); diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/top_bar.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/top_bar.dart index 12de6c09b6..1bd9f19701 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/top_bar.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/top_bar.dart @@ -4,24 +4,29 @@ import 'package:flowy_infra/image.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:provider/provider.dart'; +import 'package:flowy_infra/theme.dart'; class MenuTopBar extends StatelessWidget { const MenuTopBar({Key? key}) : super(key: key); @override Widget build(BuildContext context) { + final theme = context.watch(); return BlocBuilder( builder: (context, state) { return SizedBox( height: HomeSizes.topBarHeight, child: Row( children: [ - svgWithSize("flowy_logo_with_text", const Size(92, 17)), + (theme.isDark + ? svgWithSize("flowy_logo_dark_mode", const Size(92, 17)) + : svgWithSize("flowy_logo_with_text", const Size(92, 17))), const Spacer(), FlowyIconButton( width: 28, onPressed: () => context.read().add(const MenuEvent.collapse()), iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4), - icon: svg("home/hide_menu"), + icon: svg("home/hide_menu", color: theme.textColor), ) ], ), diff --git a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart index a9a9da7fd4..896d186dc7 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart +++ b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart @@ -93,9 +93,9 @@ class AppTheme { case ThemeType.dark: return AppTheme(isDark: true) - ..surface = _black - ..hover = _main2 - ..selector = _black + ..surface = const Color(0xff292929) + ..hover = const Color(0xff1f1f1f) + ..selector = const Color(0xff333333) ..red = const Color(0xfffb006d) ..yellow = const Color(0xffffd667) ..green = const Color(0xff66cf80) @@ -110,17 +110,17 @@ class AppTheme { ..bg2 = _black ..bg3 = _grey ..bg4 = const Color(0xff2c144b) - ..tint1 = const Color(0xffe8e0ff) - ..tint2 = const Color(0xffffe7fd) - ..tint3 = const Color(0xffffe7ee) - ..tint4 = const Color(0xffffefe3) - ..tint5 = const Color(0xfffff2cd) - ..tint6 = _black - ..tint7 = const Color(0xffddffd6) - ..tint8 = const Color(0xffdefff1) - ..tint9 = const Color(0xffdefff1) + ..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(0xff00b7ea) + ..main2 = const Color(0xff009cc7) ..textColor = _white ..shadowColor = _white; } @@ -141,9 +141,9 @@ class AppTheme { primaryVariant: main2, secondary: main2, secondaryVariant: main2, - background: bg1, + background: surface, surface: surface, - onBackground: bg1, + onBackground: surface, onSurface: surface, onError: red, onPrimary: bg1,