Skip to content

Commit

Permalink
Merge pull request #708 from micahmo/feature/color-picker-improvements
Browse files Browse the repository at this point in the history 
Improve accent color picking
  • Loading branch information
@hjiangsu
hjiangsu committed Sep 7, 2023
2 parents 5161e5f + 7fc97c0 commit 0f84e3e
Show file tree
Hide file tree
Showing 11 changed files with 277 additions and 115 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
145 changes: 92 additions & 53 deletions lib/core/enums/custom_theme_type.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
1 change: 1 addition & 0 deletions lib/l10n/app_en.arb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"save": "Save",
"posts": "Posts",
"saved": "Saved",
"overview": "Overview",
Expand Down
1 change: 1 addition & 0 deletions lib/l10n/app_es.arb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"save": "Save",
"posts": "Posts",
"saved": "Saved",
"overview": "Overview",
Expand Down
1 change: 1 addition & 0 deletions lib/l10n/app_fi.arb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"save": "Save",
"posts": "Posts",
"saved": "Saved",
"overview": "Overview",
Expand Down
1 change: 1 addition & 0 deletions lib/l10n/app_pl.arb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"save": "Save",
"posts": "Posts",
"saved": "Saved",
"overview": "Overview",
Expand Down
1 change: 1 addition & 0 deletions lib/l10n/app_sv.arb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"save": "Save",
"posts": "Posts",
"saved": "Saved",
"overview": "Overview",
Expand Down
58 changes: 51 additions & 7 deletions lib/settings/pages/theme_settings_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
];

Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 0f84e3e

Please sign in to comment.