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.

PropertyTypeDescription
themeColorstring | undefinedThe primary theme color for the UI (e.g., '#2D2D2D').
textColorstring | undefinedThe color used for text elements (e.g., '#2D2D2D').
backgroundColorstring | undefinedThe widget’s background color (e.g., '#ffffff').
highlightColorstring | undefinedThe color used for highlighted elements (e.g., '#F0F0F0').
borderColorstring | undefinedThe color used for borders in the UI (e.g., '#2D2D2D').
logoUrlstring | nullURL for the logo to be displayed (e.g., 'https://example.com/logo.png').
darkColors | undefinedAn object containing color configurations for dark mode (e.g., { themeColor: '#FFF' }).
roundnessnumber | undefinedThe border radius for UI components (e.g., 42).
themeThemeNameThe name of the theme to be used (e.g., ThemeName.Light).

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

PropertyTypeDescription
themeColorstring | undefinedThe primary theme color for the UI (e.g., '#2D2D2D').
textColorstring | undefinedThe color used for text elements (e.g., '#2D2D2D').
backgroundColorstring | undefinedThe widget’s background color (e.g., '#ffffff').
highlightColorstring | undefinedThe color used for highlighted elements (e.g., '#F0F0F0').
borderColorstring | undefinedThe color used for borders in the UI (e.g., '#2D2D2D').

​
Example

  const config: FKConfig = {
    appName: "Dapp Name",
    // 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...
  };