mirror of https://github.com/immich-app/immich.git
refactor(mobile): refactor theme management (#14415)
dvbthien
GitHub
parent
5814a1b223
commit
11f585d0ad
@ -0,0 +1,23 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
enum ImmichColorPreset {
|
||||
indigo,
|
||||
deepPurple,
|
||||
pink,
|
||||
red,
|
||||
orange,
|
||||
yellow,
|
||||
lime,
|
||||
green,
|
||||
cyan,
|
||||
slateGray
|
||||
}
|
||||
|
||||
const ImmichColorPreset defaultColorPreset = ImmichColorPreset.indigo;
|
||||
const String defaultColorPresetName = "indigo";
|
||||
|
||||
const Color immichBrandColorLight = Color(0xFF4150AF);
|
||||
const Color immichBrandColorDark = Color(0xFFACCBFA);
|
||||
const Color whiteOpacity75 = Color.fromARGB((0.75 * 255) ~/ 1, 255, 255, 255);
|
||||
const Color red400 = Color(0xFFEF5350);
|
||||
const Color grey200 = Color(0xFFEEEEEE);
|
||||
@ -0,0 +1,74 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
|
||||
import 'package:immich_mobile/constants/colors.dart';
|
||||
import 'package:immich_mobile/theme/color_scheme.dart';
|
||||
import 'package:immich_mobile/theme/theme_data.dart';
|
||||
import 'package:immich_mobile/theme/dynamic_theme.dart';
|
||||
import 'package:immich_mobile/providers/app_settings.provider.dart';
|
||||
import 'package:immich_mobile/services/app_settings.service.dart';
|
||||
|
||||
final immichThemeModeProvider = StateProvider<ThemeMode>((ref) {
|
||||
final themeMode = ref
|
||||
.watch(appSettingsServiceProvider)
|
||||
.getSetting(AppSettingsEnum.themeMode);
|
||||
|
||||
debugPrint("Current themeMode $themeMode");
|
||||
|
||||
if (themeMode == ThemeMode.light.name) {
|
||||
return ThemeMode.light;
|
||||
} else if (themeMode == ThemeMode.dark.name) {
|
||||
return ThemeMode.dark;
|
||||
} else {
|
||||
return ThemeMode.system;
|
||||
}
|
||||
});
|
||||
|
||||
final immichThemePresetProvider = StateProvider<ImmichColorPreset>((ref) {
|
||||
final appSettingsProvider = ref.watch(appSettingsServiceProvider);
|
||||
final primaryColorPreset =
|
||||
appSettingsProvider.getSetting(AppSettingsEnum.primaryColor);
|
||||
|
||||
debugPrint("Current theme preset $primaryColorPreset");
|
||||
|
||||
try {
|
||||
return ImmichColorPreset.values
|
||||
.firstWhere((e) => e.name == primaryColorPreset);
|
||||
} catch (e) {
|
||||
debugPrint(
|
||||
"Theme preset $primaryColorPreset not found. Applying default preset.",
|
||||
);
|
||||
appSettingsProvider.setSetting(
|
||||
AppSettingsEnum.primaryColor,
|
||||
defaultColorPresetName,
|
||||
);
|
||||
return defaultColorPreset;
|
||||
}
|
||||
});
|
||||
|
||||
final dynamicThemeSettingProvider = StateProvider<bool>((ref) {
|
||||
return ref
|
||||
.watch(appSettingsServiceProvider)
|
||||
.getSetting(AppSettingsEnum.dynamicTheme);
|
||||
});
|
||||
|
||||
final colorfulInterfaceSettingProvider = StateProvider<bool>((ref) {
|
||||
return ref
|
||||
.watch(appSettingsServiceProvider)
|
||||
.getSetting(AppSettingsEnum.colorfulInterface);
|
||||
});
|
||||
|
||||
// Provider for current selected theme
|
||||
final immichThemeProvider = StateProvider<ImmichTheme>((ref) {
|
||||
final primaryColorPreset = ref.read(immichThemePresetProvider);
|
||||
final useSystemColor = ref.watch(dynamicThemeSettingProvider);
|
||||
final useColorfulInterface = ref.watch(colorfulInterfaceSettingProvider);
|
||||
final ImmichTheme? dynamicTheme = DynamicTheme.theme;
|
||||
final currentTheme = (useSystemColor && dynamicTheme != null)
|
||||
? dynamicTheme
|
||||
: primaryColorPreset.themeOfPreset;
|
||||
|
||||
return useColorfulInterface
|
||||
? currentTheme
|
||||
: decolorizeSurfaces(theme: currentTheme);
|
||||
});
|
||||
@ -0,0 +1,38 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:dynamic_color/dynamic_color.dart';
|
||||
|
||||
import 'package:immich_mobile/theme/theme_data.dart';
|
||||
|
||||
abstract final class DynamicTheme {
|
||||
DynamicTheme._();
|
||||
|
||||
static ImmichTheme? _theme;
|
||||
// Method to fetch dynamic system colors
|
||||
static Future<void> fetchSystemPalette() async {
|
||||
try {
|
||||
final corePalette = await DynamicColorPlugin.getCorePalette();
|
||||
if (corePalette != null) {
|
||||
final primaryColor = corePalette.toColorScheme().primary;
|
||||
debugPrint('dynamic_color: Core palette detected.');
|
||||
|
||||
// Some palettes do not generate surface container colors accurately,
|
||||
// so we regenerate all colors using the primary color
|
||||
_theme = ImmichTheme(
|
||||
light: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
dark: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
debugPrint('dynamic_color: Failed to obtain core palette: $error');
|
||||
}
|
||||
}
|
||||
|
||||
static ImmichTheme? get theme => _theme;
|
||||
static bool get isAvailable => _theme != null;
|
||||
}
|
||||
Loading…
Reference in New Issue