Skip to main content
Version: Next

Kabelwerk Theme

The <KabelwerkTheme> context sets the base styles of wrapped Kabelwerk components.

Using the <KabelwerkTheme> context is optional — the defaults are more or less sensible. On the other hand, you may want to have multiple theme context providers, e.g. if you want different base styles for different chat rooms.

The <KabelwerkTheme> context does not depend on the Kabelwerk context and vice versa. The wrapping order does not matter and you can dynamically update the theme without affecting the websocket connection and loaded content (e.g. if your app enables the user to switch between light and dark mode).

Example

<KabelwerkTheme
fontFamily="DMSans"
fontSizeBase={14}
fontSizeSmall={10}
fontSizeLarge={18}
backgroundColor="transparent"
surfaceColor="white"
accentColor="paleturquoise"
onBackgroundColor="black"
onSurfaceColor="black"
onAccentColor="black"
spacingBase={8}
>
{/* chat screens */}
</KabelwerkTheme>

Props

fontFamily

The font family of text in Kabelwerk components. The default value is the system's default font family.

fontSizeBase

The base font size of text in Kabelwerk components, e.g. for the text of chat messages. The default value is 14.

fontSizeSmall

The font size for smaller text, e.g. for the time of posting the message in the bottom right corner of chat message components. The default value is 10.

fontSizeLarge

The font size for larger text, e.g. for the text input where users write their messages. The default value is 18.

backgroundColor

The colour of the background behind scrollable content, e.g. the background colour of a chat room behind the chat message components. The default value is transparent, i.e. the system's default background colour.

surfaceColor

The background colour of most components, e.g. the background colour of a chat message component or an inbox item component. The default value is white.

accentColor

The background colour of highlighted components, e.g. the background colour of the status bar component. The default value is Kabelwerk's brand colour.

onBackgroundColor

The colour of text displayed on background colour, e.g. the colour of the date string displayed between chat messages posted on different dates in a chat room. The default value is the system's default text colour.

onSurfaceColor

The colour of text displayed on surface colour, e.g. the colour of the text of a chat message or the colour of the text in a text input for posting messages. The default value is the system's default text colour.

onAccentColor

The colour of text displayed on accent colour, e.g. the colour of the status bar's text. The default value is the system's default text colour.

spacingBase

The base spacing used for margins and paddings, e.g. the padding of a chat message. The default value is 8.

See also