[FR] Dark Mode (#185)

* Rewrote to change with light and dark mode 🔧

* Changed files to match theme switches

* Fixed text color switch

* Configured accent color for trash page

* Configured hover color for dark mode

* Configured container colors for dark mode

* Configured text to switch with themes

* Added values to change with theme

* Configured to work with theme colors

* Text not affected by theme

* Theme can be changed here

* Used gray instead of white color

* Rewrote to change with light and dark mode 🔧

* Changed files to match theme switches

* Fixed text color switch

* Configured accent color for trash page

* Configured hover color for dark mode

* Configured container colors for dark mode

* Configured text to switch with themes

* Restored deleted file

* Rewrote to change with light and dark mode 🔧

* Changed files to match theme switches

* Fixed text color switch

* Configured accent color for trash page

* Configured hover color for dark mode

* Configured container colors for dark mode

* Configured text to switch with themes

* Rewrote to change with light and dark mode 🔧

* Changed files to match theme switches

* Configured accent color for trash page

* Removed file

* Used theme.dart colors

* Removed comments and added colors

* Refactored and added hover colors

* removed generated files
fixed warnings

Co-authored-by: MikeWallaceDev <[email protected]>

frontend/app_flowy/lib/startup/tasks/application_widget.dart

@@ -46,7 +46,8 @@ class ApplicationWidget extends StatelessWidget {
     // const launchWidth = 1310.0;
     // setWindowFrame(const Rect.fromLTWH(0, 0, launchWidth, launchWidth / ratio));
 
-    final theme = AppTheme.fromType(ThemeType.light);
+    final theme = AppTheme.fromType(ThemeType.dark);
+    theme.isDark = true;
     return Provider.value(
       value: theme,
       child: MaterialApp(

frontend/app_flowy/lib/user/presentation/widgets/background.dart

@@ -50,7 +50,7 @@ class FlowyLogoTitle extends StatelessWidget {
           Text(
             title,
             style: TextStyle(
-              color: theme.shader1,
+              color: theme.textColor,
               fontWeight: FontWeight.w600,
               fontSize: 24,
             ),

frontend/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart

@@ -124,7 +124,7 @@ class _DocLeftBarItemState extends State<DocLeftBarItem> {
           isDense: true,
         ),
         style: TextStyle(
-          color: theme.shader1,
+          color: theme.textColor,
           fontSize: 14,
           fontWeight: FontWeight.w500,
           overflow: TextOverflow.ellipsis,

frontend/app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart

@@ -68,6 +68,7 @@ DefaultStyles customStyles(BuildContext context) {
         color: themeData.colorScheme.secondary,
         decoration: TextDecoration.underline,
       ),
+      color: (theme.isDark ? theme.shader1 : theme.shader7),
       placeHolder: DefaultTextBlockStyle(
           defaultTextStyle.style.copyWith(
             fontSize: 20,
@@ -85,7 +86,7 @@ DefaultStyles customStyles(BuildContext context) {
           const Tuple2(6, 2),
           BoxDecoration(
             border: Border(
-              left: BorderSide(width: 4, color: Colors.grey.shade300),
+              left: BorderSide(width: 4, color: theme.main1),
             ),
           )),
       code: DefaultTextBlockStyle(

frontend/app_flowy/lib/workspace/presentation/stack_page/home_stack.dart

@@ -29,7 +29,7 @@ class HomeStack extends StatelessWidget {
         getIt<HomeStackManager>().stackTopBar(),
         Expanded(
           child: Container(
-            color: Colors.white,
+            color: Theme.of(context).colorScheme.background,
             child: FocusTraversalGroup(
               child: getIt<HomeStackManager>().stackWidget(),
             ),

frontend/app_flowy/lib/workspace/presentation/stack_page/trash/widget/trash_header.dart

@@ -61,7 +61,7 @@ class TrashHeader extends StatelessWidget {
     });
 
     return Container(
-      color: Colors.white,
+      color: theme.bg1,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [

frontend/app_flowy/lib/workspace/presentation/widgets/edit_pannel/edit_pannel.dart

@@ -13,7 +13,11 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 class EditPannel extends StatelessWidget {
   late final EditPannelContext editContext;
   final VoidCallback onEndEdit;
-  EditPannel({Key? key, required Option<EditPannelContext> context, required this.onEndEdit}) : super(key: key) {
+  EditPannel({
+    Key? key,
+    required Option<EditPannelContext> context,
+    required this.onEndEdit,
+  }) : super(key: key) {
     editContext = context.fold(() => const BlankEditPannelContext(), (c) => c);
   }
 

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/add_button.dart

@@ -18,7 +18,9 @@ class AddButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return FlowyIconButton(
+      hoverColor: theme.hover,
       width: 22,
       onPressed: () {
         ActionList(
@@ -73,7 +75,7 @@ class CreateItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    final config = HoverDisplayConfig(hoverColor: theme.hover);
+    final config = HoverDisplayConfig(hoverColor: theme.main2);
 
     return FlowyHover(
       config: config,
@@ -82,6 +84,7 @@ class CreateItem extends StatelessWidget {
           onTap: () => onSelected(viewType),
           child: FlowyText.medium(
             viewType.name,
+            color: theme.textColor,
             fontSize: 12,
           ).padding(horizontal: 10, vertical: 6),
         );

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/header.dart

@@ -37,7 +37,7 @@ class MenuAppHeader extends StatelessWidget {
         children: [
           _renderExpandedIcon(context, theme),
           // HSpace(MenuAppSizes.iconPadding),
-          _renderTitle(context),
+          _renderTitle(context, theme),
           _renderAddButton(context),
         ],
       ),
@@ -56,7 +56,7 @@ class MenuAppHeader extends StatelessWidget {
           theme: ExpandableThemeData(
             expandIcon: FlowyIconData.drop_down_show,
             collapseIcon: FlowyIconData.drop_down_hide,
-            iconColor: theme.shader1,
+            iconColor: theme.main1,
             iconSize: MenuAppSizes.iconSize,
             iconPadding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
             hasIcon: false,
@@ -66,7 +66,7 @@ class MenuAppHeader extends StatelessWidget {
     );
   }
 
-  Widget _renderTitle(BuildContext context) {
+  Widget _renderTitle(BuildContext context, AppTheme theme) {
     return Expanded(
       child: BlocListener<AppBloc, AppState>(
         listenWhen: (p, c) => (p.latestCreatedView == null && c.latestCreatedView != null),
@@ -92,6 +92,7 @@ class MenuAppHeader extends StatelessWidget {
             builder: (context, app) => FlowyText.medium(
               app.name,
               fontSize: 12,
+              color: theme.textColor,
             ),
           ),
         ),

frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart

@@ -85,7 +85,7 @@ class ActionCell<T extends ActionItem> extends StatelessWidget {
     final theme = context.watch<AppTheme>();
 
     return FlowyHover(
-      config: HoverDisplayConfig(hoverColor: theme.hover),
+      config: HoverDisplayConfig(hoverColor: theme.hover, borderColor: theme.shader2),
       builder: (context, onHover) {
         return GestureDetector(
           behavior: HitTestBehavior.opaque,

frontend/app_flowy/packages/flowy_infra/lib/theme.dart

@@ -6,6 +6,13 @@ enum ThemeType {
   dark,
 }
 
+//Color Pallettes
+const _black = Color(0xff000000);
+const _grey = Color(0xff808080);
+const _white = Color(0xFFFFFFFF);
+const _gray_shade200 = Color(0xFFEEEEEE);
+const _main2 = Color(0xff00b7ea);
+
 class AppTheme {
   static ThemeType defaultTheme = ThemeType.light;
 
@@ -39,19 +46,20 @@ class AppTheme {
   late Color tint7;
   late Color tint8;
   late Color tint9;
+  late Color textColor;
 
   late Color main1;
   late Color main2;
 
   /// Default constructor
-  AppTheme({this.isDark = true});
+  AppTheme({this.isDark = false});
 
   /// fromType factory constructor
   factory AppTheme.fromType(ThemeType t) {
     switch (t) {
       case ThemeType.light:
         return AppTheme(isDark: false)
-          ..surface = Colors.white
+          ..surface = _gray_shade200
           ..hover = const Color(0xFFe0f8ff) //
           ..selector = const Color(0xfff2fcff)
           ..red = const Color(0xfffb006d)
@@ -63,8 +71,8 @@ class AppTheme {
           ..shader4 = const Color(0xffbdbdbd)
           ..shader5 = const Color(0xffe0e0e0)
           ..shader6 = const Color(0xfff2f2f2)
-          ..shader7 = const Color(0xffffffff)
-          ..bg1 = const Color(0xfff7f8fc)
+          ..shader7 = _gray_shade200
+          ..bg1 = _gray_shade200
           ..bg2 = const Color(0xffedeef2)
           ..bg3 = const Color(0xffe2e4eb)
           ..bg4 = const Color(0xff2c144b)
@@ -78,49 +86,51 @@ class AppTheme {
           ..tint8 = const Color(0xffdefff1)
           ..tint9 = const Color(0xffdefff1)
           ..main1 = const Color(0xff00bcf0)
-          ..main2 = const Color(0xff00b7ea);
+          ..main2 = const Color(0xff00b7ea)
+          ..textColor = _black;
 
       case ThemeType.dark:
         return AppTheme(isDark: true)
-          ..surface = const Color(0xff252525)
-          ..hover = const Color(0xFFe0f8ff) //
-          ..selector = const Color(0xfff2fcff)
+          ..surface = _black
+          ..hover = _main2
+          ..selector = _black
           ..red = const Color(0xfffb006d)
           ..yellow = const Color(0xffffd667)
           ..green = const Color(0xff66cf80)
-          ..shader1 = const Color(0xff333333)
-          ..shader2 = const Color(0xff4f4f4f)
+          ..shader1 = _white
+          ..shader2 = const Color(0xffffffff)
           ..shader3 = const Color(0xff828282)
           ..shader4 = const Color(0xffbdbdbd)
-          ..shader5 = const Color(0xffe0e0e0)
-          ..shader6 = const Color(0xfff2f2f2)
-          ..shader7 = const Color(0xffffffff)
-          ..bg1 = const Color(0xfff7f8fc)
-          ..bg2 = const Color(0xffedeef2)
-          ..bg3 = const Color(0xffe2e4eb)
+          ..shader5 = _white
+          ..shader6 = _black
+          ..shader7 = _black
+          ..bg1 = _black
+          ..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 = const Color(0xfff5ffdc)
+          ..tint6 = _black
           ..tint7 = const Color(0xffddffd6)
           ..tint8 = const Color(0xffdefff1)
           ..tint9 = const Color(0xffdefff1)
           ..main1 = const Color(0xff00bcf0)
-          ..main2 = const Color(0xff00b7ea);
+          ..main2 = const Color(0xff00b7ea)
+          ..textColor = _white;
     }
   }
 
   ThemeData get themeData {
     var t = ThemeData(
-      textTheme: (isDark ? ThemeData.dark() : ThemeData.light()).textTheme,
-      textSelectionTheme: TextSelectionThemeData(cursorColor: main2),
+      textTheme: TextTheme(bodyText1: TextStyle(), bodyText2: TextStyle().apply(color: textColor)),
+      textSelectionTheme: TextSelectionThemeData(cursorColor: main2, selectionHandleColor: main2),
       primaryIconTheme: IconThemeData(color: hover),
       iconTheme: IconThemeData(color: shader1),
-      canvasColor: shader6,
-      // hoverColor: hover,
+      canvasColor: shader7,
+      hoverColor: main2,
       colorScheme: ColorScheme(
           brightness: isDark ? Brightness.dark : Brightness.light,
           primary: main1,

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart

@@ -1,6 +1,8 @@
 import 'package:flowy_infra_ui/flowy_infra_ui_web.dart';
 import 'package:flowy_infra_ui/style_widget/decoration.dart';
 import 'package:flutter/material.dart';
+import 'package:flowy_infra/theme.dart';
+import 'package:provider/provider.dart';
 
 class ListOverlayFooter {
   Widget widget;
@@ -33,6 +35,7 @@ class ListOverlay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     const padding = EdgeInsets.symmetric(horizontal: 6, vertical: 6);
     double totalHeight = height + padding.vertical;
     if (footer != null) {
@@ -42,7 +45,7 @@ class ListOverlay extends StatelessWidget {
     return Material(
       type: MaterialType.transparency,
       child: Container(
-        decoration: FlowyDecoration.decoration(),
+        decoration: FlowyDecoration.decoration(theme.bg1, theme.main2),
         constraints: BoxConstraints.tight(Size(width, totalHeight)),
         child: Padding(
           padding: padding,

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/decoration.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 
 class FlowyDecoration {
-  static Decoration decoration() {
-    return const BoxDecoration(
-      color: Colors.white,
-      borderRadius: BorderRadius.all(Radius.circular(6)),
+  static Decoration decoration(Color boxColor, Color boxShadow) {
+    return BoxDecoration(
+      color: boxColor,
+      borderRadius: const BorderRadius.all(Radius.circular(6)),
       boxShadow: [
-        BoxShadow(color: Color(0xfff2f2f2), spreadRadius: 1, blurRadius: 10.0),
+        BoxShadow(color: boxShadow, spreadRadius: 1, blurRadius: 10.0),
       ],
     );
   }

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart

@@ -39,12 +39,11 @@ class FlowyText extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    final textColor = color ?? theme.shader1;
     return Text(title,
         overflow: overflow,
         softWrap: false,
         style: TextStyle(
-          color: textColor,
+          color: theme.textColor,
           fontWeight: fontWeight,
           fontSize: fontSize + 2,
           fontFamily: 'Mulish',