thunder-app · hjiangsu · Sep 7, 2023 · Sep 5, 2023 · Sep 7, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@
 - Star indicator for saved posts now prefixes the post title so that it's consistent with the indicators for locked posts and featured community posts - contribution from @ajsosa
 - Improved ability to refresh posts - contribution from @micahmo
 - Improve the option selector dialog to show the currently selected item - contribution from @micahmo
+- Show swatches and live previews for accent color selection - contribution from @micahmo
 - Use Android system back button to navigate from Saved to History on profile page - contribution from @micahmo
 
 ### Fixed

diff --git a/lib/core/enums/custom_theme_type.dart b/lib/core/enums/custom_theme_type.dart
@@ -3,63 +3,102 @@ import 'dart:ui';
 import 'package:flex_color_scheme/flex_color_scheme.dart';
 
 enum CustomThemeType {
-  material(label: 'Material', color: FlexColor.materialLightPrimary),
-  materialHc(label: 'Material High Contrast', color: FlexColor.materialLightPrimaryHc),
-  blue(label: 'Blue', color: FlexColor.blueLightPrimary),
-  indigo(label: 'Indigo', color: FlexColor.indigoLightPrimary),
-  hippieBlue(label: 'Hippie Blue', color: FlexColor.hippieBlueLightPrimary),
-  aquaBlue(label: 'Aqua Blue', color: FlexColor.aquaBlueLightPrimary),
-  brandBlue(label: 'Brand Blue', color: FlexColor.brandBlueLightPrimary),
-  deepBlue(label: 'Deep Blue', color: FlexColor.deepBlueLightPrimary),
-  sakura(label: 'Sakura', color: FlexColor.sakuraLightPrimary),
-  mandyRed(label: 'Mandy Red', color: FlexColor.mandyRedLightPrimary),
-  red(label: 'Red', color: FlexColor.redLightPrimary),
-  redWine(label: 'Red Wine', color: FlexColor.redWineLightPrimary),
-  purpleBrown(label: 'Purple Brown', color: FlexColor.purpleBrownLightPrimary),
-  green(label: 'Green', color: FlexColor.greenLightPrimary),
-  money(label: 'Money', color: FlexColor.moneyLightPrimary),
-  jungle(label: 'Jungle', color: FlexColor.jungleLightPrimary),
-  greyLaw(label: 'Grey Law', color: FlexColor.greyLawLightPrimary),
-  wasabi(label: 'Wasabi', color: FlexColor.wasabiLightPrimary),
-  gold(label: 'Gold', color: FlexColor.goldLightPrimary),
-  mango(label: 'Mango', color: FlexColor.mangoLightPrimary),
-  amber(label: 'Amber', color: FlexColor.amberLightPrimary),
-  vesuviusBurn(label: 'Vesuvius Burn', color: FlexColor.vesuviusBurnLightPrimary),
-  deepPurple(label: 'Deep Purple', color: FlexColor.deepPurpleLightPrimary),
-  ebonyClay(label: 'Ebony Clay', color: FlexColor.ebonyClayLightPrimary),
-  barossa(label: 'Barossa', color: FlexColor.barossaLightPrimary),
-  shark(label: 'Shark', color: FlexColor.sharkLightPrimary),
-  bigStone(label: 'Big Stone', color: FlexColor.bigStoneLightPrimary),
-  damask(label: 'Damask', color: FlexColor.damaskLightPrimary),
-  bahamaBlue(label: 'Bahama Blue', color: FlexColor.bahamaBlueLightPrimary),
-  mallardGreen(label: 'Mallard Green', color: FlexColor.mallardGreenLightPrimary),
-  espresso(label: 'Espresso', color: FlexColor.espressoLightPrimary),
-  outerSpace(label: 'Outer Space', color: FlexColor.outerSpaceLightPrimary),
-  blueWhale(label: 'Blue Whale', color: FlexColor.blueWhaleLightPrimary),
-  sanJuanBlue(label: 'San Juan Blue', color: FlexColor.sanJuanBlueLightPrimary),
-  rosewood(label: 'Rosewood', color: FlexColor.rosewoodLightPrimary),
-  blumineBlue(label: 'Blumine Blue', color: FlexColor.blumineBlueLightPrimary),
-  materialBaseline(label: 'Material Baseline', color: FlexColor.materialBaselineLightPrimary),
-  verdunHemlock(label: 'Verdun Hemlock', color: FlexColor.verdunHemlockLightPrimary),
-  dellGenoa(label: 'Dell Genoa', color: FlexColor.dellGenoaGreenLightPrimary),
-  redM3(label: 'Red', color: FlexColor.redM3LightPrimary),
-  pinkM3(label: 'Pink', color: FlexColor.pinkM3LightPrimary),
-  purpleM3(label: 'Purple', color: FlexColor.purpleM3LightPrimary),
-  indigoM3(label: 'Indigo', color: FlexColor.indigoM3LightPrimary),
-  blueM3(label: 'Blue', color: FlexColor.blueM3LightPrimary),
-  cyanM3(label: 'Cyan', color: FlexColor.cyanM3LightPrimary),
-  tealM3(label: 'Teal', color: FlexColor.tealM3LightPrimary),
-  greenM3(label: 'Green', color: FlexColor.greenM3LightPrimary),
-  limeM3(label: 'Lime', color: FlexColor.limeM3LightPrimary),
-  yellowM3(label: 'Yellow', color: FlexColor.yellowM3LightPrimary),
-  orangeM3(label: 'Orange', color: FlexColor.orangeM3LightPrimary),
-  deepOrangeM3(label: 'Deep Orange', color: FlexColor.deepOrangeM3LightPrimary);
+  material(label: 'Material', primaryColor: FlexColor.materialLightPrimary, secondaryColor: FlexColor.materialLightPrimaryContainer, tertiaryColor: FlexColor.materialLightSecondaryContainer),
+  materialHc(
+      label: 'Material High Contrast',
+      primaryColor: FlexColor.materialLightPrimaryHc,
+      secondaryColor: FlexColor.materialLightPrimaryContainerHc,
+      tertiaryColor: FlexColor.materialLightSecondaryContainerHc),
+  blue(label: 'Blue', primaryColor: FlexColor.blueLightPrimary, secondaryColor: FlexColor.blueLightPrimaryContainer, tertiaryColor: FlexColor.blueLightSecondaryContainer),
+  indigo(label: 'Indigo', primaryColor: FlexColor.indigoLightPrimary, secondaryColor: FlexColor.indigoLightPrimaryContainer, tertiaryColor: FlexColor.indigoLightSecondaryContainer),
+  hippieBlue(
+      label: 'Hippie Blue', primaryColor: FlexColor.hippieBlueLightPrimary, secondaryColor: FlexColor.hippieBlueLightPrimaryContainer, tertiaryColor: FlexColor.hippieBlueLightSecondaryContainer),
+  aquaBlue(label: 'Aqua Blue', primaryColor: FlexColor.aquaBlueLightPrimary, secondaryColor: FlexColor.aquaBlueLightPrimaryContainer, tertiaryColor: FlexColor.aquaBlueLightSecondaryContainer),
+  brandBlue(label: 'Brand Blue', primaryColor: FlexColor.brandBlueLightPrimary, secondaryColor: FlexColor.brandBlueLightPrimaryContainer, tertiaryColor: FlexColor.brandBlueLightSecondaryContainer),
+  deepBlue(label: 'Deep Blue', primaryColor: FlexColor.deepBlueLightPrimary, secondaryColor: FlexColor.deepBlueLightPrimaryContainer, tertiaryColor: FlexColor.deepBlueLightSecondaryContainer),
+  sakura(label: 'Sakura', primaryColor: FlexColor.sakuraLightPrimary, secondaryColor: FlexColor.sakuraLightPrimaryContainer, tertiaryColor: FlexColor.sakuraLightSecondaryContainer),
+  mandyRed(label: 'Mandy Red', primaryColor: FlexColor.mandyRedLightPrimary, secondaryColor: FlexColor.mandyRedLightPrimaryContainer, tertiaryColor: FlexColor.mandyRedLightSecondaryContainer),
+  red(label: 'Red', primaryColor: FlexColor.redLightPrimary, secondaryColor: FlexColor.redLightPrimaryContainer, tertiaryColor: FlexColor.redLightSecondaryContainer),
+  redWine(label: 'Red Wine', primaryColor: FlexColor.redWineLightPrimary, secondaryColor: FlexColor.redWineLightPrimaryContainer, tertiaryColor: FlexColor.redWineLightSecondaryContainer),
+  purpleBrown(
+      label: 'Purple Brown', primaryColor: FlexColor.purpleBrownLightPrimary, secondaryColor: FlexColor.purpleBrownLightPrimaryContainer, tertiaryColor: FlexColor.purpleBrownLightSecondaryContainer),
+  green(label: 'Green', primaryColor: FlexColor.greenLightPrimary, secondaryColor: FlexColor.greenLightPrimaryContainer, tertiaryColor: FlexColor.greenLightSecondaryContainer),
+  money(label: 'Money', primaryColor: FlexColor.moneyLightPrimary, secondaryColor: FlexColor.moneyLightPrimaryContainer, tertiaryColor: FlexColor.moneyLightSecondaryContainer),
+  jungle(label: 'Jungle', primaryColor: FlexColor.jungleLightPrimary, secondaryColor: FlexColor.jungleLightPrimaryContainer, tertiaryColor: FlexColor.jungleLightSecondaryContainer),
+  greyLaw(label: 'Grey Law', primaryColor: FlexColor.greyLawLightPrimary, secondaryColor: FlexColor.greyLawLightPrimaryContainer, tertiaryColor: FlexColor.greyLawLightSecondaryContainer),
+  wasabi(label: 'Wasabi', primaryColor: FlexColor.wasabiLightPrimary, secondaryColor: FlexColor.wasabiLightPrimaryContainer, tertiaryColor: FlexColor.wasabiLightSecondaryContainer),
+  gold(label: 'Gold', primaryColor: FlexColor.goldLightPrimary, secondaryColor: FlexColor.goldLightPrimaryContainer, tertiaryColor: FlexColor.goldLightSecondaryContainer),
+  mango(label: 'Mango', primaryColor: FlexColor.mangoLightPrimary, secondaryColor: FlexColor.mangoLightPrimaryContainer, tertiaryColor: FlexColor.mangoLightSecondaryContainer),
+  amber(label: 'Amber', primaryColor: FlexColor.amberLightPrimary, secondaryColor: FlexColor.amberLightPrimaryContainer, tertiaryColor: FlexColor.amberLightSecondaryContainer),
+  vesuviusBurn(
+      label: 'Vesuvius Burn',
+      primaryColor: FlexColor.vesuviusBurnLightPrimary,
+      secondaryColor: FlexColor.vesuviusBurnLightPrimaryContainer,
+      tertiaryColor: FlexColor.vesuviusBurnLightSecondaryContainer),
+  deepPurple(
+      label: 'Deep Purple', primaryColor: FlexColor.deepPurpleLightPrimary, secondaryColor: FlexColor.deepPurpleLightPrimaryContainer, tertiaryColor: FlexColor.deepPurpleLightSecondaryContainer),
+  ebonyClay(label: 'Ebony Clay', primaryColor: FlexColor.ebonyClayLightPrimary, secondaryColor: FlexColor.ebonyClayLightPrimaryContainer, tertiaryColor: FlexColor.ebonyClayLightSecondaryContainer),
+  barossa(label: 'Barossa', primaryColor: FlexColor.barossaLightPrimary, secondaryColor: FlexColor.barossaLightPrimaryContainer, tertiaryColor: FlexColor.barossaLightSecondaryContainer),
+  shark(label: 'Shark', primaryColor: FlexColor.sharkLightPrimary, secondaryColor: FlexColor.sharkLightPrimaryContainer, tertiaryColor: FlexColor.sharkLightSecondaryContainer),
+  bigStone(label: 'Big Stone', primaryColor: FlexColor.bigStoneLightPrimary, secondaryColor: FlexColor.bigStoneLightPrimaryContainer, tertiaryColor: FlexColor.bigStoneLightSecondaryContainer),
+  damask(label: 'Damask', primaryColor: FlexColor.damaskLightPrimary, secondaryColor: FlexColor.damaskLightPrimaryContainer, tertiaryColor: FlexColor.damaskLightSecondaryContainer),
+  bahamaBlue(
+      label: 'Bahama Blue', primaryColor: FlexColor.bahamaBlueLightPrimary, secondaryColor: FlexColor.bahamaBlueLightPrimaryContainer, tertiaryColor: FlexColor.bahamaBlueLightSecondaryContainer),
+  mallardGreen(
+      label: 'Mallard Green',
+      primaryColor: FlexColor.mallardGreenLightPrimary,
+      secondaryColor: FlexColor.mallardGreenLightPrimaryContainer,
+      tertiaryColor: FlexColor.mallardGreenLightSecondaryContainer),
+  espresso(label: 'Espresso', primaryColor: FlexColor.espressoLightPrimary, secondaryColor: FlexColor.espressoLightPrimaryContainer, tertiaryColor: FlexColor.espressoLightSecondaryContainer),
+  outerSpace(
+      label: 'Outer Space', primaryColor: FlexColor.outerSpaceLightPrimary, secondaryColor: FlexColor.outerSpaceLightPrimaryContainer, tertiaryColor: FlexColor.outerSpaceLightSecondaryContainer),
+  blueWhale(label: 'Blue Whale', primaryColor: FlexColor.blueWhaleLightPrimary, secondaryColor: FlexColor.blueWhaleLightPrimaryContainer, tertiaryColor: FlexColor.blueWhaleLightSecondaryContainer),
+  sanJuanBlue(
+      label: 'San Juan Blue', primaryColor: FlexColor.sanJuanBlueLightPrimary, secondaryColor: FlexColor.sanJuanBlueLightPrimaryContainer, tertiaryColor: FlexColor.sanJuanBlueLightSecondaryContainer),
+  rosewood(label: 'Rosewood', primaryColor: FlexColor.rosewoodLightPrimary, secondaryColor: FlexColor.rosewoodLightPrimaryContainer, tertiaryColor: FlexColor.rosewoodLightSecondaryContainer),
+  blumineBlue(
+      label: 'Blumine Blue', primaryColor: FlexColor.blumineBlueLightPrimary, secondaryColor: FlexColor.blumineBlueLightPrimaryContainer, tertiaryColor: FlexColor.blumineBlueLightSecondaryContainer),
+  materialBaseline(
+      label: 'Material Baseline',
+      primaryColor: FlexColor.materialBaselineLightPrimary,
+      secondaryColor: FlexColor.materialBaselineLightPrimaryContainer,
+      tertiaryColor: FlexColor.materialBaselineLightSecondaryContainer),
+  verdunHemlock(
+      label: 'Verdun Hemlock',
+      primaryColor: FlexColor.verdunHemlockLightPrimary,
+      secondaryColor: FlexColor.verdunHemlockLightPrimaryContainer,
+      tertiaryColor: FlexColor.verdunHemlockLightSecondaryContainer),
+  dellGenoa(
+      label: 'Dell Genoa',
+      primaryColor: FlexColor.dellGenoaGreenLightPrimary,
+      secondaryColor: FlexColor.dellGenoaGreenLightPrimaryContainer,
+      tertiaryColor: FlexColor.dellGenoaGreenLightSecondaryContainer),
+  redM3(label: 'Red', primaryColor: FlexColor.redM3LightPrimary, secondaryColor: FlexColor.redM3LightPrimaryContainer, tertiaryColor: FlexColor.redM3LightSecondaryContainer),
+  pinkM3(label: 'Pink', primaryColor: FlexColor.pinkM3LightPrimary, secondaryColor: FlexColor.pinkM3LightPrimaryContainer, tertiaryColor: FlexColor.pinkM3LightSecondaryContainer),
+  purpleM3(label: 'Purple', primaryColor: FlexColor.purpleM3LightPrimary, secondaryColor: FlexColor.purpleM3LightPrimaryContainer, tertiaryColor: FlexColor.purpleM3LightSecondaryContainer),
+  indigoM3(label: 'Indigo', primaryColor: FlexColor.indigoM3LightPrimary, secondaryColor: FlexColor.indigoM3LightPrimaryContainer, tertiaryColor: FlexColor.indigoM3LightSecondaryContainer),
+  blueM3(label: 'Blue', primaryColor: FlexColor.blueM3LightPrimary, secondaryColor: FlexColor.blueM3LightPrimaryContainer, tertiaryColor: FlexColor.blueM3LightSecondaryContainer),
+  cyanM3(label: 'Cyan', primaryColor: FlexColor.cyanM3LightPrimary, secondaryColor: FlexColor.cyanM3LightPrimaryContainer, tertiaryColor: FlexColor.cyanM3LightSecondaryContainer),
+  tealM3(label: 'Teal', primaryColor: FlexColor.tealM3LightPrimary, secondaryColor: FlexColor.tealM3LightPrimaryContainer, tertiaryColor: FlexColor.tealM3LightSecondaryContainer),
+  greenM3(label: 'Green', primaryColor: FlexColor.greenM3LightPrimary, secondaryColor: FlexColor.greenM3LightPrimaryContainer, tertiaryColor: FlexColor.greenM3LightSecondaryContainer),
+  limeM3(label: 'Lime', primaryColor: FlexColor.limeM3LightPrimary, secondaryColor: FlexColor.limeM3LightPrimaryContainer, tertiaryColor: FlexColor.limeM3LightSecondaryContainer),
+  yellowM3(label: 'Yellow', primaryColor: FlexColor.yellowM3LightPrimary, secondaryColor: FlexColor.yellowM3LightPrimaryContainer, tertiaryColor: FlexColor.yellowM3LightSecondaryContainer),
+  orangeM3(label: 'Orange', primaryColor: FlexColor.orangeM3LightPrimary, secondaryColor: FlexColor.orangeM3LightPrimaryContainer, tertiaryColor: FlexColor.orangeM3LightSecondaryContainer),
+  deepOrangeM3(
+      label: 'Deep Orange',
+      primaryColor: FlexColor.deepOrangeM3LightPrimary,
+      secondaryColor: FlexColor.deepOrangeM3LightPrimaryContainer,
+      tertiaryColor: FlexColor.deepOrangeM3LightSecondaryContainer);
 
   const CustomThemeType({
     required this.label,
-    required this.color,
+    required this.primaryColor,
+    required this.secondaryColor,
+    required this.tertiaryColor,
   });
 
   final String label;
-  final Color color;
+  final Color primaryColor;
+  final Color secondaryColor;
+  final Color tertiaryColor;
 }
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -1,4 +1,5 @@
 {
+  "save": "Save",
   "posts": "Posts",
   "saved": "Saved",
   "overview": "Overview",

diff --git a/lib/l10n/app_es.arb b/lib/l10n/app_es.arb
@@ -1,4 +1,5 @@
 {
+  "save": "Save",
   "posts": "Posts",
   "saved": "Saved",
   "overview": "Overview",

diff --git a/lib/l10n/app_fi.arb b/lib/l10n/app_fi.arb
@@ -1,4 +1,5 @@
 {
+  "save": "Save",
   "posts": "Posts",
   "saved": "Saved",
   "overview": "Overview",

diff --git a/lib/l10n/app_pl.arb b/lib/l10n/app_pl.arb
@@ -1,4 +1,5 @@
 {
+  "save": "Save",
   "posts": "Posts",
   "saved": "Saved",
   "overview": "Overview",

diff --git a/lib/l10n/app_sv.arb b/lib/l10n/app_sv.arb
@@ -1,4 +1,5 @@
 {
+  "save": "Save",
   "posts": "Posts",
   "saved": "Saved",
   "overview": "Overview",

diff --git a/lib/settings/pages/theme_settings_page.dart b/lib/settings/pages/theme_settings_page.dart
@@ -34,9 +34,12 @@ class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
   // @TODO: Make this into our own custom enum list and extend this functionality to allow for more themes
 
   List<ListPickerItem> customThemeOptions = [
-    ListPickerItem(color: CustomThemeType.deepBlue.color, label: '${CustomThemeType.deepBlue.label} (Default)', payload: CustomThemeType.deepBlue),
+    ListPickerItem(
+        colors: [CustomThemeType.deepBlue.primaryColor, CustomThemeType.deepBlue.secondaryColor, CustomThemeType.deepBlue.tertiaryColor],
+        label: '${CustomThemeType.deepBlue.label} (Default)',
+        payload: CustomThemeType.deepBlue),
     ...CustomThemeType.values.where((element) => element != CustomThemeType.deepBlue).map((CustomThemeType scheme) {
-      return ListPickerItem(color: scheme.color, label: scheme.label, payload: scheme);
+      return ListPickerItem(colors: [scheme.primaryColor, scheme.secondaryColor, scheme.tertiaryColor], label: scheme.label, payload: scheme);
     }).toList()
   ];
 
@@ -172,11 +175,52 @@ class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
                             icon: Icons.wallpaper_rounded,
                             onChanged: (value) => setPreferences(LocalSettings.appTheme, value.payload.index)),
                         ListOption(
-                            description: LocalSettings.appThemeAccentColor.label,
-                            value: ListPickerItem(label: selectedTheme.label, icon: Icons.wallpaper_rounded, payload: selectedTheme),
-                            options: customThemeOptions,
-                            icon: Icons.wallpaper_rounded,
-                            onChanged: (value) => setPreferences(LocalSettings.appThemeAccentColor, value.payload)),
+                          description: LocalSettings.appThemeAccentColor.label,
+                          value: ListPickerItem(label: selectedTheme.label, icon: Icons.wallpaper_rounded, payload: selectedTheme),
+                          valueDisplay: Stack(
+                            children: [
+                              Container(
+                                height: 28,
+                                width: 28,
+                                decoration: BoxDecoration(
+                                  color: selectedTheme.primaryColor,
+                                  borderRadius: BorderRadius.circular(100),
+                                ),
+                              ),
+                              Positioned(
+                                bottom: 0,
+                                child: Container(
+                                  height: 14,
+                                  width: 14,
+                                  decoration: BoxDecoration(
+                                    color: selectedTheme.secondaryColor,
+                                    borderRadius: const BorderRadius.only(
+                                      bottomLeft: Radius.circular(100),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              Positioned(
+                                bottom: 0,
+                                right: 0,
+                                child: Container(
+                                  height: 14,
+                                  width: 14,
+                                  decoration: BoxDecoration(
+                                    color: selectedTheme.tertiaryColor,
+                                    borderRadius: const BorderRadius.only(
+                                      bottomRight: Radius.circular(100),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ),
+                          options: customThemeOptions,
+                          icon: Icons.wallpaper_rounded,
+                          onChanged: (value) => setPreferences(LocalSettings.appThemeAccentColor, value.payload),
+                          closeOnSelect: false,
+                        ),
                         if (Platform.isAndroid) ...[
                           ToggleOption(
                             description: LocalSettings.useMaterialYouTheme.label,