Shift with dark bg loses active state visbility if accent color is dark

[tepozoa]

HeliBoard is working great, thank you! Please tag this issue as an extreme low priority UI enhancement request

---

Is your feature request related to a problem? Please describe.

I am converting from Gboard and mimicking the dark color layout I've used for years in order to ease the transition; it used to be some sort of dark default in a previous version of Android which I've never changed.

1. Per the screenshots, when activating the shift key it uses the defined accent color which ends up getting lost (dark on dark) visually; for comparison, the Gboard icon is different and uses a non-filled / filled approach instead to alleviate this issue.
2. The "brightness" of the text on the function keys is less than the defined key color text; based on my color picker the text is ffffff and Gboard visually decreases that to bfbfbf on it's own. This is really a silly nitpick but since I'm creating an issue for the primary shift key problem, why not.

HeliBoard 2.1 / Android 14 / Pixel 6a

Gboard / Android 14 / Pixel 6a

Describe the solution you'd like

1. Possibly the only solution here is to convert the ^ key into a triangle △ outline such that it can be non-filled / filled instead of inheriting the accent color for it's shifted state. Given the user can create any color scheme the use of the accent color as the fill will end up not working in all use cases.
2. Possible easy solution: use the Key Hint Color for these keys instead? it appears to be dedede from Gboard and I've defined in HeliBoard. This might not work for everyone though so is a questionable solution and really doesn't matter too awful much in the grand scheme of things.

Use case

On a physical device where everything is much smaller than the screenshots, the dark-on-dark UI when in shifted state is rather unreadable. The function key brightness is just a "nice to have' QoL upgrade.

Describe alternatives you've considered (if any)

I've considered adopting a dog from the animal shelter. :)

[devycarol]

Ah, good 'ole simplified-icon problems.

This is by no means a solution for the material theme, but do try out the holo style and see if you like it. That one has a more legible shift icon. Definitely not for everyone though with its more 'retro' look 😅

It probably makes more sense to change the button color rather than the icon one, at least when key borders are enabled.

Or like you say, just make the shift key like the gboard one. Using the simple arrow for shift (literally "keyboard arrow up" in the material icon library) has the look of a Material 1.0 design mistake that no one had the humility to fix until after the OpenBoard fork was created 😛

it appears to be dedede from Gboard and I've defined in HeliBoard.

;)

[tepozoa]

This is by no means a solution for the material theme, but do try out the holo style and see if you like it. That one has a more legible shift icon. Definitely not for everyone though with its more 'retro' look 😅

Alas, while the shift key looks quite fine, the rest of the keys don't respect/use the defined key background color. It appears to my eye that all keys use the function key background color including the return / enter key lower right not using the accent color. Not saying it's bad, just not as intended with the defined color scheme.

The key hint color is respected so it has that going for it which is nice.

It probably makes more sense to change the button color rather than the icon one, at least when key borders are enabled.

Now that you've had me look, if we used the Holo them shift icon in Material and Rounded themes it would be a step in the right direction, it's big and thick so is much more legible than ^ on a small device screen.

[Uranusek]

Have you looked at the "show all colors" option? There you can customize all the colors and match them as you wish. You can easily adjust the color of the Shift icon to make it visible.

[tepozoa]

Have you looked at the "show all colors" option? There you can customize all the colors and match them as you wish. You can easily adjust the color of the Shift icon to make it visible.

Yes, I was trying to avoid this as it's rather... buggy (not complaining just describing). Besides all colors being random on load (so it doesn't inherit the basic or advanced setup as a starting point making it gruesome to start designing with), when you edit an item like SHIFT_KEY_ICON and then re-edit it, it's sometimes reset back to default random. But only sometimes, not all the time and I've not figured out the pattern which works (how to avoid the buggy re-edit). Given that I'm only really looking to fix one minor color problem with one key action in this Github issue, it's unwelcome to deal with in it's current state.

(and let's be honest, there are 36 randomly chosen colors in there to configure on initial load, I don't have the patience for it when using basic or advanced color choices works for 99.9% of my needs)

[Uranusek]

It took me about two minutes to create something similar ¯_(ツ)_/¯

Just copy existing hex codes and paste them there. Some will be repeated, e.g. these colors use the accent color you have defined:

ACTION_KEY_BACKGROUND
ACTION _KEY_POPUPS_KEYS_BACKGROUND
CLIPBOARD_PIN
EMOJI_CATEGORY_SELECTED
GESTURE_TRAIL
TOOLBAR_KEY_ENABLED_BACKGROUND