Styling
KeyboardKit lets you style your keyboards to great extent.
🎨While native iOS keyboards provide very little ways of customizing the look and feel of the keyboard, KeyboardKit-based keyboards can be styled and customized to great extent.
KeyboardKit uses KeyboardStyle
types to style its views. For instance, an KeyboardStyle.InputCallout
style can be used to style a Callouts.InputCallout
view.
KeyboardKit will bind a StandardKeyboardStyleProvider
instance to the controller services
when the keyboard is loaded. You can modify or replace this provider at any time.
KeyboardKit Pro unlocks a powerful theme engine and a bunch of themes. More information about Pro features can be found at the end of this article.
Terminology
KeyboardKit uses different names for different ways to style keyboards.
- A
KeyboardStyle
style is static and can be applied to certain views. - A
KeyboardStyleProvider
is a dynamic style provider that provides context-based styles. - A
KeyboardTheme
(Pro) is a static style provider that can define, reuse and share styles.
You can mix and match these different concepts as you see fit.
Resources & Assets
KeyboardKit comes with colors and assets that can be used to create native-looking keyboards.
Image
has a bunch of keyboard-specific images, e.g..keyboardBackspace
.Color
has a bunch of keyboard-specific colors, e.g..standardButtonBackground
.KeyboardAction
and other types have standard images, texts and colors.
Styling namespace
KeyboardKit has a Styling
namespace with styling-related types and a KeyboardStyle
namespace with keyboard styles like Button
, Callout
and EmojiKeyboard
.
All styles can be modified, including most standard values. For instance, here we apply a red background to the standard KeyboardStyle/Callout
style:
var style = KeyboardStyle.Callout.standard
style.backgroundColor = .red
KeyboardStyle.Callout.standard = style
Most styles have a .standard
style that you can use as a template. The standard styles can also be overwritten with a custom style to change the global default style of that component.
Style providers
A KeyboardStyleProvider
can return dynamic styles for different parts of the keyboard. Unlike static styles, style providers can vary styles depending on the KeyboardContext
, KeyboardAction
etc.
KeyboardKit will bind a StandardKeyboardStyleProvider
instance to the controller services
when the keyboard is loaded. You can modify or replace this provider at any time.
How to create a custom style provider
You can create a custom style provider by inheriting StandardKeyboardStyleProvider
and customize the parts you want, or implement the KeyboardStyleProvider
protocol from scratch.
👑 Pro features
KeyboardKit Pro unlocks a theme engine that makes it a lot easier to define styles for a keyboard.
Themes
A KeyboardTheme
can be used to define a bunch of styles, such as button and background styles. You can also use other themes as templates to create your own custom themes.
KeyboardKit comes with many pre-defined themes:
KeyboardTheme.standard
KeyboardTheme.swifty
KeyboardTheme.minimal
KeyboardTheme.candyShop
KeyboardTheme.colorful
KeyboardTheme.neon
KeyboardTheme.tron
All pre-defined themes come with style variations that allow you to tweak parts of a theme:
KeyboardTheme.standard(.pink)
KeyboardTheme.swifty(.blue)
KeyboardTheme.minimal(.midnight)
KeyboardTheme.candyShop(.cottonCandy)
KeyboardTheme.colorful(.purple)
KeyboardTheme.neon(.night)
KeyboardTheme.tron(.sark)
You can access all pre-defined themes with KeyboardTheme.allPredefined
. All pre-defined style variations also have an allPredefined
property, e.g. KeyboardTheme.SwiftyStyle.allPredefined
.
You can create custom themes and style variations. See the online documentation for examples.
Theme-based styling
Once you have a theme that you want to use, you can use the ThemeBasedKeyboardStyleProvider
. You can inherit it to customize this theme-based provider even further.
Previews
KeyboardKit Pro unlocks powerful tools to preview themes:
SystemKeyboardThemePreview(...) // A live theme preview.
SystemKeyboardThemePreviewHeader(...) // A live theme preview header.
To preview many themes at once, you can use this more lightweight preview:
SystemKeyboardButtonThemePreview(...) // A system button preview for a theme.
This will only render a set of buttons, without any build-in interactions.
Documentation
The information on this page is shortened to be easier to overview. For more information about this feature, code samples, etc., please see the online documentation.