Fixed Dark Mode Bugs

frontend/app_flowy/assets/images/flowy_logo_dark_mode.svg

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg873"
+   version="1.1"
+   fill="none"
+   viewBox="0 0 92 17"
+   height="17"
+   width="92">
+  <metadata
+     id="metadata877">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g866"
+     clip-path="url(#clip0)">
+    <path
+       style="fill:#ffffff"
+       id="path834"
+       fill="black"
+       d="M32.7324 4.84144H34.892V5.63601C35.4179 5.08166 36.4132 4.63818 37.5212 4.63818C39.8498 4.63818 41.3709 6.4121 41.3709 8.88818C41.3709 11.4197 39.6057 13.3969 36.8827 13.3969C36.1315 13.3969 35.3991 13.2675 34.9108 12.9904V16.9078H32.7512V4.84144H32.7324ZM34.9108 7.53927V10.9208C35.493 11.2904 35.9812 11.4012 36.6949 11.4012C38.1972 11.4012 39.0611 10.3295 39.0611 8.94362C39.0611 7.61318 38.2723 6.65231 36.8451 6.65231C36.1127 6.63384 35.4366 6.96644 34.9108 7.53927Z" />
+    <path
+       style="fill:#ffffff"
+       id="path836"
+       fill="black"
+       d="M27.3804 4.6748C24.6573 4.6748 22.8921 6.6335 22.8921 9.1835C22.8921 11.6596 24.3944 13.4335 26.7419 13.4335C27.8311 13.4335 28.8264 12.99 29.371 12.4357V13.2302H31.5306V6.22698C29.9156 5.02589 28.1315 4.6748 27.3804 4.6748ZM29.3522 10.5324C28.8264 11.1052 28.1503 11.4378 27.4179 11.4378C25.9907 11.4378 25.2019 10.477 25.2019 9.14654C25.2019 7.76067 26.0658 6.67046 27.5681 6.67046C28.2818 6.67046 28.77 6.78133 29.3522 7.15089V10.5324Z" />
+    <path
+       style="fill:#ffffff"
+       id="path838"
+       fill="black"
+       d="M42.291 4.84144H44.4506V5.63601C44.9765 5.08166 45.9718 4.63818 47.0797 4.63818C49.4084 4.63818 50.9295 6.4121 50.9295 8.88818C50.9295 11.4197 49.1642 13.3969 46.4412 13.3969C45.6901 13.3969 44.9577 13.2675 44.4694 12.9904V16.9078H42.3098V4.84144H42.291ZM44.4694 7.53927V10.9208C45.0516 11.2904 45.5398 11.4012 46.2535 11.4012C47.7558 11.4012 48.6196 10.3295 48.6196 8.94362C48.6196 7.61318 47.8309 6.65231 46.4037 6.65231C45.6713 6.63384 44.9952 6.96644 44.4694 7.53927Z" />
+    <path
+       style="fill:#ffffff"
+       id="path840"
+       fill="black"
+       d="M57.2019 2.43913C56.8826 2.21739 56.3756 1.99565 55.8685 1.99565C54.892 1.99565 54.3849 2.49457 54.3849 3.64022V4.82283H55.9061V6.83696H54.3849V13.175H52.2065V3.49239C52.2065 1.18261 53.3333 0 55.23 0C56.0939 0 56.8826 0.203261 57.446 0.554348H59.3615V10.0152C59.3615 10.9576 59.6056 11.3641 60.0939 11.3641C60.4507 11.3641 60.7324 11.2163 60.9953 11.0315L61.446 12.6576C60.9577 13.0457 60.2253 13.3598 59.2112 13.3598C57.9155 13.3598 57.2019 12.5837 57.2019 10.8837V2.43913Z" />
+    <path
+       style="fill:#ffffff"
+       id="path842"
+       fill="black"
+       d="M66.0846 4.63818C68.9015 4.63818 70.7043 6.50449 70.7043 9.01753C70.7043 11.5121 68.9015 13.3969 66.0846 13.3969C63.2677 13.3969 61.4648 11.5306 61.4648 9.01753C61.4648 6.50449 63.2864 4.63818 66.0846 4.63818ZM66.0846 11.4012C67.4179 11.4012 68.3944 10.4588 68.3944 9.01753C68.3944 7.61318 67.3991 6.65231 66.0846 6.65231C64.8076 6.65231 63.7935 7.57623 63.7935 9.01753C63.7935 10.4034 64.77 11.4012 66.0846 11.4012Z" />
+    <path
+       style="fill:#ffffff"
+       id="path844"
+       fill="black"
+       d="M81.4271 13.2307H79.4928L77.69 8.59264C77.5586 8.27851 77.5022 7.92742 77.4083 7.61329C77.3332 7.98286 77.2393 8.29699 77.1079 8.6296L75.305 13.2307H73.4647L70.7041 4.84155H73.014L74.3661 9.38721C74.4975 9.79373 74.5351 10.1079 74.6102 10.4959C74.7041 10.1448 74.7604 9.84916 74.9295 9.38721L76.5069 4.84155H78.4224L80.0562 9.36873C80.1877 9.73829 80.2816 10.1263 80.3755 10.5144C80.4506 10.1263 80.5445 9.71981 80.6384 9.31329L81.8778 4.84155H84.0562L81.4271 13.2307Z" />
+    <path
+       style="fill:#ffffff"
+       id="path846"
+       fill="black"
+       d="M88.6574 13.1936C87.4179 16.187 86.6292 16.9077 85.371 16.9077C84.601 16.9077 84.0377 16.612 83.5494 16.2609L84.2442 14.6533C84.4696 14.7827 84.7888 14.949 85.1269 14.949C85.6715 14.949 86.0658 14.524 86.4226 13.6555L86.6104 13.212L82.6855 4.85986H85.2959L87.2677 9.42399C87.4367 9.83052 87.5494 10.2186 87.6808 10.6251C87.756 10.237 87.8311 9.83052 87.9813 9.40552L89.5024 4.85986H91.9625L88.6574 13.1936Z" />
+    <path
+       id="path848"
+       fill="#F7931E"
+       d="M17.0142 10.4033C16.5259 13.0088 14.3851 15.2816 11.925 16.5566C11.6245 16.7229 11.2677 16.8153 10.9297 16.8338H16.1503C16.6574 16.8338 17.0142 16.4642 17.0142 16.0022V10.4033Z" />
+    <path
+       id="path850"
+       fill="#8427E0"
+       d="M6.57258 5.37743C6.49746 5.43286 6.42235 5.4883 6.34723 5.54373C5.07023 6.43069 1.20169 9.27634 0.319059 8.0383C-0.544791 6.83721 0.375397 3.43721 2.59136 1.79264C2.62892 1.75569 2.68526 1.73721 2.72281 1.70025C5.14535 0.0187313 6.94817 0.258949 7.8308 1.47851C8.65709 2.62417 7.7369 4.43504 6.57258 5.37743Z" />
+    <path
+       id="path852"
+       fill="#00B5FF"
+       d="M16.0373 8.02043C14.8354 8.85195 12.9575 7.89108 12.0185 6.69C11.981 6.63456 11.9434 6.59761 11.9059 6.54217C11.0045 5.28565 8.11244 1.47913 9.35188 0.629126C10.5913 -0.239352 14.1782 0.703039 15.812 2.99434C15.8495 3.04978 15.8871 3.08674 15.9246 3.14217C17.5021 5.45195 17.258 7.17043 16.0373 8.02043Z" />
+    <path
+       id="path854"
+       fill="#FFBD00"
+       d="M14.4226 15.5219C14.385 15.5589 14.3475 15.5773 14.2911 15.6143C11.8686 17.2958 10.0658 17.0556 9.18315 15.836C8.35686 14.6904 9.27705 12.8795 10.4414 11.9371C10.5165 11.8817 10.5916 11.8263 10.6667 11.7708C11.9437 10.9023 15.8123 8.03821 16.6761 9.27625C17.5587 10.4773 16.6573 13.8773 14.4226 15.5219Z" />
+    <path
+       id="path856"
+       fill="#E3006D"
+       d="M7.66182 16.6859C6.42238 17.5544 2.85431 16.612 1.22051 14.3207C1.18295 14.2838 1.14539 14.2283 1.12661 14.1914C-0.469635 11.8816 -0.206725 10.1446 1.01393 9.31311C2.21581 8.48159 4.09374 9.44246 5.03271 10.6435C5.07027 10.699 5.10783 10.7359 5.14539 10.7914C6.02802 12.0294 8.92004 15.8359 7.66182 16.6859Z" />
+    <path
+       id="path858"
+       fill="#9327FF"
+       d="M6.57283 5.37743C4.84513 6.13504 1.16438 7.68721 0.619779 6.43069C0.150295 5.37743 1.01415 3.23395 2.59161 1.79264C2.62917 1.75569 2.68551 1.73721 2.72307 1.70025C5.1456 0.0187312 6.94842 0.258949 7.83105 1.47851C8.65734 2.62417 7.73715 4.43504 6.57283 5.37743Z" />
+    <path
+       id="path860"
+       fill="#00C8FF"
+       d="M16.0374 8.01967C14.8355 8.8512 12.9576 7.89033 12.0186 6.68924C11.2487 4.9338 9.76511 1.47837 11.0045 0.960978C12.1313 0.480543 14.4599 1.44141 15.9435 3.14141C17.5022 5.4512 17.2581 7.16967 16.0374 8.01967Z" />
+    <path
+       id="path862"
+       fill="#FFCE00"
+       d="M14.4226 15.5217C14.385 15.5586 14.3475 15.5771 14.2911 15.6141C11.8686 17.2956 10.0658 17.0554 9.18315 15.8358C8.35686 14.6901 9.27705 12.8793 10.4414 11.9369C12.1691 11.1793 15.8498 9.6271 16.3944 10.8836C16.8827 11.9369 16.0188 14.0804 14.4226 15.5217Z" />
+    <path
+       id="path864"
+       fill="#FB006D"
+       d="M6.0468 16.3533C4.92004 16.8338 2.5914 15.8914 1.12661 14.1914C-0.469635 11.8816 -0.206725 10.1446 1.01393 9.31311C2.21581 8.48159 4.09374 9.44246 5.03271 10.6435C5.80266 12.3805 7.28623 15.8359 6.0468 16.3533Z" />
+  </g>
+  <defs
+     id="defs871">
+    <clipPath
+       id="clip0">
+      <rect
+         id="rect868"
+         fill="white"
+         height="17"
+         width="92" />
+    </clipPath>
+  </defs>
+</svg>

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));
     }
   }
 }

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));
     }
   }
 }

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;
   }
 }

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<AppTheme>();
     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),
     );
   }
 

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<ViewBloc>().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<Widget> 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)),
     ];

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<AppTheme>();
     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),
     ]);

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<AppTheme>();
     return BlocBuilder<MenuBloc, MenuState>(
       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<MenuBloc>().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),
               )
             ],
           ),

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,