[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 <mike@wallacehub.com>
2024-08-30 18:12:39 +00:00 · 2021-12-24 20:20:48 +02:00 · 2021-12-24 20:20:48 +02:00 · 6325bd300b
commit 6325bd300b
parent 547be89b72
14 changed files with 64 additions and 42 deletions
--- a/frontend/app_flowy/lib/startup/tasks/application_widget.dart
+++ b/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(
--- a/frontend/app_flowy/lib/user/presentation/widgets/background.dart
+++ b/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,
            ),
--- a/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart
+++ b/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,
--- a/frontend/app_flowy/lib/workspace/presentation/stack_page/doc/styles.dart
+++ b/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(
--- a/frontend/app_flowy/lib/workspace/presentation/stack_page/home_stack.dart
+++ b/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(),
            ),
--- a/frontend/app_flowy/lib/workspace/presentation/stack_page/trash/widget/trash_header.dart
+++ b/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: [
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/edit_pannel/edit_pannel.dart
+++ b/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);
  }

--- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/add_button.dart
+++ b/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),
        );
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/header.dart
+++ b/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,
            ),
          ),
        ),
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart
+++ b/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,
--- a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
+++ b/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,
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart
+++ b/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,
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/decoration.dart
+++ b/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),
      ],
    );
  }
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
+++ b/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',