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:
- ThemesHelper: It holds all the different colors, background that you might want to change.
- Spacebar logo: You can modify this element to include a spacebar logo and define the position.
- 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:
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