groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2025-12-23 19:39:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: multiple theming options (#50)

Browse source 
* 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 2024-10-05 10:01:08 -04:00 • committed by GitHub
parent 758e4cdc83
commit ff83c2cc63
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 935 additions and 194 deletions
Download patch file Download diff file Expand all files Collapse all files

5
lib/settings/app_settings_provider.dart
View file

@ -47,11 +47,6 @@ class AppSettings extends _$AppSettings {
_logger.fine('wrote settings to box: $state');
}
void toggleDarkMode() {
state = state.copyWith
.themeSettings(isDarkMode: !state.themeSettings.isDarkMode);
}
void update(model.AppSettings newSettings) {
state = newSettings;
}

2
lib/settings/app_settings_provider.g.dart
View file

@ -6,7 +6,7 @@ part of 'app_settings_provider.dart';
// RiverpodGenerator
// **************************************************************************
String _$appSettingsHash() => r'f51d55f117692d4fb9f4b4febf02906c0953d334';
String _$appSettingsHash() => r'314d7936f54550f57d308056a99230402342a6d0';
/// See also [AppSettings].
@ProviderFor(AppSettings)

5
lib/settings/models/app_settings.dart
View file

@ -28,7 +28,10 @@ class AppSettings with _$AppSettings {
@freezed
class ThemeSettings with _$ThemeSettings {
const factory ThemeSettings({
@Default(true) bool isDarkMode,
@Default(ThemeMode.system) ThemeMode themeMode,
@Default(false) bool highContrast,
@Default(false) bool useMaterialThemeFromSystem,
@Default('#FF311B92') String customThemeColor,
@Default(true) bool useMaterialThemeOnItemPage,
@Default(true) bool useCurrentPlayerThemeThroughoutApp,
}) = _ThemeSettings;

114
lib/settings/models/app_settings.freezed.dart
View file

@ -378,7 +378,10 @@ ThemeSettings _$ThemeSettingsFromJson(Map<String, dynamic> json) {
/// @nodoc
mixin _$ThemeSettings {
bool get isDarkMode => throw _privateConstructorUsedError;
ThemeMode get themeMode => throw _privateConstructorUsedError;
bool get highContrast => throw _privateConstructorUsedError;
bool get useMaterialThemeFromSystem => throw _privateConstructorUsedError;
String get customThemeColor => throw _privateConstructorUsedError;
bool get useMaterialThemeOnItemPage => throw _privateConstructorUsedError;
bool get useCurrentPlayerThemeThroughoutApp =>
throw _privateConstructorUsedError;
@ -400,7 +403,10 @@ abstract class $ThemeSettingsCopyWith<$Res> {
_$ThemeSettingsCopyWithImpl<$Res, ThemeSettings>;
@useResult
$Res call(
{bool isDarkMode,
{ThemeMode themeMode,
bool highContrast,
bool useMaterialThemeFromSystem,
String customThemeColor,
bool useMaterialThemeOnItemPage,
bool useCurrentPlayerThemeThroughoutApp});
}
@ -420,15 +426,30 @@ class _$ThemeSettingsCopyWithImpl<$Res, $Val extends ThemeSettings>
@pragma('vm:prefer-inline')
@override
$Res call({
Object? isDarkMode = null,
Object? themeMode = null,
Object? highContrast = null,
Object? useMaterialThemeFromSystem = null,
Object? customThemeColor = null,
Object? useMaterialThemeOnItemPage = null,
Object? useCurrentPlayerThemeThroughoutApp = null,
}) {
return _then(_value.copyWith(
isDarkMode: null == isDarkMode
? _value.isDarkMode
: isDarkMode // ignore: cast_nullable_to_non_nullable
themeMode: null == themeMode
? _value.themeMode
: themeMode // ignore: cast_nullable_to_non_nullable
as ThemeMode,
highContrast: null == highContrast
? _value.highContrast
: highContrast // ignore: cast_nullable_to_non_nullable
as bool,
useMaterialThemeFromSystem: null == useMaterialThemeFromSystem
? _value.useMaterialThemeFromSystem
: useMaterialThemeFromSystem // ignore: cast_nullable_to_non_nullable
as bool,
customThemeColor: null == customThemeColor
? _value.customThemeColor
: customThemeColor // ignore: cast_nullable_to_non_nullable
as String,
useMaterialThemeOnItemPage: null == useMaterialThemeOnItemPage
? _value.useMaterialThemeOnItemPage
: useMaterialThemeOnItemPage // ignore: cast_nullable_to_non_nullable
@ -451,7 +472,10 @@ abstract class _$$ThemeSettingsImplCopyWith<$Res>
@override
@useResult
$Res call(
{bool isDarkMode,
{ThemeMode themeMode,
bool highContrast,
bool useMaterialThemeFromSystem,
String customThemeColor,
bool useMaterialThemeOnItemPage,
bool useCurrentPlayerThemeThroughoutApp});
}
@ -469,15 +493,30 @@ class __$$ThemeSettingsImplCopyWithImpl<$Res>
@pragma('vm:prefer-inline')
@override
$Res call({
Object? isDarkMode = null,
Object? themeMode = null,
Object? highContrast = null,
Object? useMaterialThemeFromSystem = null,
Object? customThemeColor = null,
Object? useMaterialThemeOnItemPage = null,
Object? useCurrentPlayerThemeThroughoutApp = null,
}) {
return _then(_$ThemeSettingsImpl(
isDarkMode: null == isDarkMode
? _value.isDarkMode
: isDarkMode // ignore: cast_nullable_to_non_nullable
themeMode: null == themeMode
? _value.themeMode
: themeMode // ignore: cast_nullable_to_non_nullable
as ThemeMode,
highContrast: null == highContrast
? _value.highContrast
: highContrast // ignore: cast_nullable_to_non_nullable
as bool,
useMaterialThemeFromSystem: null == useMaterialThemeFromSystem
? _value.useMaterialThemeFromSystem
: useMaterialThemeFromSystem // ignore: cast_nullable_to_non_nullable
as bool,
customThemeColor: null == customThemeColor
? _value.customThemeColor
: customThemeColor // ignore: cast_nullable_to_non_nullable
as String,
useMaterialThemeOnItemPage: null == useMaterialThemeOnItemPage
? _value.useMaterialThemeOnItemPage
: useMaterialThemeOnItemPage // ignore: cast_nullable_to_non_nullable
@ -495,7 +534,10 @@ class __$$ThemeSettingsImplCopyWithImpl<$Res>
@JsonSerializable()
class _$ThemeSettingsImpl implements _ThemeSettings {
const _$ThemeSettingsImpl(
{this.isDarkMode = true,
{this.themeMode = ThemeMode.system,
this.highContrast = false,
this.useMaterialThemeFromSystem = false,
this.customThemeColor = '#FF311B92',
this.useMaterialThemeOnItemPage = true,
this.useCurrentPlayerThemeThroughoutApp = true});
@ -504,7 +546,16 @@ class _$ThemeSettingsImpl implements _ThemeSettings {
@override
@JsonKey()
final bool isDarkMode;
final ThemeMode themeMode;
@override
@JsonKey()
final bool highContrast;
@override
@JsonKey()
final bool useMaterialThemeFromSystem;
@override
@JsonKey()
final String customThemeColor;
@override
@JsonKey()
final bool useMaterialThemeOnItemPage;
@ -514,7 +565,7 @@ class _$ThemeSettingsImpl implements _ThemeSettings {
@override
String toString() {
return 'ThemeSettings(isDarkMode: $isDarkMode, useMaterialThemeOnItemPage: $useMaterialThemeOnItemPage, useCurrentPlayerThemeThroughoutApp: $useCurrentPlayerThemeThroughoutApp)';
return 'ThemeSettings(themeMode: $themeMode, highContrast: $highContrast, useMaterialThemeFromSystem: $useMaterialThemeFromSystem, customThemeColor: $customThemeColor, useMaterialThemeOnItemPage: $useMaterialThemeOnItemPage, useCurrentPlayerThemeThroughoutApp: $useCurrentPlayerThemeThroughoutApp)';
}
@override
@ -522,8 +573,16 @@ class _$ThemeSettingsImpl implements _ThemeSettings {
return identical(this, other) ||
(other.runtimeType == runtimeType &&
other is _$ThemeSettingsImpl &&
(identical(other.isDarkMode, isDarkMode) ||
other.isDarkMode == isDarkMode) &&
(identical(other.themeMode, themeMode) ||
other.themeMode == themeMode) &&
(identical(other.highContrast, highContrast) ||
other.highContrast == highContrast) &&
(identical(other.useMaterialThemeFromSystem,
useMaterialThemeFromSystem) ||
other.useMaterialThemeFromSystem ==
useMaterialThemeFromSystem) &&
(identical(other.customThemeColor, customThemeColor) ||
other.customThemeColor == customThemeColor) &&
(identical(other.useMaterialThemeOnItemPage,
useMaterialThemeOnItemPage) ||
other.useMaterialThemeOnItemPage ==
@ -536,8 +595,14 @@ class _$ThemeSettingsImpl implements _ThemeSettings {
@JsonKey(includeFromJson: false, includeToJson: false)
@override
int get hashCode => Object.hash(runtimeType, isDarkMode,
useMaterialThemeOnItemPage, useCurrentPlayerThemeThroughoutApp);
int get hashCode => Object.hash(
runtimeType,
themeMode,
highContrast,
useMaterialThemeFromSystem,
customThemeColor,
useMaterialThemeOnItemPage,
useCurrentPlayerThemeThroughoutApp);
/// Create a copy of ThemeSettings
/// with the given fields replaced by the non-null parameter values.
@ -557,7 +622,10 @@ class _$ThemeSettingsImpl implements _ThemeSettings {
abstract class _ThemeSettings implements ThemeSettings {
const factory _ThemeSettings(
{final bool isDarkMode,
{final ThemeMode themeMode,
final bool highContrast,
final bool useMaterialThemeFromSystem,
final String customThemeColor,
final bool useMaterialThemeOnItemPage,
final bool useCurrentPlayerThemeThroughoutApp}) = _$ThemeSettingsImpl;
@ -565,7 +633,13 @@ abstract class _ThemeSettings implements ThemeSettings {
_$ThemeSettingsImpl.fromJson;
@override
bool get isDarkMode;
ThemeMode get themeMode;
@override
bool get highContrast;
@override
bool get useMaterialThemeFromSystem;
@override
String get customThemeColor;
@override
bool get useMaterialThemeOnItemPage;
@override

18
lib/settings/models/app_settings.g.dart
View file

@ -46,7 +46,12 @@ Map<String, dynamic> _$$AppSettingsImplToJson(_$AppSettingsImpl instance) =>
_$ThemeSettingsImpl _$$ThemeSettingsImplFromJson(Map<String, dynamic> json) =>
_$ThemeSettingsImpl(
isDarkMode: json['isDarkMode'] as bool? ?? true,
themeMode: $enumDecodeNullable(_$ThemeModeEnumMap, json['themeMode']) ??
ThemeMode.system,
highContrast: json['highContrast'] as bool? ?? false,
useMaterialThemeFromSystem:
json['useMaterialThemeFromSystem'] as bool? ?? false,
customThemeColor: json['customThemeColor'] as String? ?? '#FF311B92',
useMaterialThemeOnItemPage:
json['useMaterialThemeOnItemPage'] as bool? ?? true,
useCurrentPlayerThemeThroughoutApp:
@ -55,12 +60,21 @@ _$ThemeSettingsImpl _$$ThemeSettingsImplFromJson(Map<String, dynamic> json) =>
Map<String, dynamic> _$$ThemeSettingsImplToJson(_$ThemeSettingsImpl instance) =>
<String, dynamic>{
'isDarkMode': instance.isDarkMode,
'themeMode': _$ThemeModeEnumMap[instance.themeMode]!,
'highContrast': instance.highContrast,
'useMaterialThemeFromSystem': instance.useMaterialThemeFromSystem,
'customThemeColor': instance.customThemeColor,
'useMaterialThemeOnItemPage': instance.useMaterialThemeOnItemPage,
'useCurrentPlayerThemeThroughoutApp':
instance.useCurrentPlayerThemeThroughoutApp,
};
const _$ThemeModeEnumMap = {
ThemeMode.system: 'system',
ThemeMode.light: 'light',
ThemeMode.dark: 'dark',
};
_$PlayerSettingsImpl _$$PlayerSettingsImplFromJson(Map<String, dynamic> json) =>
_$PlayerSettingsImpl(
miniPlayerSettings: json['miniPlayerSettings'] == null

247
lib/settings/view/app_settings_page.dart
View file

@ -7,11 +7,10 @@ import 'package:flutter_settings_ui/flutter_settings_ui.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:vaani/api/authenticated_user_provider.dart';
import 'package:vaani/api/server_provider.dart';
import 'package:vaani/router/router.dart';
import 'package:vaani/settings/app_settings_provider.dart';
import 'package:vaani/settings/models/app_settings.dart' as model;
import 'package:vaani/settings/view/buttons.dart';
import 'package:vaani/settings/view/simple_settings_page.dart';
import 'package:vaani/settings/view/widgets/navigation_with_switch_tile.dart';
@ -23,58 +22,11 @@ class AppSettingsPage extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final appSettings = ref.watch(appSettingsProvider);
final registeredServers = ref.watch(audiobookShelfServerProvider);
final registeredServersAsList = registeredServers.toList();
final availableUsers = ref.watch(authenticatedUserProvider);
final serverURIController = useTextEditingController();
final sleepTimerSettings = appSettings.sleepTimerSettings;
return SimpleSettingsPage(
title: const Text('App Settings'),
sections: [
// Appearance section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
title: Text(
'Appearance',
style: Theme.of(context).textTheme.titleLarge,
),
tiles: [
SettingsTile.switchTile(
initialValue: appSettings.themeSettings.isDarkMode,
title: const Text('Dark Mode'),
description: const Text('we all know dark mode is better'),
leading: appSettings.themeSettings.isDarkMode
? const Icon(Icons.dark_mode)
: const Icon(Icons.light_mode),
onToggle: (value) {
ref.read(appSettingsProvider.notifier).toggleDarkMode();
},
),
SettingsTile.switchTile(
initialValue:
appSettings.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: appSettings.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,
),
);
},
),
],
),
// General section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
@ -86,6 +38,16 @@ class AppSettingsPage extends HookConsumerWidget {
style: Theme.of(context).textTheme.titleLarge,
),
tiles: [
SettingsTile(
title: const Text('Player Settings'),
leading: const Icon(Icons.play_arrow),
description: const Text(
'Customize the player settings',
),
onPressed: (context) {
context.pushNamed(Routes.playerSettings.name);
},
),
NavigationWithSwitchTile(
title: const Text('Auto Turn On Sleep Timer'),
description: const Text(
@ -106,26 +68,6 @@ class AppSettingsPage extends HookConsumerWidget {
);
},
),
SettingsTile(
title: const Text('Notification Media Player'),
leading: const Icon(Icons.play_lesson),
description: const Text(
'Customize the media player in notifications',
),
onPressed: (context) {
context.pushNamed(Routes.notificationSettings.name);
},
),
SettingsTile(
title: const Text('Player Settings'),
leading: const Icon(Icons.play_arrow),
description: const Text(
'Customize the player settings',
),
onPressed: (context) {
context.pushNamed(Routes.playerSettings.name);
},
),
NavigationWithSwitchTile(
title: const Text('Shake Detector'),
leading: const Icon(Icons.vibration),
@ -146,6 +88,41 @@ class AppSettingsPage extends HookConsumerWidget {
),
],
),
// Appearance section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
title: Text(
'Appearance',
style: Theme.of(context).textTheme.titleLarge,
),
tiles: [
SettingsTile.navigation(
leading: const Icon(Icons.color_lens),
title: const Text('Theme Settings'),
description: const Text(
'Customize the app theme',
),
onPressed: (context) {
context.pushNamed(Routes.themeSettings.name);
},
),
SettingsTile(
title: const Text('Notification Media Player'),
leading: const Icon(Icons.play_lesson),
description: const Text(
'Customize the media player in notifications',
),
onPressed: (context) {
context.pushNamed(Routes.notificationSettings.name);
},
),
],
),
// Backup and Restore section
SettingsSection(
margin: const EdgeInsetsDirectional.symmetric(
@ -185,61 +162,11 @@ class AppSettingsPage extends HookConsumerWidget {
'Restore the app settings from the backup',
),
onPressed: (context) {
final formKey = GlobalKey<FormState>();
// show a dialog to get the backup
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Restore Backup'),
content: Form(
key: formKey,
child: TextFormField(
controller: serverURIController,
decoration: const InputDecoration(
labelText: 'Backup',
hintText: 'Paste the backup here',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please paste the backup here';
}
return null;
},
),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
if (formKey.currentState!.validate()) {
final backup = serverURIController.text;
final newSettings = model.AppSettings.fromJson(
// decode the backup as json
jsonDecode(backup),
);
ref
.read(appSettingsProvider.notifier)
.update(newSettings);
Navigator.of(context).pop();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Settings restored'),
),
);
// clear the backup
serverURIController.clear();
}
},
child: const Text('Restore'),
),
],
);
return RestoreDialogue();
},
);
},
@ -292,3 +219,83 @@ class AppSettingsPage extends HookConsumerWidget {
);
}
}
class RestoreDialogue extends HookConsumerWidget {
const RestoreDialogue({
super.key,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final formKey = useMemoized(() => GlobalKey<FormState>());
final settings = useState<model.AppSettings?>(null);
final settingsInputController = useTextEditingController();
return AlertDialog(
title: const Text('Restore Backup'),
content: Form(
key: formKey,
child: TextFormField(
autofocus: true,
decoration: InputDecoration(
labelText: 'Backup',
hintText: 'Paste the backup here',
// clear button
suffixIcon: IconButton(
icon: Icon(Icons.clear),
onPressed: () {
settingsInputController.clear();
},
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please paste the backup here';
}
try {
// try to decode the backup
settings.value = model.AppSettings.fromJson(
jsonDecode(value),
);
} catch (e) {
return 'Invalid backup';
}
return null;
},
),
),
actions: [
CancelButton(),
TextButton(
onPressed: () {
if (formKey.currentState!.validate()) {
if (settings.value == null) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Invalid backup'),
),
);
return;
}
ref.read(appSettingsProvider.notifier).update(settings.value!);
settingsInputController.clear();
Navigator.of(context).pop();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Settings restored'),
),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Invalid backup'),
),
);
}
},
child: const Text('Restore'),
),
],
);
}
}

4
lib/settings/view/buttons.dart
View file

@ -20,12 +20,16 @@ class OkButton<T> extends StatelessWidget {
class CancelButton extends StatelessWidget {
const CancelButton({
super.key,
this.onPressed,
});
final void Function()? onPressed;
@override
Widget build(BuildContext context) {
return TextButton(
onPressed: () {
onPressed?.call();
Navigator.of(context).pop();
},
child: const Text('Cancel'),

261
lib/settings/view/theme_settings_page.dart Normal file
View 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);
},
),
],
);
}
}