Appearance
Last updated
Last updated
You can customize the widget's appearance by setting your own custom theme or using our default dark
or light
mode themes. Specify the following properties in the config
object.
All colors should be given in their hex value.
Property | Type | Description |
---|---|---|
ThemeName
is an Enum with three values: Dark, Light, and System. To apply a theme, choose from the following:
For dark theme, use ThemeName.Dark
For light theme, use ThemeName.Light
For system theme, use ThemeName.System
If you mention below color specifically it will overwrite the default theme of widget.
The Colors
interface is used both in the main FKAppearance interface and in its dark
property. It contains the following properties:
Property | Type | Description |
---|---|---|
themeColor
string | undefined
The primary theme color for the UI.
textColor
string | undefined
The color used for text elements.
backgroundColor
string | undefined
The background color for the UI.
highlightColor
string | undefined
The color used for highlighted or emphasized elements.
borderColor
string | undefined
The color used for borders in the UI.
logoUrl
string | null
URL for the logo to be displayed. Can be null if no logo is used.
dark
Colors | undefined
An object containing color configurations for dark mode.
roundness
number | undefined
A value determining the roundness of UI elements (e.g., button corners).
theme
ThemeName
The name of the theme to be used.
themeColor
string | undefined
Primary theme color
textColor
string | undefined
Main text color
backgroundColor
string | undefined
Background color
highlightColor
string | undefined
Color for highlighted elements
borderColor
string | undefined
Border color of widget