feat: add support for dynamic background and gradient colors in theme configuration
This commit is contained in:
parent
6ff44041f0
commit
b2363b6c6b
@ -191,9 +191,9 @@ class _MainShellState extends State<MainShell> {
|
|||||||
begin: Alignment.topCenter,
|
begin: Alignment.topCenter,
|
||||||
end: Alignment.bottomCenter,
|
end: Alignment.bottomCenter,
|
||||||
colors: [
|
colors: [
|
||||||
colorScheme.surfaceContainerLowest,
|
ThemeManager.instance.backgroundColor,
|
||||||
colorScheme.surface,
|
ThemeManager.instance.backgroundColor,
|
||||||
const Color(0xFFF3EAD3), // Warm traditional restaurant sand/cream
|
ThemeManager.instance.backgroundGradientColor,
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@ -116,11 +116,15 @@ class OdooService {
|
|||||||
'brand_logo': (res['brand_logo'] as String?) ?? '',
|
'brand_logo': (res['brand_logo'] as String?) ?? '',
|
||||||
'primary_color': (res['primary_color'] as String?) ?? '#C62828',
|
'primary_color': (res['primary_color'] as String?) ?? '#C62828',
|
||||||
'secondary_color': (res['secondary_color'] as String?) ?? '#FF8F00',
|
'secondary_color': (res['secondary_color'] as String?) ?? '#FF8F00',
|
||||||
|
'background_color': (res['background_color'] as String?) ?? '#FAF6EE',
|
||||||
|
'background_gradient_color': (res['background_gradient_color'] as String?) ?? '#F3EAD3',
|
||||||
};
|
};
|
||||||
// Save and apply new branding and theme colors dynamically
|
// Save and apply new branding and theme colors dynamically
|
||||||
await ThemeManager.instance.updateConfig(
|
await ThemeManager.instance.updateConfig(
|
||||||
primaryHex: configMap['primary_color']!,
|
primaryHex: configMap['primary_color']!,
|
||||||
secondaryHex: configMap['secondary_color']!,
|
secondaryHex: configMap['secondary_color']!,
|
||||||
|
backgroundHex: configMap['background_color']!,
|
||||||
|
backgroundGradientHex: configMap['background_gradient_color']!,
|
||||||
brandLogoB64: configMap['brand_logo']!,
|
brandLogoB64: configMap['brand_logo']!,
|
||||||
);
|
);
|
||||||
return configMap;
|
return configMap;
|
||||||
|
|||||||
@ -11,15 +11,20 @@ class ThemeManager extends ChangeNotifier {
|
|||||||
|
|
||||||
Color _primaryColor = AppTheme.primary;
|
Color _primaryColor = AppTheme.primary;
|
||||||
Color _secondaryColor = AppTheme.secondary;
|
Color _secondaryColor = AppTheme.secondary;
|
||||||
|
Color _backgroundColor = AppTheme.surface;
|
||||||
|
Color _backgroundGradientColor = const Color(0xFFF3EAD3);
|
||||||
String _brandLogo = '';
|
String _brandLogo = '';
|
||||||
|
|
||||||
Color get primaryColor => _primaryColor;
|
Color get primaryColor => _primaryColor;
|
||||||
Color get secondaryColor => _secondaryColor;
|
Color get secondaryColor => _secondaryColor;
|
||||||
|
Color get backgroundColor => _backgroundColor;
|
||||||
|
Color get backgroundGradientColor => _backgroundGradientColor;
|
||||||
String get brandLogo => _brandLogo;
|
String get brandLogo => _brandLogo;
|
||||||
|
|
||||||
ThemeData get themeData => AppTheme.getTheme(
|
ThemeData get themeData => AppTheme.getTheme(
|
||||||
primaryColor: _primaryColor,
|
primaryColor: _primaryColor,
|
||||||
secondaryColor: _secondaryColor,
|
secondaryColor: _secondaryColor,
|
||||||
|
backgroundColor: _backgroundColor,
|
||||||
);
|
);
|
||||||
|
|
||||||
/// Initialize cached settings on app launch
|
/// Initialize cached settings on app launch
|
||||||
@ -27,6 +32,8 @@ class ThemeManager extends ChangeNotifier {
|
|||||||
final prefs = await SharedPreferences.getInstance();
|
final prefs = await SharedPreferences.getInstance();
|
||||||
final primHex = prefs.getString('theme_primary_color');
|
final primHex = prefs.getString('theme_primary_color');
|
||||||
final secHex = prefs.getString('theme_secondary_color');
|
final secHex = prefs.getString('theme_secondary_color');
|
||||||
|
final bgHex = prefs.getString('theme_background_color');
|
||||||
|
final bgGradHex = prefs.getString('theme_background_gradient_color');
|
||||||
_brandLogo = prefs.getString('theme_brand_logo') ?? '';
|
_brandLogo = prefs.getString('theme_brand_logo') ?? '';
|
||||||
|
|
||||||
if (primHex != null) {
|
if (primHex != null) {
|
||||||
@ -35,21 +42,33 @@ class ThemeManager extends ChangeNotifier {
|
|||||||
if (secHex != null) {
|
if (secHex != null) {
|
||||||
_secondaryColor = _parseHexColor(secHex) ?? AppTheme.secondary;
|
_secondaryColor = _parseHexColor(secHex) ?? AppTheme.secondary;
|
||||||
}
|
}
|
||||||
|
if (bgHex != null) {
|
||||||
|
_backgroundColor = _parseHexColor(bgHex) ?? AppTheme.surface;
|
||||||
|
}
|
||||||
|
if (bgGradHex != null) {
|
||||||
|
_backgroundGradientColor = _parseHexColor(bgGradHex) ?? const Color(0xFFF3EAD3);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Update theme options and persist them to SharedPreferences
|
/// Update theme options and persist them to SharedPreferences
|
||||||
Future<void> updateConfig({
|
Future<void> updateConfig({
|
||||||
required String primaryHex,
|
required String primaryHex,
|
||||||
required String secondaryHex,
|
required String secondaryHex,
|
||||||
|
required String backgroundHex,
|
||||||
|
required String backgroundGradientHex,
|
||||||
required String brandLogoB64,
|
required String brandLogoB64,
|
||||||
}) async {
|
}) async {
|
||||||
final prefs = await SharedPreferences.getInstance();
|
final prefs = await SharedPreferences.getInstance();
|
||||||
await prefs.setString('theme_primary_color', primaryHex);
|
await prefs.setString('theme_primary_color', primaryHex);
|
||||||
await prefs.setString('theme_secondary_color', secondaryHex);
|
await prefs.setString('theme_secondary_color', secondaryHex);
|
||||||
|
await prefs.setString('theme_background_color', backgroundHex);
|
||||||
|
await prefs.setString('theme_background_gradient_color', backgroundGradientHex);
|
||||||
await prefs.setString('theme_brand_logo', brandLogoB64);
|
await prefs.setString('theme_brand_logo', brandLogoB64);
|
||||||
|
|
||||||
_primaryColor = _parseHexColor(primaryHex) ?? AppTheme.primary;
|
_primaryColor = _parseHexColor(primaryHex) ?? AppTheme.primary;
|
||||||
_secondaryColor = _parseHexColor(secondaryHex) ?? AppTheme.secondary;
|
_secondaryColor = _parseHexColor(secondaryHex) ?? AppTheme.secondary;
|
||||||
|
_backgroundColor = _parseHexColor(backgroundHex) ?? AppTheme.surface;
|
||||||
|
_backgroundGradientColor = _parseHexColor(backgroundGradientHex) ?? const Color(0xFFF3EAD3);
|
||||||
_brandLogo = brandLogoB64;
|
_brandLogo = brandLogoB64;
|
||||||
notifyListeners();
|
notifyListeners();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,10 +25,11 @@ class AppTheme {
|
|||||||
|
|
||||||
static ThemeData get lightTheme => getTheme();
|
static ThemeData get lightTheme => getTheme();
|
||||||
|
|
||||||
static ThemeData getTheme({Color? primaryColor, Color? secondaryColor}) {
|
static ThemeData getTheme({Color? primaryColor, Color? secondaryColor, Color? backgroundColor}) {
|
||||||
final baseTheme = ThemeData.light();
|
final baseTheme = ThemeData.light();
|
||||||
final pColor = primaryColor ?? primary;
|
final pColor = primaryColor ?? primary;
|
||||||
final sColor = secondaryColor ?? secondary;
|
final sColor = secondaryColor ?? secondary;
|
||||||
|
final bg = backgroundColor ?? surface;
|
||||||
|
|
||||||
// Dynamically compute readable contrast text colors
|
// Dynamically compute readable contrast text colors
|
||||||
final onPrimaryColor = pColor.computeLuminance() > 0.5 ? Color(0xFF2E251B) : Colors.white;
|
final onPrimaryColor = pColor.computeLuminance() > 0.5 ? Color(0xFF2E251B) : Colors.white;
|
||||||
@ -36,14 +37,14 @@ class AppTheme {
|
|||||||
|
|
||||||
return ThemeData(
|
return ThemeData(
|
||||||
useMaterial3: true,
|
useMaterial3: true,
|
||||||
scaffoldBackgroundColor: surface,
|
scaffoldBackgroundColor: bg,
|
||||||
colorScheme: ColorScheme.light(
|
colorScheme: ColorScheme.light(
|
||||||
primary: pColor,
|
primary: pColor,
|
||||||
primaryContainer: pColor,
|
primaryContainer: pColor,
|
||||||
secondary: sColor,
|
secondary: sColor,
|
||||||
secondaryContainer: sColor.withValues(alpha: 0.15),
|
secondaryContainer: sColor.withValues(alpha: 0.15),
|
||||||
onSecondaryContainer: onSecondaryColor,
|
onSecondaryContainer: onSecondaryColor,
|
||||||
surface: surface,
|
surface: bg,
|
||||||
onSurface: onSurface,
|
onSurface: onSurface,
|
||||||
onSurfaceVariant: onSurfaceVariant,
|
onSurfaceVariant: onSurfaceVariant,
|
||||||
onPrimary: onPrimaryColor,
|
onPrimary: onPrimaryColor,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user