Colorized keymap zones

[alexchexes]

I wonder why the most popular touch-typing tool doesn't have any kind of keymap color guides, which are a must-have for beginners or near-beginners.

I've created a simple userscript for myself that generates CSS to color and highlight the keymap in one of three styles of your choice (here's the link).
Check out how it looks in these videos:

chrome_2024-09-30--00-13-11--846.mp4

chrome_2024-09-30--00-12-25--044.mp4

chrome_2024-09-30--00-20-29--919.mp4

I’d love to see this implemented as a standard feature.

A couple of notes:

1. The color choices are deliberate. Although other people might be used to differently colored keys in other tools (to address this, it would be useful to add the ability to customize colors in the settings), the current selection works well as mnemonic aids:

• Pink (lavender) for the pinky finger. This works for English speakers, but for others, pink may also stereotypically represent a "girly" color and might be associated with cute, small things. Stupid as it sounds, this mnemonic could work well.
• Gold (orange/yellow) for the ring finger, since rings are often gold. Works at least for Western culture.
• Red for the middle finger because you probably shouldn’t show your middle finger to people.
• The left and right index fingers are the brightest (lime and cyan, or green and blue), as these are the most convenient fingers to use. For many, green and blue are the most appealing colors, and they follow the order of RGB.

2. My solution is based on this Stylus style: https://userstyles.world/style/17547/monkeytype-keymap-color
   If my version is used, half the credit should go to the author of that style, as they saved me the time I would have spent matching class names with fingers.

[Miodec]

This won't really work because of themes. We cant have set colors that don't change with themes because they might blend it or become straight up invisible on some themes.

[alexchexes]

@Miodec It’s possible to create a basic colored-keymap style where the letters remain visible on any theme, and then allow theme creators to update their themes with new colors that override it. Here's an example I tested on 15 different themes—ranging from very dark to very light or with saturated background colors.

Of course, this kind of "basic" color style wouldn’t be the most beautiful, but it works. If theme creators want to, they can adjust the colors to better fit their theme. Anyway, it would likely be a disabled feature by default.