Theming

Overview

The Keyboard SDK allows you to configure the appearance of the keyboard by changing colors, font, background, and more, for different parts of the keyboard.

To modify the keyboard’s appearance, you can utilize the StyleConfiguration class. It provides the means to modify different key elements:

  1. ThemesHelper: It holds all the different colors, background that you might want to change.
  2. Spacebar logo: You can modify this element to include a spacebar logo and define the position.
  3. UserFont: Configure the font that you might want to the keyboard.

There are other important configurations which might be retrieved directly from the StyleConfiguration.

Themes

Default Theme

When you install the Keyboard SDK the default theme resembles the appearance of the standard Android keyboard. This default theme is available for both light and dark mode and it is selected automatically by the system:


Virtual keyboard light mode Virtual keyboard dark mode

If you want to use the default theme, just call the SystemThemes.lightTheme . For example:

override fun createConfiguration() =
    KeyboardConfiguration(
        style = StyleConfiguration(
            forceTheme = SystemThemes.lightTheme,
            forceDarkTheme = SystemThemes.darkTheme
        )
    )

The specific values of the KeyboardTheme for the default LightTheme:

    KeyboardTheme(
        background = Color.rgb(232, 234, 237),
        keyLetters = Color.rgb(0, 0, 0),
        keyBackground = Color.rgb(255, 255, 255),
        keyShadow = Color.rgb(169, 171, 173),
        buttonLetters = Color.rgb(61, 61, 63),
        buttonBackground = Color.rgb(204, 206, 213),
        buttonBackgroundPressed = Color.rgb(189, 193, 198),
        hoverLetters = Color.rgb(0, 0, 0),
        hoverBackground = Color.rgb(204, 206, 213),
        hoverSelectedLetters = Color.rgb(255, 255, 255),
        hoverSelectedBackground = Color.rgb(94, 151, 246),
        buttonActionLetters = Color.rgb(255, 255, 255),
        buttonActionBackground = Color.rgb(26, 115, 232),
        buttonActionBackgroundPressed = Color.rgb(6, 81, 166),
        spacebarLetters = Color.rgb(0, 0, 0),
        spacebarBackground = Color.rgb(204, 206, 213),
        trackPadCursor = Color.rgb(26, 115, 232),
        extras = ThemeExtras(lookFeelSystem = true)
    )

The values of the KeyboardTheme for the default DarkTheme:

    KeyboardTheme(
        background = Color.rgb(41, 46, 51),
        keyLetters = Color.rgb(255, 255, 255),
        keyBackground = Color.rgb(72, 76, 79),
        keyShadow = Color.rgb(30, 34, 37),
        buttonLetters = Color.rgb(195, 197, 198),
        buttonBackground = Color.rgb(55, 60, 65),
        buttonBackgroundPressed = Color.rgb(40, 45, 50),
        hoverLetters = Color.rgb(255, 255, 255),
        hoverBackground = Color.rgb(55, 60, 65),
        hoverSelectedLetters = Color.rgb(255, 255, 255),
        hoverSelectedBackground = Color.rgb(94, 151, 246),
        buttonActionLetters = Color.rgb(255, 255, 255),
        buttonActionBackground = Color.rgb(94, 151, 246),
        buttonActionBackgroundPressed = Color.rgb(54, 111, 206),
        spacebarLetters = Color.rgb(255, 255, 255),
        spacebarBackground = Color.rgb(55, 60, 65),
        trackPadCursor = Color.rgb(94, 151, 246),
        extras = ThemeExtras(lookFeelSystem = true)
    )

Custom Theme

If you want to modify the by default theme, just create your own KeyboardTheme and configure the SytleConfiguration with this new theme.

The main configurations include:

  • Key background color, Key font color
  • Background color, background image
  • Suggestions background color, higlighted color and selected color.
  • Action keys colors, font color
  • Font

If something needs to be added or if you find an error in our documentation, please let us know either on our GitHub or Discord.

Last updated on June 21, 2023