mirror of
https://github.com/Dr-Blank/Vaani.git
synced 2026-02-14 05:19:35 +00:00
feat: multiple theming options (#50)
* refactor: consolidate theme definitions by removing separate dark and light theme files * feat: integrate dynamic color support and enhance theme settings management * feat: add theme settings route and update theme management in app settings * feat: enhance theme management by integrating high contrast support in various components * feat: implement mode selection dialog for theme settings and enhance button functionality * refactor: update theme import paths and consolidate theme provider files * feat: enhance theme management by integrating theme selection based on audiobook playback * refactor: update default value for useMaterialThemeFromSystem to false in theme settings * refactor: adjust high contrast condition order in theme settings for consistency * refactor: rename useMaterialThemeOfPlayingItem to useCurrentPlayerThemeThroughoutApp for clarity * refactor: correct spelling in system theme provider and replace with updated implementation * refactor: extract restore backup dialog into a separate widget for improved readability * refactor: reorganize settings sections for clarity and improve restore dialog functionality
This commit is contained in:
Dr.Blank
GitHub
parent
758e4cdc83
commit
ff83c2cc63
28 changed files with 935 additions and 194 deletions
261
lib/settings/view/theme_settings_page.dart
Normal file
261
lib/settings/view/theme_settings_page.dart
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_settings_ui/flutter_settings_ui.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:vaani/settings/app_settings_provider.dart';
|
||||
import 'package:vaani/settings/view/buttons.dart';
|
||||
import 'package:vaani/settings/view/simple_settings_page.dart';
|
||||
import 'package:vaani/shared/extensions/enum.dart';
|
||||
|
||||
class ThemeSettingsPage extends HookConsumerWidget {
|
||||
const ThemeSettingsPage({
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final appSettings = ref.watch(appSettingsProvider);
|
||||
final themeSettings = appSettings.themeSettings;
|
||||
final primaryColor = Theme.of(context).colorScheme.primary;
|
||||
|
||||
return SimpleSettingsPage(
|
||||
title: const Text('Theme Settings'),
|
||||
sections: [
|
||||
SettingsSection(
|
||||
margin: const EdgeInsetsDirectional.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
tiles: [
|
||||
// choose system , light or dark theme
|
||||
SettingsTile.navigation(
|
||||
title: const Text('Theme Mode'),
|
||||
description: Text.rich(
|
||||
TextSpan(
|
||||
text: themeSettings.themeMode == ThemeMode.system
|
||||
? 'Using mode from '
|
||||
: 'Using ',
|
||||
children: [
|
||||
TextSpan(
|
||||
text: themeSettings.themeMode.pascalCase,
|
||||
style: TextStyle(
|
||||
color: primaryColor,
|
||||
),
|
||||
),
|
||||
if (themeSettings.themeMode != ThemeMode.system)
|
||||
const TextSpan(text: ' mode'),
|
||||
],
|
||||
),
|
||||
),
|
||||
leading: const Icon(Icons.color_lens),
|
||||
trailing: themeSettings.themeMode == ThemeMode.system
|
||||
? const Icon(Icons.auto_awesome)
|
||||
: themeSettings.themeMode == ThemeMode.light
|
||||
? const Icon(Icons.light_mode)
|
||||
: const Icon(Icons.dark_mode),
|
||||
onPressed: (context) async {
|
||||
final themeMode = await showDialog<ThemeMode>(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return ModeSelectionDialog(
|
||||
themeMode: themeSettings.themeMode,
|
||||
);
|
||||
},
|
||||
);
|
||||
if (themeMode != null) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
themeMode: themeMode,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
// high contrast mode
|
||||
SettingsTile.switchTile(
|
||||
leading: themeSettings.highContrast
|
||||
? const Icon(Icons.accessibility)
|
||||
: const Icon(Icons.accessibility_new_outlined),
|
||||
initialValue: themeSettings.highContrast,
|
||||
title: const Text('High Contrast Mode'),
|
||||
description: const Text(
|
||||
'Increase the contrast between the background and the text',
|
||||
),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
highContrast: value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
// use material theme from system
|
||||
SettingsTile.switchTile(
|
||||
initialValue: themeSettings.useMaterialThemeFromSystem,
|
||||
title: Platform.isAndroid
|
||||
? const Text('Use Material You')
|
||||
: const Text('Material Theme from System'),
|
||||
description: const Text(
|
||||
'Use the system theme colors for the app',
|
||||
),
|
||||
leading: themeSettings.useMaterialThemeFromSystem
|
||||
? const Icon(Icons.auto_awesome)
|
||||
: const Icon(Icons.auto_fix_off),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
useMaterialThemeFromSystem: value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
// TODO choose the primary color
|
||||
// SettingsTile.navigation(
|
||||
// title: const Text('Primary Color'),
|
||||
// description: const Text(
|
||||
// 'Choose the primary color for the app',
|
||||
// ),
|
||||
// leading: const Icon(Icons.colorize),
|
||||
// trailing: Icon(
|
||||
// Icons.circle,
|
||||
// color: themeSettings.customThemeColor.toColor(),
|
||||
// ),
|
||||
// onPressed: (context) async {
|
||||
// final selectedColor = await showDialog<Color>(
|
||||
// context: context,
|
||||
// builder: (context) {
|
||||
// return SimpleDialog(
|
||||
// title: const Text('Select Primary Color'),
|
||||
// children: [
|
||||
// for (final color in Colors.primaries)
|
||||
// SimpleDialogOption(
|
||||
// onPressed: () {
|
||||
// Navigator.pop(context, color);
|
||||
// },
|
||||
// child: Container(
|
||||
// color: color,
|
||||
// height: 48,
|
||||
// ),
|
||||
// ),
|
||||
// ],
|
||||
// );
|
||||
// },
|
||||
// );
|
||||
// if (selectedColor != null) {
|
||||
// ref.read(appSettingsProvider.notifier).update(
|
||||
// appSettings.copyWith.themeSettings(
|
||||
// customThemeColor: selectedColor.toHexString(),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// ),
|
||||
|
||||
// use theme throughout the app when playing item
|
||||
SettingsTile.switchTile(
|
||||
initialValue: themeSettings.useCurrentPlayerThemeThroughoutApp,
|
||||
title: const Text('Adapt theme from currently playing item'),
|
||||
description: const Text(
|
||||
'Use the theme colors from the currently playing item for the app',
|
||||
),
|
||||
leading: themeSettings.useCurrentPlayerThemeThroughoutApp
|
||||
? const Icon(Icons.auto_fix_high)
|
||||
: const Icon(Icons.auto_fix_off),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
useCurrentPlayerThemeThroughoutApp: value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
SettingsTile.switchTile(
|
||||
initialValue: themeSettings.useMaterialThemeOnItemPage,
|
||||
title: const Text('Adaptive Theme on Item Page'),
|
||||
description: const Text(
|
||||
'get fancy with the colors on the item page at the cost of some performance',
|
||||
),
|
||||
leading: themeSettings.useMaterialThemeOnItemPage
|
||||
? const Icon(Icons.auto_fix_high)
|
||||
: const Icon(Icons.auto_fix_off),
|
||||
onToggle: (value) {
|
||||
ref.read(appSettingsProvider.notifier).update(
|
||||
appSettings.copyWith.themeSettings(
|
||||
useMaterialThemeOnItemPage: value,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
extension ColorExtension on Color {
|
||||
String toHexString() {
|
||||
return '#${value.toRadixString(16).substring(2)}';
|
||||
}
|
||||
}
|
||||
|
||||
extension StringExtension on String {
|
||||
Color toColor() {
|
||||
return Color(int.parse('0xff$substring(1)'));
|
||||
}
|
||||
}
|
||||
|
||||
class ModeSelectionDialog extends HookConsumerWidget {
|
||||
final ThemeMode themeMode;
|
||||
|
||||
const ModeSelectionDialog({
|
||||
super.key,
|
||||
required this.themeMode,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final selectedTheme = useState(themeMode);
|
||||
// a wrap of chips to show the available modes with icons
|
||||
return AlertDialog(
|
||||
title: const Text('Select Theme Mode'),
|
||||
content: Wrap(
|
||||
spacing: 8.0,
|
||||
runSpacing: 8.0,
|
||||
children: ThemeMode.values
|
||||
.map(
|
||||
(mode) => ChoiceChip(
|
||||
avatar: switch (mode) {
|
||||
ThemeMode.system => const Icon(Icons.auto_awesome),
|
||||
ThemeMode.light => const Icon(Icons.light_mode),
|
||||
ThemeMode.dark => const Icon(Icons.dark_mode),
|
||||
},
|
||||
showCheckmark: false,
|
||||
label: Text(mode.pascalCase),
|
||||
selected: mode == selectedTheme.value,
|
||||
onSelected: (selected) {
|
||||
if (selected) {
|
||||
selectedTheme.value = mode;
|
||||
}
|
||||
},
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
actions: [
|
||||
CancelButton(),
|
||||
OkButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context, selectedTheme.value);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue