From ac18cf62c358aa64f749e84b370884b6d0238571 Mon Sep 17 00:00:00 2001 From: 55nknown Date: Sun, 20 Nov 2022 11:55:34 +0100 Subject: [PATCH] custom theme --- filcnaplo/lib/database/init.dart | 2 +- filcnaplo/lib/models/settings.dart | 29 ++++++++++++++- filcnaplo/lib/theme/colors/accent.dart | 3 +- filcnaplo/lib/theme/theme.dart | 51 ++++++++++++++++---------- filcnaplo/lib/ui/filter/widgets.dart | 23 ++++++------ 5 files changed, 73 insertions(+), 35 deletions(-) diff --git a/filcnaplo/lib/database/init.dart b/filcnaplo/lib/database/init.dart index 72c93a6..d7bdabf 100644 --- a/filcnaplo/lib/database/init.dart +++ b/filcnaplo/lib/database/init.dart @@ -10,7 +10,7 @@ import 'package:sqflite_common_ffi/sqflite_ffi.dart'; const settingsDB = DatabaseStruct("settings", { "language": String, "start_page": int, "rounding": int, "theme": int, "accent_color": int, "news": int, "news_state": int, "developer_mode": int, - "update_channel": int, "config": String, // general + "update_channel": int, "config": String, "custom_accent_color": int, "custom_background_color": int, "custom_highlight_color": int, // general "grade_color1": int, "grade_color2": int, "grade_color3": int, "grade_color4": int, "grade_color5": int, // grade colors "vibration_strength": int, "ab_weeks": int, "swap_ab_weeks": int, "notifications": int, "notifications_bitfield": int, "notification_poll_interval": int, // notifications diff --git a/filcnaplo/lib/models/settings.dart b/filcnaplo/lib/models/settings.dart index 2b5bae4..5985e21 100644 --- a/filcnaplo/lib/models/settings.dart +++ b/filcnaplo/lib/models/settings.dart @@ -58,6 +58,9 @@ class SettingsProvider extends ChangeNotifier { int _bellDelay; bool _gradeOpeningFun; IconPack _iconPack; + Color _customAccentColor; + Color _customBackgroundColor; + Color _customHighlightColor; SettingsProvider({ required String language, @@ -85,6 +88,9 @@ class SettingsProvider extends ChangeNotifier { required int bellDelay, required bool gradeOpeningFun, required IconPack iconPack, + required Color customAccentColor, + required Color customBackgroundColor, + required Color customHighlightColor, }) : _language = language, _startPage = startPage, _rounding = rounding, @@ -109,7 +115,10 @@ class SettingsProvider extends ChangeNotifier { _bellDelayEnabled = bellDelayEnabled, _bellDelay = bellDelay, _gradeOpeningFun = gradeOpeningFun, - _iconPack = iconPack; + _iconPack = iconPack, + _customAccentColor = customAccentColor, + _customBackgroundColor = customBackgroundColor, + _customHighlightColor = customHighlightColor; factory SettingsProvider.fromMap(Map map) { Map? configMap; @@ -152,6 +161,9 @@ class SettingsProvider extends ChangeNotifier { bellDelay: map["bell_delay"], gradeOpeningFun: map["grade_opening_fun"] == 1, iconPack: Map.fromEntries(IconPack.values.map((e) => MapEntry(e.name, e)))[map["icon_pack"]]!, + customAccentColor: Color(map["custom_accent_color"]), + customBackgroundColor: Color(map["custom_background_color"]), + customHighlightColor: Color(map["custom_highlight_color"]), ); } @@ -185,6 +197,9 @@ class SettingsProvider extends ChangeNotifier { "bell_delay": _bellDelay, "grade_opening_fun": _gradeOpeningFun ? 1 : 0, "icon_pack": _iconPack.name, + "custom_accent_color": _customAccentColor.value, + "custom_background_color": _customBackgroundColor.value, + "custom_highlight_color": _customHighlightColor.value, }; } @@ -221,6 +236,9 @@ class SettingsProvider extends ChangeNotifier { bellDelay: 0, gradeOpeningFun: true, iconPack: IconPack.cupertino, + customAccentColor: const Color(0xff20AC9B), + customBackgroundColor: const Color(0xff000000), + customHighlightColor: const Color(0xff222222), ); } @@ -250,6 +268,9 @@ class SettingsProvider extends ChangeNotifier { int get bellDelay => _bellDelay; bool get gradeOpeningFun => _gradeOpeningFun; IconPack get iconPack => _iconPack; + Color? get customAccentColor => _customAccentColor == accentColorMap[AccentColor.custom] ? null : _customAccentColor; + Color? get customBackgroundColor => _customBackgroundColor; + Color? get customHighlightColor => _customHighlightColor; Future update( BuildContext context, { @@ -280,6 +301,9 @@ class SettingsProvider extends ChangeNotifier { int? bellDelay, bool? gradeOpeningFun, IconPack? iconPack, + Color? customAccentColor, + Color? customBackgroundColor, + Color? customHighlightColor, }) async { if (language != null && language != _language) _language = language; if (startPage != null && startPage != _startPage) _startPage = startPage; @@ -308,6 +332,9 @@ class SettingsProvider extends ChangeNotifier { if (bellDelayEnabled != null && bellDelayEnabled != _bellDelayEnabled) _bellDelayEnabled = bellDelayEnabled; if (gradeOpeningFun != null && gradeOpeningFun != _gradeOpeningFun) _gradeOpeningFun = gradeOpeningFun; if (iconPack != null && iconPack != _iconPack) _iconPack = iconPack; + if (customAccentColor != null && customAccentColor != _customAccentColor) _customAccentColor = customAccentColor; + if (customBackgroundColor != null && customBackgroundColor != _customBackgroundColor) _customBackgroundColor = customBackgroundColor; + if (customHighlightColor != null && customHighlightColor != _customHighlightColor) _customHighlightColor = customHighlightColor; database ??= Provider.of(context, listen: false); if (store) await database.store.storeSettings(this); diff --git a/filcnaplo/lib/theme/colors/accent.dart b/filcnaplo/lib/theme/colors/accent.dart index 2fcf1bb..0db741d 100644 --- a/filcnaplo/lib/theme/colors/accent.dart +++ b/filcnaplo/lib/theme/colors/accent.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; -enum AccentColor { filc, blue, green, lime, yellow, orange, red, pink, purple, adaptive } +enum AccentColor { filc, blue, green, lime, yellow, orange, red, pink, purple, adaptive, custom } Map accentColorMap = { AccentColor.filc: const Color(0xff20AC9B), @@ -13,4 +13,5 @@ Map accentColorMap = { AccentColor.pink: Colors.pink.shade300, AccentColor.purple: Colors.purple.shade300, AccentColor.adaptive: const Color(0xff20AC9B), + AccentColor.custom: const Color(0xff20AC9B), }; diff --git a/filcnaplo/lib/theme/theme.dart b/filcnaplo/lib/theme/theme.dart index 9c5cf0b..9e52e17 100644 --- a/filcnaplo/lib/theme/theme.dart +++ b/filcnaplo/lib/theme/theme.dart @@ -22,8 +22,10 @@ class AppTheme { // Light Theme static ThemeData lightTheme(BuildContext context, {CorePalette? palette}) { var lightColors = AppColors.fromBrightness(Brightness.light); - AccentColor accentColor = Provider.of(context, listen: false).accentColor; - Color accent = accentColorMap[accentColor] ?? const Color(0x00000000); + final settings = Provider.of(context, listen: false); + AccentColor accentColor = settings.accentColor; + final customAccentColor = accentColor == AccentColor.custom ? settings.customAccentColor : null; + Color accent = customAccentColor ?? accentColorMap[accentColor] ?? const Color(0x00000000); if (accentColor == AccentColor.adaptive) { if (palette != null) accent = _paletteAccentLight(palette)!; @@ -31,31 +33,35 @@ class AppTheme { palette = null; } + Color backgroundColor = + accentColor == AccentColor.custom ? settings.customBackgroundColor : _paletteBackgroundLight(palette) ?? lightColors.background; + Color highlighColor = + accentColor == AccentColor.custom ? settings.customHighlightColor : _paletteHighlightLight(palette) ?? lightColors.highlight; + return ThemeData( brightness: Brightness.light, useMaterial3: false, fontFamily: _fontFamily, - scaffoldBackgroundColor: _paletteBackgroundLight(palette) ?? lightColors.background, - backgroundColor: _paletteHighlightLight(palette) ?? lightColors.highlight, + scaffoldBackgroundColor: backgroundColor, + backgroundColor: highlighColor, primaryColor: lightColors.filc, dividerColor: const Color(0x00000000), colorScheme: ColorScheme.fromSwatch( accentColor: accent, - backgroundColor: _paletteBackgroundLight(palette) ?? lightColors.background, + backgroundColor: backgroundColor, brightness: Brightness.light, - cardColor: _paletteHighlightLight(palette) ?? lightColors.highlight, + cardColor: highlighColor, errorColor: lightColors.red, primaryColorDark: lightColors.filc, - primarySwatch: Colors.teal, ), - shadowColor: lightColors.shadow, - appBarTheme: AppBarTheme(backgroundColor: _paletteBackgroundLight(palette) ?? lightColors.background), + shadowColor: highlighColor.withOpacity(.5), //lightColors.shadow, + appBarTheme: AppBarTheme(backgroundColor: backgroundColor), indicatorColor: accent, iconTheme: IconThemeData(color: lightColors.text.withOpacity(.75)), navigationBarTheme: NavigationBarThemeData( indicatorColor: accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8), iconTheme: MaterialStateProperty.all(IconThemeData(color: lightColors.text)), - backgroundColor: _paletteHighlightLight(palette) ?? lightColors.highlight, + backgroundColor: highlighColor, labelTextStyle: MaterialStateProperty.all(TextStyle( fontSize: 13.0, fontWeight: FontWeight.w500, @@ -75,8 +81,10 @@ class AppTheme { // Dark Theme static ThemeData darkTheme(BuildContext context, {CorePalette? palette}) { var darkColors = AppColors.fromBrightness(Brightness.dark); - AccentColor accentColor = Provider.of(context, listen: false).accentColor; - Color accent = accentColorMap[accentColor] ?? const Color(0x00000000); + final settings = Provider.of(context, listen: false); + AccentColor accentColor = settings.accentColor; + final customAccentColor = accentColor == AccentColor.custom ? settings.customAccentColor : null; + Color accent = customAccentColor ?? accentColorMap[accentColor] ?? const Color(0x00000000); if (accentColor == AccentColor.adaptive) { if (palette != null) accent = _paletteAccentDark(palette)!; @@ -84,31 +92,34 @@ class AppTheme { palette = null; } + Color backgroundColor = + accentColor == AccentColor.custom ? settings.customBackgroundColor : _paletteBackgroundDark(palette) ?? darkColors.background; + Color highlightColor = accentColor == AccentColor.custom ? settings.customHighlightColor : _paletteHighlightDark(palette) ?? darkColors.highlight; + return ThemeData( brightness: Brightness.dark, useMaterial3: false, fontFamily: _fontFamily, - scaffoldBackgroundColor: _paletteBackgroundDark(palette) ?? darkColors.background, - backgroundColor: _paletteHighlightDark(palette) ?? darkColors.highlight, + scaffoldBackgroundColor: backgroundColor, + backgroundColor: highlightColor, primaryColor: darkColors.filc, dividerColor: const Color(0x00000000), colorScheme: ColorScheme.fromSwatch( accentColor: accent, - backgroundColor: _paletteBackgroundDark(palette) ?? darkColors.background, + backgroundColor: backgroundColor, brightness: Brightness.dark, - cardColor: _paletteHighlightDark(palette) ?? darkColors.highlight, + cardColor: highlightColor, errorColor: darkColors.red, primaryColorDark: darkColors.filc, - primarySwatch: Colors.teal, ), - shadowColor: darkColors.shadow, - appBarTheme: AppBarTheme(backgroundColor: _paletteBackgroundDark(palette) ?? darkColors.background), + shadowColor: highlightColor.withOpacity(.5), //darkColors.shadow, + appBarTheme: AppBarTheme(backgroundColor: backgroundColor), indicatorColor: accent, iconTheme: IconThemeData(color: darkColors.text.withOpacity(.75)), navigationBarTheme: NavigationBarThemeData( indicatorColor: accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8), iconTheme: MaterialStateProperty.all(IconThemeData(color: darkColors.text)), - backgroundColor: _paletteHighlightDark(palette) ?? darkColors.highlight, + backgroundColor: highlightColor, labelTextStyle: MaterialStateProperty.all(TextStyle( fontSize: 13.0, fontWeight: FontWeight.w500, diff --git a/filcnaplo/lib/ui/filter/widgets.dart b/filcnaplo/lib/ui/filter/widgets.dart index 2077a51..6e44e97 100644 --- a/filcnaplo/lib/ui/filter/widgets.dart +++ b/filcnaplo/lib/ui/filter/widgets.dart @@ -1,6 +1,5 @@ import 'package:filcnaplo/api/providers/update_provider.dart'; import 'package:filcnaplo/models/settings.dart'; -import 'package:filcnaplo/theme/colors/colors.dart'; import 'package:filcnaplo/ui/date_widget.dart'; import 'package:filcnaplo/ui/filter/widgets/grades.dart' as grade_filter; import 'package:filcnaplo/ui/filter/widgets/certifications.dart' as certification_filter; @@ -149,17 +148,17 @@ Widget filterItemBuilder(BuildContext context, Animation animation, Widg child: DecoratedBox( decoration: BoxDecoration( boxShadow: [ - if (Theme.of(context).brightness == Brightness.light) - BoxShadow( - offset: const Offset(0, 21), - blurRadius: 23.0, - color: AppColors.of(context).shadow.withOpacity( - CurvedAnimation( - parent: CurvedAnimation(parent: animation, curve: Curves.easeInOutCubic), - curve: const Interval(2 / 3, 1.0), - ).value, - ), - ), + BoxShadow( + offset: const Offset(0, 21), + blurRadius: 23.0, + color: Theme.of(context).shadowColor.withOpacity( + Theme.of(context).shadowColor.opacity * + CurvedAnimation( + parent: CurvedAnimation(parent: animation, curve: Curves.easeInOutCubic), + curve: const Interval(2 / 3, 1.0), + ).value, + ), + ), ], ), child: child,