How do I modify the appearance of my keyboard?

Hi there,

How do I modify the appearance of my keyboard? Particularly, the roundedness of the keys and the colors in general.

I see that gff_amharic has an outstanding, beautiful keyboard:

I understand that this is controlled by CSS. If given a file path I can locate it and edit it in Notepad++. I have a little bit of experience with CSS and what I lack I can compensate for by googling.

I did find this post:

I also like how he uses gradients:


However I feel that post is quite specific to the needs of that particular keyboard, and a bit hard to follow for others.

Is there any chance someone could write some general instructions on how to modify the colors of the different types of keys, the keyboard background, the background of keys shown when longpressing, and how to increase or decrease the roundedness of the keys? Perhaps, also, how to modify the colors, font, and font size of the letters and symbols on the keys?

Thanks so much!

1 Like

I think your first screenshot uses gff_amharic.css that goes with this line in the kmn file

You can PM @dyacob (gff_amharic) or @Matthew_Lee (cameroon_azerty) about their CSS adventures.

As of now, OSK theming is on the Keyman roadmap for 19.0

Thanks so much Darcy! I hadn’t thought to check the road map. Cool to hear that color customization is coming! Good idea on reaching out to the developers too.

Just a caveat: some of these ideas relate to general theming and should not really be changed per-keyboard – for example I would not encourage changes to keyboard background, longpress background, or stylistic changes such as key shape at this time. Treat the space within the keycap as the playground for your keyboard – colour and font.

As we work on a more generalised theming approach in v19, we may have to deprecate the existing model in keyboards and update keyboards which have customised CSS in order to allow custom global themes to integrate well with keyboard-specific tweaks.

Good points! If I customize now I may be signing myself up for trouble in future versions. Thank you Marc!

1 Like