Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added adaptive theme and change theme button

Browse Source
This commit is contained in:
Harinandan 2022-01-19 14:11:33 +05:30
parent 0ed1847672
commit fd98b192af
3 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
View File

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

60
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
View File

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

7
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
View File

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