fw/apps/system_apps/settings: add accent colors

[EladDv]

Added an accent color settings module for both apps screen and the settings app

tested on silk (just doesn't show up and uses the defaults), snowy and spalding in QEMU

for it to be expanded in the future for other apps will probably need a rewrite (unclear how dark/light/default modes will integrate into this too, might be able to squeeze it in this structure)

[EladDv]

Themes settings menu in settings:

Themes settings menu:

Default option:

Show all colors:

Showing potential accent:

Same with settings menu accent color:

Results:

[jplexer]

you shouldnt be able to set colors that text isnt readable on imho.

[EladDv]

you shouldnt be able to set colors that text isnt readable on imho.

Which colors are you thinking about?
Changing it is super easy - just take them out of the list of colors in the settings_themes.h file (unless you want to separate the 2 lists but then it's just duplicating them and changing a few variables)

personally I think user freedom is always a plus (especially on a more "enthusiast" platform like this)

[jplexer]

i.e. looks like black text is not readable on imperial purple
you dont have to remove colors, just make the text readable on them (i.e. on darker colors change text color to white and vice versa)!

[EladDv]

i.e. looks like black text is not readable on imperial purple you dont have to remove colors, just make the text readable on them (i.e. on darker colors change text color to white and vice versa)!

sure that can be done but then you're in a whole dark/light mode situation and that's for a future PR , would a better preview display be better? would let the user see it before (so the text in the menu will be black in that case, and the bg in the settings portion will be black)

[jplexer]

yeah I guess that would make sense!

[EladDv]

The first one looks kinda jank... IDK if I 100% like it but at least for a start (I dont want to mess so much with the layers)

[jplexer]

well you dont have to change the entire background, just the text color 😁

[EladDv]

yeah but for the settings screen it's much more informative since it is black so you want to know if there's contrast there too
also removed black from the quick options and moved it to the end of the "all options" replace it with pink

[insertwittyusername]

Revisiting this, I talked with AmberW in the Discord server and got an explicit list from them of 10 colors to implement that all pass relative luminance and contrast checks for both the black-text-on-white-background "Apps" menu and the white-text-on-black-background "Settings" menu. This list should probably be the entire list, as basically the rest of the colors don't pass the proper contrast ratio check for accessibility/visibility. I think the best thing would be to consolidate the Accent Color setting to be just the name of the color pair (so "Red" would have the darker red shade for the settings menu and the lighter red shade for the apps menu).

Here are the colors, using the official Pebble names. The format is as follows: the first color name is the name to be used for any sort of light theming, the second name is the name to be used for any sort of dark theming, and the third name is the "normal" name that should be presented to the user.

• SunsetOrange - DarkCandyAppleRed - "Red"
• ChromeYellow - WindsorTan - "Orange"
• Yellow - ArmyGreen - "Yellow"
• Green - DarkGreen - "Green"
• Cyan - MidnightGreen - "Cyan"
• VividCerulean - CobaltBlue - "Light Blue (Default)"
• VeryLightBlue - DukeBlue - "Royal Blue"
• LavenderIndigo - Indigo - "Purple"
• Magenta - Purple - "Magenta"
• BrilliantRose - JazzberryJam - "Pink"

What do you guys think? This would probably be way, way better for UX, as we could just have this singular list of accent colors, and then a toggle for Default/Light/Dark theme sometime down the road.

Here's a photo of those colors btw:

Again, all credit goes to AmberW for putting in the work to check each of the 64 colors to find the ones with appropriate contrast.

[EladDv]

BTW still left in the different menus for apps screen and settings screens
Settings is annoying since the settings screen itself is dark but sub-menus are white so the whole contrast thing is weird, we can change those to black too or just have "dark" and "light" but then it's a change to current defaults

[jplexer]

1. Watch crashes when you try to go into "Settings Accents" after a color is set in there
2. I feel like the "Themes" entry should not be under "system"

[insertwittyusername]

2. I feel like the "Themes" entry should not be under "system"

Maybe it should be right below "Display"? What do we think about that?

So then Settings is:

• Bluetooth
• Notifications
• Vibrations
• Quiet Time
• Timeline
• Quick Launch
• Date & Time
• Display
• Themes
• Background App
• System

Or maybe have it be a sub category in "Display"? That might make the "Display" menu too cluttered though.

[EladDv]

Ok yeah all those git shenanigans reverted me back to a bad version, now should be fixed
I also had dark and light accidentally reversed and moved also moved the menu item to just below display

[jplexer]

codewise looks good, just one nitpick :)

[ericmigi]

Thanks for the PR @EladDv! Along with similar PRs that we've merged, I want to make sure that you're okay with this being merged as a temporary test feature - we may remove it from the Core Devices fork of PebbleOS at any time.

Here's the reasoning:

• We haven't finished working on our settings system, and it's possible that we may move a lot of this type of configuration from the watch settings to the phone settings.
• We may implement our own theming in the future, and if so, we'd remove this.
• There is a possibility for this causing problems with other parts of the operating system, and we may remove this if it does.
• This proves to be an additional burden on our customer support because of people making bad decisions, and we'll remove it.

Sounds good?

[EladDv]

of course 😄 and I'll be glad to continue contributing when and where possible