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 @@
+
+
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,