Added adaptive theme and change theme button

frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart

@@ -33,6 +33,7 @@ class _SettingsDialogState extends State<SettingsDialog> {
             const SettingsPanelHeader(),
             Expanded(
               child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Expanded(
                     flex: 1,
@@ -45,6 +46,8 @@ class _SettingsDialogState extends State<SettingsDialog> {
                       currentIndex: _selectedViewIndex,
                     ),
                   ),
+                  const VerticalDivider(),
+                  const SizedBox(width: 10),
                   Expanded(
                     flex: 4,
                     child: settingsViews[_selectedViewIndex],

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart

@@ -1,9 +1,7 @@
+import 'package:app_flowy/workspace/presentation/theme/theme_model.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:app_flowy/workspace/presentation/theme/theme_model.dart';
-import 'package:app_flowy/generated/locale_keys.g.dart';
 
 class SettingsAppearanceView extends StatelessWidget {
   const SettingsAppearanceView({Key? key}) : super(key: key);
@@ -14,37 +12,37 @@ class SettingsAppearanceView extends StatelessWidget {
 
     return SingleChildScrollView(
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          (theme.isDark ? _renderLightMode(context) : _renderDarkMode(context)),
+          const SizedBox(
+            height: 15,
+          ),
+          Row(
+            children: [
+              const Text(
+                'Light Mode',
+                style: TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+              Switch(
+                value: theme.isDark,
+                onChanged: (val) {
+                  context.read<ThemeModel>().swapTheme();
+                },
+              ),
+              const Text(
+                'Dark Mode',
+                style: TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ],
+          ),
         ],
       ),
     );
   }
-
-  Widget _renderThemeToggle(BuildContext context) {
-    final theme = context.watch<AppTheme>();
-    return CircleAvatar(
-      backgroundColor: theme.surface,
-      child: IconButton(
-          icon: Icon(theme.isDark ? Icons.dark_mode : Icons.light_mode),
-          color: (theme.iconColor),
-          onPressed: () {
-            context.read<ThemeModel>().swapTheme();
-          }),
-    );
-  }
-
-  Widget _renderDarkMode(BuildContext context) {
-    return Tooltip(
-      message: LocaleKeys.tooltip_darkMode.tr(),
-      child: _renderThemeToggle(context),
-    );
-  }
-
-  Widget _renderLightMode(BuildContext context) {
-    return Tooltip(
-      message: LocaleKeys.tooltip_lightMode.tr(),
-      child: _renderThemeToggle(context),
-    );
-  }
 }

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart

@@ -1,3 +1,5 @@
+import 'package:flowy_infra/theme.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter/material.dart';
 
 class SettingsMenuElement extends StatelessWidget {
@@ -18,18 +20,19 @@ class SettingsMenuElement extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     return ListTile(
       leading: Icon(
         icon,
         size: 16,
-        color: Colors.black,
+        color: index == currentIndex ? Colors.black : theme.textColor,
       ),
       onTap: () {
         changeSelectedIndex(index);
       },
       selected: index == currentIndex,
       selectedColor: Colors.black,
-      selectedTileColor: Colors.blue.shade700,
+      selectedTileColor: theme.main2,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(5),
       ),