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 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

View file

@ -1,10 +0,0 @@
import 'package:flutter/material.dart';
import 'package:vaani/theme/theme.dart';
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.fromSeed(
seedColor: brandColor,
brightness: Brightness.dark,
),
);

View file

@ -1,10 +0,0 @@
import 'package:flutter/material.dart';
import 'package:vaani/theme/theme.dart';
final ThemeData lightTheme = ThemeData(
brightness: Brightness.light,
colorScheme: ColorScheme.fromSeed(
seedColor: brandColor,
brightness: Brightness.light,
),
);

View file

@ -0,0 +1,73 @@
import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:logging/logging.dart';
import 'package:material_color_utilities/material_color_utilities.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'system_theme_provider.g.dart';
final _logger = Logger('SystemThemeProvider');
/// copied from [DynamicColorBuilder]
@Riverpod(keepAlive: true)
FutureOr<(ColorScheme light, ColorScheme dark)?> systemTheme(
SystemThemeRef ref, {
bool highContrast = false,
}) async {
_logger.fine('Generating system theme');
ColorScheme? schemeLight;
ColorScheme? schemeDark;
// Platform messages may fail, so we use a try/catch PlatformException.
try {
CorePalette? corePalette = await DynamicColorPlugin.getCorePalette();
if (corePalette != null) {
_logger.fine('dynamic_color: Core palette detected.');
schemeLight = corePalette.toColorScheme(brightness: Brightness.light);
schemeDark = corePalette.toColorScheme(brightness: Brightness.dark);
}
} on PlatformException {
_logger.warning('dynamic_color: Failed to obtain core palette.');
}
if (schemeLight == null || schemeDark == null) {
try {
final Color? accentColor = await DynamicColorPlugin.getAccentColor();
if (accentColor != null) {
_logger.fine('dynamic_color: Accent color detected.');
schemeLight = ColorScheme.fromSeed(
seedColor: accentColor,
brightness: Brightness.light,
);
schemeDark = ColorScheme.fromSeed(
seedColor: accentColor,
brightness: Brightness.dark,
);
}
} on PlatformException {
_logger.warning('dynamic_color: Failed to obtain accent color.');
}
}
if (schemeLight == null || schemeDark == null) {
_logger
.warning('dynamic_color: Dynamic color not detected on this device.');
return null;
}
// set high contrast theme
if (highContrast) {
schemeLight = schemeLight
.copyWith(
surface: Colors.white,
)
.harmonized();
schemeDark = schemeDark
.copyWith(
surface: Colors.black,
)
.harmonized();
}
return (schemeLight, schemeDark);
}

View file

