Chrysalis icon indicating copy to clipboard operation
Chrysalis copied to clipboard

App: Set a better secondary color

Open algernon opened this issue 1 year ago • 4 comments

Instead of setting a grey-ish color as the secondary, which makes it hard to distinguish components using it from disabled ones, use a non-grey color instead.

The colors were chosen using https://www.canva.com/colors/color-wheel/, using the primary color as the basis. I wanted to choose a secondary that does not clash with the various alert colors.

So for light mode, I chose a blue-ish/purple-ish, darker color, and for dark mode, a more cyan-ish. They both feel okay with the primary keyboardio-orange.

Fixes #1089.

Old

Screenshot from 2022-10-01 15-08-20 Screenshot from 2022-10-01 15-08-04

New

Screenshot from 2022-10-01 15-07-20 Screenshot from 2022-10-01 15-07-41

algernon avatar Oct 01 '22 13:10 algernon

Another option would be to use the same colors as for the Overview table highlight. I considered that, but that feels too close to the keyboardio-orange.

algernon avatar Oct 01 '22 13:10 algernon

The blues feel kind of garish to me. I'm happy to try to find alternate colors.

obra avatar Oct 01 '22 17:10 obra

I'd appreciate that, I'm bad at colors.

algernon avatar Oct 01 '22 17:10 algernon

I tried softening them up a bit:

        main: darkMode() ? "#ed91f3" : "#ab0edd",

which is a slightly darker purple in light mode and a kind of lilac in dark mode.

tlyu avatar Oct 02 '22 14:10 tlyu

Updated to use @tlyu's colors (thanks!), and merging as per @obra's ACK on Discord.

algernon avatar Oct 25 '22 04:10 algernon