Appearance

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.

FKAppearance Interface

All colors should be given in their hex value.

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.

ThemeName

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

Colors Interface

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	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

Example

  const config: FKConfig = {
    appName: "Aarc Stage",
    // remaning config...
    appearance: {
      themeColor: "#2D2D2D",
      textColor: "#2D2D2D",
      backgroundColor: "#FFF",
      highlightColor: "#F0F0F0",
      borderColor: "#2D2D2D",
      dark: {
        themeColor: "#FFF", 
        textColor: "#FFF", 
        backgroundColor: "#2D2D2D", 
        highlightColor: "#2D2D2D", 
        borderColor: "#2D2D2D",
      },
      roundness: 42,
      theme: ThemeName.Light // if using theme no need to mention custom colors
    },
    // remaining config...
  };