@ -0,0 +1,177 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'system_theme_provider.dart';
// **************************************************************************
// RiverpodGenerator
// **************************************************************************
String _$systemThemeHash() => r'0af4a012a2a2b2fa91642a1313515cba02cd3535';
/// Copied from Dart SDK
class _SystemHash {
_SystemHash._();
static int combine(int hash, int value) {
// ignore: parameter_assignments
hash = 0x1fffffff & (hash + value);
// ignore: parameter_assignments
hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
return hash ^ (hash >> 6);
}
static int finish(int hash) {
// ignore: parameter_assignments
hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
// ignore: parameter_assignments
hash = hash ^ (hash >> 11);
return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
}
}
/// copied from [DynamicColorBuilder]
///
/// Copied from [systemTheme].
@ProviderFor(systemTheme)
const systemThemeProvider = SystemThemeFamily();
/// copied from [DynamicColorBuilder]
///
/// Copied from [systemTheme].
class SystemThemeFamily
extends Family<AsyncValue<(ColorScheme light, ColorScheme dark)?>> {
/// copied from [DynamicColorBuilder]
///
/// Copied from [systemTheme].
const SystemThemeFamily();
/// copied from [DynamicColorBuilder]
///
/// Copied from [systemTheme].
SystemThemeProvider call({
bool highContrast = false,
}) {
return SystemThemeProvider(
highContrast: highContrast,
);
}
@override
SystemThemeProvider getProviderOverride(
covariant SystemThemeProvider provider,
) {
return call(
highContrast: provider.highContrast,
);
}
static const Iterable<ProviderOrFamily>? _dependencies = null;
@override
Iterable<ProviderOrFamily>? get dependencies => _dependencies;
static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
@override
Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
_allTransitiveDependencies;
@override
String? get name => r'systemThemeProvider';
}
/// copied from [DynamicColorBuilder]
///
/// Copied from [systemTheme].
class SystemThemeProvider
extends FutureProvider<(ColorScheme light, ColorScheme dark)?> {
/// copied from [DynamicColorBuilder]
///
/// Copied from [systemTheme].
SystemThemeProvider({
bool highContrast = false,
}) : this._internal(
(ref) => systemTheme(
ref as SystemThemeRef,
highContrast: highContrast,
),
from: systemThemeProvider,
name: r'systemThemeProvider',
debugGetCreateSourceHash:
const bool.fromEnvironment('dart.vm.product')
? null
: _$systemThemeHash,
dependencies: SystemThemeFamily._dependencies,
allTransitiveDependencies:
SystemThemeFamily._allTransitiveDependencies,
highContrast: highContrast,
);
SystemThemeProvider._internal(
super._createNotifier, {
required super.name,
required super.dependencies,
required super.allTransitiveDependencies,
required super.debugGetCreateSourceHash,
required super.from,
required this.highContrast,
}) : super.internal();
final bool highContrast;
@override
Override overrideWith(
FutureOr<(ColorScheme light, ColorScheme dark)?> Function(
SystemThemeRef provider)
create,
) {
return ProviderOverride(
origin: this,
override: SystemThemeProvider._internal(
(ref) => create(ref as SystemThemeRef),
from: from,
name: null,
dependencies: null,
allTransitiveDependencies: null,
debugGetCreateSourceHash: null,
highContrast: highContrast,
),
);
}
@override
FutureProviderElement<(ColorScheme light, ColorScheme dark)?>
createElement() {
return _SystemThemeProviderElement(this);
}
@override
bool operator ==(Object other) {
return other is SystemThemeProvider && other.highContrast == highContrast;
}
@override
int get hashCode {
var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, highContrast.hashCode);
return _SystemHash.finish(hash);
}
}
mixin SystemThemeRef
on FutureProviderRef<(ColorScheme light, ColorScheme dark)?> {
/// The parameter `highContrast` of this provider.
bool get highContrast;
}
class _SystemThemeProviderElement
extends FutureProviderElement<(ColorScheme light, ColorScheme dark)?>
with SystemThemeRef {
_SystemThemeProviderElement(super.provider);
@override
bool get highContrast => (origin as SystemThemeProvider).highContrast;
}
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

View file

