Keyman Web how to change the color schema

[DanaStefanoska]

I’m using Keyman in Angular project, works great, but I would like to change the color schema to be in our app’s colors, can you tell me a way to change the colors?

[Marc]

The KeymanWeb UI is all controlled by CSS. The easiest way to work on the colour scheme is to use the web inspector on the on screen keyboard.

One trick: in Chrome, you can use a debug setting in the web inspector to stop the On Screen Keyboard from disappearing:

1. Open the Rendering tab (Ctrl+Shift+P, Show Rendering, or from the menu as shown below):
   

   

2. In the Rendering tab, enable the option ‘Emulate a focused page’:
   

   

Then you can use the web inspector to look at parts of the KeymanWeb on screen keyboard and tweak the CSS as much as you like. Copy the tweaked results into your own stylesheet.

Hint: use a class on the body element to easily override KeymanWeb’s default styles:

body.my-class .desktop .kmw-key { color: blue; }

You can even tweak the mobile keyboard themes using Chrome’s device emulation.

With this approach, you don’t need to make any changes to KeymanWeb itself. The CSS rules may change in future versions of Keyman, but it should be a quick job to adjust your customised styling in that situation.

(We do plan to make more accessible theming available in an upcoming release of Keyman.)

[DanaStefanoska]

Thank you Marc! This is indeed very helpful, and theming will be very good feature to have.
At the current moment, I’ve downloaded the plugin and added it to my project locally. After that I tweaked the css directly into the keyman css, and also updated the icons with my own icons so they are following app’s theme. Once I downloaded and looked through all of the css and could inspect it easier, it was easy then to update the colors. My bigger problem was that I couldn’t change the icons for language and keyboard as they are images, I’ve created my own and changed them as resources but you can think about a way to style them through css (if they are svg’s) when you create a feature for theming Keyman.

Thanks again for the quick response and for the thorough way of explaining this. I hope our thread will be helpful to anyone looking how to style keyman.

[Marc]

You’re welcome! We’ll keep in mind the need to style icons etc (we’d like to do those with a colour font potentially in the future, to reduce the number of resources required)