[#231] [NF] BrandBook and Custom Theme. Enable switch

lyskouski · Sep 16, 2023 · 614f923 · 614f923
1 parent bc0b03f
commit 614f923
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 26 deletions.
diff --git a/lib/_classes/herald/app_palette.dart b/lib/_classes/herald/app_palette.dart
@@ -0,0 +1,20 @@
+// Copyright 2023 The terCAD team. All rights reserved.
+// Use of this source code is governed by a CC BY-NC-ND 4.0 license that can be found in the LICENSE file.
+
+import 'package:app_finance/_classes/storage/app_preferences.dart';
+import 'package:app_finance/_configs/custom_color_scheme.dart';
+import 'package:flutter/material.dart';
+
+class AppPalette extends ValueNotifier<String> {
+  static get state => AppPreferences.get(AppPreferences.prefColor) ?? AppColors.colorApp;
+
+  AppPalette() : super(state);
+
+  Future<void> setMode(String newValue) async {
+    if (newValue != value) {
+      value = newValue;
+      await AppPreferences.set(AppPreferences.prefColor, value);
+      notifyListeners();
+    }
+  }
+}
diff --git a/lib/_classes/storage/app_preferences.dart b/lib/_classes/storage/app_preferences.dart
@@ -15,6 +15,7 @@ class AppPreferences {
   static const String prefPeer = 'p2p_host';
   static const String prefP2P = 'p2p_spot';
   static const String prefZoom = 'zoom';
+  static const String prefColor = 'color';
 
   static late SharedPreferences pref;
 

diff --git a/lib/_configs/custom_color_scheme.dart b/lib/_configs/custom_color_scheme.dart
@@ -1,8 +1,15 @@
+// Copyright 2023 The terCAD team. All rights reserved.
+// Use of this source code is governed by a CC BY-NC-ND 4.0 license that can be found in the LICENSE file.
+
 import 'package:flutter/material.dart';
 
 class AppColors {
   late AppDefaultColors palette;
 
+  static const String colorApp = '0';
+  static const String colorSystem = '1';
+  static const String colorUser = '2';
+
   AppColors(Brightness brightness) {
     if (brightness == Brightness.dark) {
       palette = AppDarkColors();
@@ -15,8 +22,8 @@ class AppColors {
 class AppDefaultColors {
   Color get primary => const Color(0xff912391);
   Color get inversePrimary => const Color(0xffdca3bc);
-  Color get onButton => Colors.white;
-  Color get button => Colors.grey.withOpacity(0.7);
+  Color get onSecondary => Colors.white;
+  Color get onSecondaryContainer => Colors.grey.withOpacity(0.7);
   Color get secondary => Colors.black;
 }
 
@@ -26,27 +33,28 @@ class AppDarkColors implements AppDefaultColors {
   @override
   Color get inversePrimary => const Color(0xff5d233c);
   @override
-  Color get onButton => Colors.grey;
+  Color get onSecondary => Colors.grey;
   @override
-  Color get button => Colors.grey;
+  Color get onSecondaryContainer => Colors.grey;
   @override
   Color get secondary => Colors.grey;
 }
 
 extension CustomColorScheme on ColorScheme {
-  Color get fieldBackground => inversePrimary.withOpacity(0.2);
-
-  Color get onButton => AppColors(brightness).palette.onButton;
+  Color get fieldBackground => inversePrimary.withOpacity(0.3);
 
-  Color get button => AppColors(brightness).palette.button;
-
-  ColorScheme withCustom() {
+  ColorScheme withCustom(String paletteType) {
+    if (paletteType == AppColors.colorSystem) {
+      return this;
+    }
     final palette = AppColors(brightness).palette;
     return copyWith(
       primary: palette.primary,
       onPrimary: palette.secondary,
       inversePrimary: palette.inversePrimary,
       secondary: palette.secondary,
+      onSecondary: palette.onSecondary,
+      onSecondaryContainer: palette.onSecondaryContainer,
       onSurface: palette.secondary,
       onInverseSurface: Colors.white,
       onSurfaceVariant: palette.secondary,
@@ -55,11 +63,14 @@ extension CustomColorScheme on ColorScheme {
 }
 
 extension CustomButtonTheme on FloatingActionButtonThemeData {
-  FloatingActionButtonThemeData withCustom(Brightness brightness) {
+  FloatingActionButtonThemeData withCustom(String paletteType, Brightness brightness) {
+    if (paletteType == AppColors.colorSystem) {
+      return this;
+    }
     final palette = AppColors(brightness).palette;
     return copyWith(
       backgroundColor: palette.inversePrimary,
-      foregroundColor: palette.onButton,
+      foregroundColor: palette.onSecondary,
     );
   }
 }
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -62,7 +62,11 @@
     "closedAt": "Finished till Date",
     "collapse": "Collapse (Restore) Section",
     "color": "Color",
+    "colorApp": "Custom",
+    "colorSystem": "Default",
+    "colorTheme": "Palette",
     "colorTooltip": "Select a color",
+    "colorUser": "Personal",
     "columnMap": "Mapping for Column '{value}'",
     "@columnMap": {
         "value": {

diff --git a/lib/main.dart b/lib/main.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a CC BY-NC-ND 4.0 license that can be found in the LICENSE file.
 
 import 'package:app_finance/_classes/herald/app_locale.dart';
+import 'package:app_finance/_classes/herald/app_palette.dart';
 import 'package:app_finance/_classes/herald/app_sync.dart';
 import 'package:app_finance/_classes/herald/app_theme.dart';
 import 'package:app_finance/_classes/herald/app_zoom.dart';
@@ -80,6 +81,9 @@ void main() async {
         ChangeNotifierProvider<AppZoom>(
           create: (_) => AppZoom(),
         ),
+        ChangeNotifierProvider<AppPalette>(
+          create: (_) => AppPalette(),
+        ),
       ],
       child: MyApp(platform: platform),
     ),
@@ -146,21 +150,22 @@ class MyAppState extends State<MyApp> {
 
   @override
   Widget build(BuildContext context) {
+    final palette = context.watch<AppPalette>().value;
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       localizationsDelegates: AppLocalizations.localizationsDelegates,
       supportedLocales: AppLocalizations.supportedLocales,
       locale: context.watch<AppLocale>().value,
       theme: ThemeData(
-        colorScheme: const ColorScheme.light().withCustom(),
-        floatingActionButtonTheme: const FloatingActionButtonThemeData().withCustom(Brightness.light),
+        colorScheme: const ColorScheme.light().withCustom(palette),
+        floatingActionButtonTheme: const FloatingActionButtonThemeData().withCustom(palette, Brightness.light),
         brightness: Brightness.light,
         textTheme: CustomTextTheme.textTheme(Theme.of(context)),
         useMaterial3: true,
       ),
       darkTheme: ThemeData(
-        colorScheme: const ColorScheme.dark().withCustom(),
-        floatingActionButtonTheme: const FloatingActionButtonThemeData().withCustom(Brightness.dark),
+        colorScheme: const ColorScheme.dark().withCustom(palette),
+        floatingActionButtonTheme: const FloatingActionButtonThemeData().withCustom(palette, Brightness.dark),
         brightness: Brightness.dark,
         textTheme: CustomTextTheme.textTheme(Theme.of(context)),
         useMaterial3: true,

diff --git a/lib/pages/start/widgets/setting_tab.dart b/lib/pages/start/widgets/setting_tab.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a CC BY-NC-ND 4.0 license that can be found in the LICENSE file.
 
 import 'package:app_finance/_classes/herald/app_locale.dart';
+import 'package:app_finance/_classes/herald/app_palette.dart';
 import 'package:app_finance/_classes/herald/app_theme.dart';
 import 'package:app_finance/_classes/herald/app_zoom.dart';
 import 'package:app_finance/_classes/structure/currency/currency_provider.dart';
@@ -32,10 +33,12 @@ class SettingTab extends AbstractTab {
 class SettingTabState<T extends SettingTab> extends AbstractTabState<T> {
   late AppTheme theme;
   late AppZoom zoom;
+  late AppPalette palette;
   Currency? currency;
   bool isEncrypted = false;
   bool hasEncrypted = false;
   String brightness = '0';
+  String colorMode = AppColors.colorApp;
 
   @override
   void initState() {
@@ -45,6 +48,7 @@ class SettingTabState<T extends SettingTab> extends AbstractTabState<T> {
     isEncrypted = doEncrypt == 'true' || doEncrypt == null;
     AppPreferences.set(AppPreferences.prefDoEncrypt, isEncrypted ? 'true' : 'false');
     brightness = AppPreferences.get(AppPreferences.prefTheme) ?? brightness;
+    colorMode = AppPreferences.get(AppPreferences.prefColor) ?? colorMode;
   }
 
   void saveEncryption(newValue) {
@@ -60,9 +64,14 @@ class SettingTabState<T extends SettingTab> extends AbstractTabState<T> {
     setState(() => currency = value);
   }
 
-  void saveTheme(String value) {
+  Future<void> saveTheme(String value) async {
+    await theme.setTheme(value);
     setState(() => brightness = value);
-    theme.setTheme(value);
+  }
+
+  Future<void> saveColor(String value) async {
+    await palette.setMode(value);
+    setState(() => colorMode = value);
   }
 
   Future<void> initCurrencyFromLocale(String locale) async {
@@ -83,6 +92,7 @@ class SettingTabState<T extends SettingTab> extends AbstractTabState<T> {
     String locale = Localizations.localeOf(context).toString();
     theme = Provider.of<AppTheme>(context, listen: false);
     zoom = Provider.of<AppZoom>(context, listen: false);
+    palette = Provider.of<AppPalette>(context, listen: false);
     final TextTheme textTheme = context.textTheme;
     double indent = ThemeHelper.getIndent(2);
     if (currency == null) {
@@ -139,6 +149,22 @@ class SettingTabState<T extends SettingTab> extends AbstractTabState<T> {
             indent: indent,
           ),
           ThemeHelper.hIndent2x,
+          Text(
+            AppLocale.labels.colorTheme,
+            style: textTheme.bodyLarge,
+          ),
+          ListSelector(
+            value: colorMode,
+            hintText: AppLocale.labels.brightnessTheme,
+            options: [
+              ListSelectorItem(id: AppColors.colorApp, name: AppLocale.labels.colorApp),
+              ListSelectorItem(id: AppColors.colorSystem, name: AppLocale.labels.colorSystem),
+              ListSelectorItem(id: AppColors.colorUser, name: AppLocale.labels.colorUser),
+            ],
+            setState: saveColor,
+            indent: indent,
+          ),
+          ThemeHelper.hIndent2x,
           Text(
             AppLocale.labels.zoomState,
             style: textTheme.bodyLarge,

diff --git a/lib/widgets/generic/base_header_widget.dart b/lib/widgets/generic/base_header_widget.dart
@@ -3,7 +3,6 @@
 
 import 'package:app_finance/_classes/herald/app_locale.dart';
 import 'package:app_finance/_classes/structure/navigation/app_menu.dart';
-import 'package:app_finance/_configs/custom_color_scheme.dart';
 import 'package:app_finance/_configs/custom_text_theme.dart';
 import 'package:app_finance/_configs/theme_helper.dart';
 import 'package:app_finance/_ext/build_context_ext.dart';
@@ -73,14 +72,14 @@ class BaseHeaderWidget extends StatelessWidget {
               start: const Size(1, 0),
               end: const Size(2, 2),
               child: ToolbarButtonWidget(
-                borderColor: context.colorScheme.button.withOpacity(0.3),
+                borderColor: context.colorScheme.onSecondaryContainer.withOpacity(0.3),
                 offset: const Offset(-4, 0),
                 margin: const EdgeInsets.only(left: 4),
                 child: IconButton(
                   hoverColor: Colors.transparent,
                   icon: Icon(
                     Icons.stacked_bar_chart,
-                    color: context.colorScheme.button,
+                    color: context.colorScheme.onSecondaryContainer,
                   ),
                   tooltip: AppLocale.labels.metricsTooltip,
                   onPressed: () => nav.pushNamed(AppMenu.metrics(route)),
@@ -92,14 +91,14 @@ class BaseHeaderWidget extends StatelessWidget {
                 start: const Size(2, 0),
                 end: const Size(3, 2),
                 child: ToolbarButtonWidget(
-                  borderColor: context.colorScheme.button.withOpacity(0.3),
+                  borderColor: context.colorScheme.onSecondaryContainer.withOpacity(0.3),
                   offset: const Offset(-4, 0),
                   margin: const EdgeInsets.only(left: 4),
                   child: IconButton(
                     hoverColor: Colors.transparent,
                     selectedIcon: Icon(
                       Icons.expand,
-                      color: context.colorScheme.button,
+                      color: context.colorScheme.onSecondaryContainer,
                     ),
                     icon: Icon(
                       Icons.expand_less,

diff --git a/lib/widgets/wrapper/full_sized_button_widget.dart b/lib/widgets/wrapper/full_sized_button_widget.dart
@@ -3,7 +3,6 @@
 
 import 'package:adaptive_breakpoints/adaptive_breakpoints.dart';
 import 'package:app_finance/_classes/controller/focus_controller.dart';
-import 'package:app_finance/_configs/custom_color_scheme.dart';
 import 'package:app_finance/_configs/responsive_matrix.dart';
 import 'package:app_finance/_configs/theme_helper.dart';
 import 'package:app_finance/_ext/build_context_ext.dart';
@@ -50,13 +49,13 @@ class FullSizedButtonWidget extends AbstractInput {
               icon,
               semanticLabel: title,
               size: 32,
-              color: colorScheme.onButton.withOpacity(0.8),
+              color: colorScheme.onSecondary.withOpacity(0.8),
             ),
             if (!isKeyboardVisible)
               Container(
                 padding: EdgeInsets.only(left: ThemeHelper.getIndent()),
                 constraints: BoxConstraints(maxWidth: width - 34),
-                child: TextWrapper(title, style: context.textTheme.bodyLarge?.copyWith(color: colorScheme.onButton)),
+                child: TextWrapper(title, style: context.textTheme.bodyLarge?.copyWith(color: colorScheme.onSecondary)),
               ),
           ],
         ),