@ -1,3 +1,4 @@
import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:logging/logging.dart';
@ -13,15 +14,25 @@ Future<FutureOr<ColorScheme?>> themeFromCover(
ThemeFromCoverRef ref,
ImageProvider<Object> img, {
Brightness brightness = Brightness.dark,
bool highContrast = false,
}) async {
// ! add deliberate delay to simulate a long running task as it interferes with other animations
await Future.delayed(500.ms);
_logger.fine('Generating color scheme from cover image');
return ColorScheme.fromImageProvider(
var theme = await ColorScheme.fromImageProvider(
provider: img,
brightness: brightness,
);
// set high contrast theme
if (highContrast) {
theme = theme
.copyWith(
surface: brightness == Brightness.light ? Colors.white : Colors.black,
)
.harmonized();
}
return theme;
// TODO isolate is not working
// see https://github.com/flutter/flutter/issues/119207
// use isolate to generate the color scheme
@ -50,14 +61,18 @@ FutureOr<ColorScheme?> themeOfLibraryItem(
ThemeOfLibraryItemRef ref,
String? itemId, {
Brightness brightness = Brightness.dark,
bool highContrast = false,
}) async {
if (itemId == null) {
return null;
}
final coverImage = await ref.watch(coverImageProvider(itemId).future);
final val = await ref.watch(
themeFromCoverProvider(MemoryImage(coverImage), brightness: brightness)
.future,
themeFromCoverProvider(
MemoryImage(coverImage),
brightness: brightness,
highContrast: highContrast,
).future,
);
return val;
// coverImage.when(

View file

@ -6,7 +6,7 @@ part of 'theme_from_cover_provider.dart';
// RiverpodGenerator
// **************************************************************************
String _$themeFromCoverHash() => r'a549513a0dcdff76be94488baf38a8b886ce63eb';
String _$themeFromCoverHash() => r'f656614e2d4851acdfa16d249b3198ae0e1d6d6f';
/// Copied from Dart SDK
class _SystemHash {
@ -42,10 +42,12 @@ class ThemeFromCoverFamily extends Family<AsyncValue<FutureOr<ColorScheme?>>> {
ThemeFromCoverProvider call(
ImageProvider<Object> img, {
Brightness brightness = Brightness.dark,
bool highContrast = false,
}) {
return ThemeFromCoverProvider(
img,
brightness: brightness,
highContrast: highContrast,
);
}
@ -56,6 +58,7 @@ class ThemeFromCoverFamily extends Family<AsyncValue<FutureOr<ColorScheme?>>> {
return call(
provider.img,
brightness: provider.brightness,
highContrast: provider.highContrast,
);
}
@ -80,11 +83,13 @@ class ThemeFromCoverProvider extends FutureProvider<FutureOr<ColorScheme?>> {
ThemeFromCoverProvider(
ImageProvider<Object> img, {
Brightness brightness = Brightness.dark,
bool highContrast = false,
}) : this._internal(
(ref) => themeFromCover(
ref as ThemeFromCoverRef,
img,
brightness: brightness,
highContrast: highContrast,
),
from: themeFromCoverProvider,
name: r'themeFromCoverProvider',
@ -97,6 +102,7 @@ class ThemeFromCoverProvider extends FutureProvider<FutureOr<ColorScheme?>> {
ThemeFromCoverFamily._allTransitiveDependencies,
img: img,
brightness: brightness,
highContrast: highContrast,
);
ThemeFromCoverProvider._internal(
@ -108,10 +114,12 @@ class ThemeFromCoverProvider extends FutureProvider<FutureOr<ColorScheme?>> {
required super.from,
required this.img,
required this.brightness,
required this.highContrast,
}) : super.internal();
final ImageProvider<Object> img;
final Brightness brightness;
final bool highContrast;
@override
Override overrideWith(
@ -129,6 +137,7 @@ class ThemeFromCoverProvider extends FutureProvider<FutureOr<ColorScheme?>> {
debugGetCreateSourceHash: null,
img: img,
brightness: brightness,
highContrast: highContrast,
),
);
}
@ -142,7 +151,8 @@ class ThemeFromCoverProvider extends FutureProvider<FutureOr<ColorScheme?>> {
bool operator ==(Object other) {
return other is ThemeFromCoverProvider &&
other.img == img &&
other.brightness == brightness;
other.brightness == brightness &&
other.highContrast == highContrast;
}
@override
@ -150,6 +160,7 @@ class ThemeFromCoverProvider extends FutureProvider<FutureOr<ColorScheme?>> {
var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, img.hashCode);
hash = _SystemHash.combine(hash, brightness.hashCode);
hash = _SystemHash.combine(hash, highContrast.hashCode);
return _SystemHash.finish(hash);
}
@ -161,6 +172,9 @@ mixin ThemeFromCoverRef on FutureProviderRef<FutureOr<ColorScheme?>> {
/// The parameter `brightness` of this provider.
Brightness get brightness;
/// The parameter `highContrast` of this provider.
bool get highContrast;
}
class _ThemeFromCoverProviderElement
@ -172,10 +186,12 @@ class _ThemeFromCoverProviderElement
ImageProvider<Object> get img => (origin as ThemeFromCoverProvider).img;
@override
Brightness get brightness => (origin as ThemeFromCoverProvider).brightness;
@override
bool get highContrast => (origin as ThemeFromCoverProvider).highContrast;
}
String _$themeOfLibraryItemHash() =>
r'a1d0e5d81f4debe88d5a6ce46c3af28623ad4273';
r'b2677daf31a6a53f3f237e5204c62dff5ec43171';
/// See also [themeOfLibraryItem].
@ProviderFor(themeOfLibraryItem)
@ -190,10 +206,12 @@ class ThemeOfLibraryItemFamily extends Family<AsyncValue<ColorScheme?>> {
ThemeOfLibraryItemProvider call(
String? itemId, {
Brightness brightness = Brightness.dark,
bool highContrast = false,
}) {
return ThemeOfLibraryItemProvider(
itemId,
brightness: brightness,
highContrast: highContrast,
);
}
@ -204,6 +222,7 @@ class ThemeOfLibraryItemFamily extends Family<AsyncValue<ColorScheme?>> {
return call(
provider.itemId,
brightness: provider.brightness,
highContrast: provider.highContrast,
);
}
@ -228,11 +247,13 @@ class ThemeOfLibraryItemProvider extends FutureProvider<ColorScheme?> {
ThemeOfLibraryItemProvider(
String? itemId, {
Brightness brightness = Brightness.dark,
bool highContrast = false,
}) : this._internal(
(ref) => themeOfLibraryItem(
ref as ThemeOfLibraryItemRef,
itemId,
brightness: brightness,
highContrast: highContrast,
),
from: themeOfLibraryItemProvider,
name: r'themeOfLibraryItemProvider',
@ -245,6 +266,7 @@ class ThemeOfLibraryItemProvider extends FutureProvider<ColorScheme?> {
ThemeOfLibraryItemFamily._allTransitiveDependencies,
itemId: itemId,
brightness: brightness,
highContrast: highContrast,
);
ThemeOfLibraryItemProvider._internal(
@ -256,10 +278,12 @@ class ThemeOfLibraryItemProvider extends FutureProvider<ColorScheme?> {
required super.from,
required this.itemId,
required this.brightness,
required this.highContrast,
}) : super.internal();
final String? itemId;
final Brightness brightness;
final bool highContrast;
@override
Override overrideWith(
@ -276,6 +300,7 @@ class ThemeOfLibraryItemProvider extends FutureProvider<ColorScheme?> {
debugGetCreateSourceHash: null,
itemId: itemId,
brightness: brightness,
highContrast: highContrast,
),
);
}
@ -289,7 +314,8 @@ class ThemeOfLibraryItemProvider extends FutureProvider<ColorScheme?> {
bool operator ==(Object other) {
return other is ThemeOfLibraryItemProvider &&
other.itemId == itemId &&
other.brightness == brightness;
other.brightness == brightness &&
other.highContrast == highContrast;
}
@override
@ -297,6 +323,7 @@ class ThemeOfLibraryItemProvider extends FutureProvider<ColorScheme?> {
var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, itemId.hashCode);
hash = _SystemHash.combine(hash, brightness.hashCode);
hash = _SystemHash.combine(hash, highContrast.hashCode);
return _SystemHash.finish(hash);
}
@ -308,6 +335,9 @@ mixin ThemeOfLibraryItemRef on FutureProviderRef<ColorScheme?> {
/// The parameter `brightness` of this provider.
Brightness get brightness;
/// The parameter `highContrast` of this provider.
bool get highContrast;
}
class _ThemeOfLibraryItemProviderElement
@ -319,6 +349,8 @@ class _ThemeOfLibraryItemProviderElement
@override
Brightness get brightness =>
(origin as ThemeOfLibraryItemProvider).brightness;
@override
bool get highContrast => (origin as ThemeOfLibraryItemProvider).highContrast;
}
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

View file

@ -1,9 +1,15 @@
import 'dart:ui';
export 'dark.dart';
export 'light.dart';
import 'package:flutter/material.dart';
// brand color rgb(49, 27, 146) rgb(96, 76, 236)
const brandColor = Color(0xFF311B92);
const brandColorLight = Color(0xFF604CEC);
final brandLightColorScheme = ColorScheme.fromSeed(
seedColor: brandColor,
brightness: Brightness.light,
);
final brandDarkColorScheme = ColorScheme.fromSeed(
seedColor: brandColor,
brightness: Brightness.dark,
);