custom theme

This commit is contained in:
55nknown 2022-11-20 11:55:34 +01:00
parent 3619a7a4a7
commit ac18cf62c3
5 changed files with 73 additions and 35 deletions

View File

@ -10,7 +10,7 @@ import 'package:sqflite_common_ffi/sqflite_ffi.dart';
const settingsDB = DatabaseStruct("settings", { const settingsDB = DatabaseStruct("settings", {
"language": String, "start_page": int, "rounding": int, "theme": int, "accent_color": int, "news": int, "news_state": int, "developer_mode": int, "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 "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, "vibration_strength": int, "ab_weeks": int, "swap_ab_weeks": int,
"notifications": int, "notifications_bitfield": int, "notification_poll_interval": int, // notifications "notifications": int, "notifications_bitfield": int, "notification_poll_interval": int, // notifications

View File

@ -58,6 +58,9 @@ class SettingsProvider extends ChangeNotifier {
int _bellDelay; int _bellDelay;
bool _gradeOpeningFun; bool _gradeOpeningFun;
IconPack _iconPack; IconPack _iconPack;
Color _customAccentColor;
Color _customBackgroundColor;
Color _customHighlightColor;
SettingsProvider({ SettingsProvider({
required String language, required String language,
@ -85,6 +88,9 @@ class SettingsProvider extends ChangeNotifier {
required int bellDelay, required int bellDelay,
required bool gradeOpeningFun, required bool gradeOpeningFun,
required IconPack iconPack, required IconPack iconPack,
required Color customAccentColor,
required Color customBackgroundColor,
required Color customHighlightColor,
}) : _language = language, }) : _language = language,
_startPage = startPage, _startPage = startPage,
_rounding = rounding, _rounding = rounding,
@ -109,7 +115,10 @@ class SettingsProvider extends ChangeNotifier {
_bellDelayEnabled = bellDelayEnabled, _bellDelayEnabled = bellDelayEnabled,
_bellDelay = bellDelay, _bellDelay = bellDelay,
_gradeOpeningFun = gradeOpeningFun, _gradeOpeningFun = gradeOpeningFun,
_iconPack = iconPack; _iconPack = iconPack,
_customAccentColor = customAccentColor,
_customBackgroundColor = customBackgroundColor,
_customHighlightColor = customHighlightColor;
factory SettingsProvider.fromMap(Map map) { factory SettingsProvider.fromMap(Map map) {
Map<String, Object?>? configMap; Map<String, Object?>? configMap;
@ -152,6 +161,9 @@ class SettingsProvider extends ChangeNotifier {
bellDelay: map["bell_delay"], bellDelay: map["bell_delay"],
gradeOpeningFun: map["grade_opening_fun"] == 1, gradeOpeningFun: map["grade_opening_fun"] == 1,
iconPack: Map.fromEntries(IconPack.values.map((e) => MapEntry(e.name, e)))[map["icon_pack"]]!, 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, "bell_delay": _bellDelay,
"grade_opening_fun": _gradeOpeningFun ? 1 : 0, "grade_opening_fun": _gradeOpeningFun ? 1 : 0,
"icon_pack": _iconPack.name, "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, bellDelay: 0,
gradeOpeningFun: true, gradeOpeningFun: true,
iconPack: IconPack.cupertino, 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; int get bellDelay => _bellDelay;
bool get gradeOpeningFun => _gradeOpeningFun; bool get gradeOpeningFun => _gradeOpeningFun;
IconPack get iconPack => _iconPack; IconPack get iconPack => _iconPack;
Color? get customAccentColor => _customAccentColor == accentColorMap[AccentColor.custom] ? null : _customAccentColor;
Color? get customBackgroundColor => _customBackgroundColor;
Color? get customHighlightColor => _customHighlightColor;
Future<void> update( Future<void> update(
BuildContext context, { BuildContext context, {
@ -280,6 +301,9 @@ class SettingsProvider extends ChangeNotifier {
int? bellDelay, int? bellDelay,
bool? gradeOpeningFun, bool? gradeOpeningFun,
IconPack? iconPack, IconPack? iconPack,
Color? customAccentColor,
Color? customBackgroundColor,
Color? customHighlightColor,
}) async { }) async {
if (language != null && language != _language) _language = language; if (language != null && language != _language) _language = language;
if (startPage != null && startPage != _startPage) _startPage = startPage; if (startPage != null && startPage != _startPage) _startPage = startPage;
@ -308,6 +332,9 @@ class SettingsProvider extends ChangeNotifier {
if (bellDelayEnabled != null && bellDelayEnabled != _bellDelayEnabled) _bellDelayEnabled = bellDelayEnabled; if (bellDelayEnabled != null && bellDelayEnabled != _bellDelayEnabled) _bellDelayEnabled = bellDelayEnabled;
if (gradeOpeningFun != null && gradeOpeningFun != _gradeOpeningFun) _gradeOpeningFun = gradeOpeningFun; if (gradeOpeningFun != null && gradeOpeningFun != _gradeOpeningFun) _gradeOpeningFun = gradeOpeningFun;
if (iconPack != null && iconPack != _iconPack) _iconPack = iconPack; 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<DatabaseProvider>(context, listen: false); database ??= Provider.of<DatabaseProvider>(context, listen: false);
if (store) await database.store.storeSettings(this); if (store) await database.store.storeSettings(this);

View File

@ -1,6 +1,6 @@
import 'package:flutter/material.dart'; 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<AccentColor, Color> accentColorMap = { Map<AccentColor, Color> accentColorMap = {
AccentColor.filc: const Color(0xff20AC9B), AccentColor.filc: const Color(0xff20AC9B),
@ -13,4 +13,5 @@ Map<AccentColor, Color> accentColorMap = {
AccentColor.pink: Colors.pink.shade300, AccentColor.pink: Colors.pink.shade300,
AccentColor.purple: Colors.purple.shade300, AccentColor.purple: Colors.purple.shade300,
AccentColor.adaptive: const Color(0xff20AC9B), AccentColor.adaptive: const Color(0xff20AC9B),
AccentColor.custom: const Color(0xff20AC9B),
}; };

View File

@ -22,8 +22,10 @@ class AppTheme {
// Light Theme // Light Theme
static ThemeData lightTheme(BuildContext context, {CorePalette? palette}) { static ThemeData lightTheme(BuildContext context, {CorePalette? palette}) {
var lightColors = AppColors.fromBrightness(Brightness.light); var lightColors = AppColors.fromBrightness(Brightness.light);
AccentColor accentColor = Provider.of<SettingsProvider>(context, listen: false).accentColor; final settings = Provider.of<SettingsProvider>(context, listen: false);
Color accent = accentColorMap[accentColor] ?? const Color(0x00000000); 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 (accentColor == AccentColor.adaptive) {
if (palette != null) accent = _paletteAccentLight(palette)!; if (palette != null) accent = _paletteAccentLight(palette)!;
@ -31,31 +33,35 @@ class AppTheme {
palette = null; 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( return ThemeData(
brightness: Brightness.light, brightness: Brightness.light,
useMaterial3: false, useMaterial3: false,
fontFamily: _fontFamily, fontFamily: _fontFamily,
scaffoldBackgroundColor: _paletteBackgroundLight(palette) ?? lightColors.background, scaffoldBackgroundColor: backgroundColor,
backgroundColor: _paletteHighlightLight(palette) ?? lightColors.highlight, backgroundColor: highlighColor,
primaryColor: lightColors.filc, primaryColor: lightColors.filc,
dividerColor: const Color(0x00000000), dividerColor: const Color(0x00000000),
colorScheme: ColorScheme.fromSwatch( colorScheme: ColorScheme.fromSwatch(
accentColor: accent, accentColor: accent,
backgroundColor: _paletteBackgroundLight(palette) ?? lightColors.background, backgroundColor: backgroundColor,
brightness: Brightness.light, brightness: Brightness.light,
cardColor: _paletteHighlightLight(palette) ?? lightColors.highlight, cardColor: highlighColor,
errorColor: lightColors.red, errorColor: lightColors.red,
primaryColorDark: lightColors.filc, primaryColorDark: lightColors.filc,
primarySwatch: Colors.teal,
), ),
shadowColor: lightColors.shadow, shadowColor: highlighColor.withOpacity(.5), //lightColors.shadow,
appBarTheme: AppBarTheme(backgroundColor: _paletteBackgroundLight(palette) ?? lightColors.background), appBarTheme: AppBarTheme(backgroundColor: backgroundColor),
indicatorColor: accent, indicatorColor: accent,
iconTheme: IconThemeData(color: lightColors.text.withOpacity(.75)), iconTheme: IconThemeData(color: lightColors.text.withOpacity(.75)),
navigationBarTheme: NavigationBarThemeData( navigationBarTheme: NavigationBarThemeData(
indicatorColor: accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8), indicatorColor: accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8),
iconTheme: MaterialStateProperty.all(IconThemeData(color: lightColors.text)), iconTheme: MaterialStateProperty.all(IconThemeData(color: lightColors.text)),
backgroundColor: _paletteHighlightLight(palette) ?? lightColors.highlight, backgroundColor: highlighColor,
labelTextStyle: MaterialStateProperty.all(TextStyle( labelTextStyle: MaterialStateProperty.all(TextStyle(
fontSize: 13.0, fontSize: 13.0,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
@ -75,8 +81,10 @@ class AppTheme {
// Dark Theme // Dark Theme
static ThemeData darkTheme(BuildContext context, {CorePalette? palette}) { static ThemeData darkTheme(BuildContext context, {CorePalette? palette}) {
var darkColors = AppColors.fromBrightness(Brightness.dark); var darkColors = AppColors.fromBrightness(Brightness.dark);
AccentColor accentColor = Provider.of<SettingsProvider>(context, listen: false).accentColor; final settings = Provider.of<SettingsProvider>(context, listen: false);
Color accent = accentColorMap[accentColor] ?? const Color(0x00000000); 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 (accentColor == AccentColor.adaptive) {
if (palette != null) accent = _paletteAccentDark(palette)!; if (palette != null) accent = _paletteAccentDark(palette)!;
@ -84,31 +92,34 @@ class AppTheme {
palette = null; 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( return ThemeData(
brightness: Brightness.dark, brightness: Brightness.dark,
useMaterial3: false, useMaterial3: false,
fontFamily: _fontFamily, fontFamily: _fontFamily,
scaffoldBackgroundColor: _paletteBackgroundDark(palette) ?? darkColors.background, scaffoldBackgroundColor: backgroundColor,
backgroundColor: _paletteHighlightDark(palette) ?? darkColors.highlight, backgroundColor: highlightColor,
primaryColor: darkColors.filc, primaryColor: darkColors.filc,
dividerColor: const Color(0x00000000), dividerColor: const Color(0x00000000),
colorScheme: ColorScheme.fromSwatch( colorScheme: ColorScheme.fromSwatch(
accentColor: accent, accentColor: accent,
backgroundColor: _paletteBackgroundDark(palette) ?? darkColors.background, backgroundColor: backgroundColor,
brightness: Brightness.dark, brightness: Brightness.dark,
cardColor: _paletteHighlightDark(palette) ?? darkColors.highlight, cardColor: highlightColor,
errorColor: darkColors.red, errorColor: darkColors.red,
primaryColorDark: darkColors.filc, primaryColorDark: darkColors.filc,
primarySwatch: Colors.teal,
), ),
shadowColor: darkColors.shadow, shadowColor: highlightColor.withOpacity(.5), //darkColors.shadow,
appBarTheme: AppBarTheme(backgroundColor: _paletteBackgroundDark(palette) ?? darkColors.background), appBarTheme: AppBarTheme(backgroundColor: backgroundColor),
indicatorColor: accent, indicatorColor: accent,
iconTheme: IconThemeData(color: darkColors.text.withOpacity(.75)), iconTheme: IconThemeData(color: darkColors.text.withOpacity(.75)),
navigationBarTheme: NavigationBarThemeData( navigationBarTheme: NavigationBarThemeData(
indicatorColor: accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8), indicatorColor: accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8),
iconTheme: MaterialStateProperty.all(IconThemeData(color: darkColors.text)), iconTheme: MaterialStateProperty.all(IconThemeData(color: darkColors.text)),
backgroundColor: _paletteHighlightDark(palette) ?? darkColors.highlight, backgroundColor: highlightColor,
labelTextStyle: MaterialStateProperty.all(TextStyle( labelTextStyle: MaterialStateProperty.all(TextStyle(
fontSize: 13.0, fontSize: 13.0,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,

View File

@ -1,6 +1,5 @@
import 'package:filcnaplo/api/providers/update_provider.dart'; import 'package:filcnaplo/api/providers/update_provider.dart';
import 'package:filcnaplo/models/settings.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/date_widget.dart';
import 'package:filcnaplo/ui/filter/widgets/grades.dart' as grade_filter; import 'package:filcnaplo/ui/filter/widgets/grades.dart' as grade_filter;
import 'package:filcnaplo/ui/filter/widgets/certifications.dart' as certification_filter; import 'package:filcnaplo/ui/filter/widgets/certifications.dart' as certification_filter;
@ -149,11 +148,11 @@ Widget filterItemBuilder(BuildContext context, Animation<double> animation, Widg
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
boxShadow: [ boxShadow: [
if (Theme.of(context).brightness == Brightness.light)
BoxShadow( BoxShadow(
offset: const Offset(0, 21), offset: const Offset(0, 21),
blurRadius: 23.0, blurRadius: 23.0,
color: AppColors.of(context).shadow.withOpacity( color: Theme.of(context).shadowColor.withOpacity(
Theme.of(context).shadowColor.opacity *
CurvedAnimation( CurvedAnimation(
parent: CurvedAnimation(parent: animation, curve: Curves.easeInOutCubic), parent: CurvedAnimation(parent: animation, curve: Curves.easeInOutCubic),
curve: const Interval(2 / 3, 1.0), curve: const Interval(2 / 3, 1.0),