Theme Configurations

Overview

Theme configurations allows the client to customize the Login SDK to make the look and feel more integrated with the client's system. The customisations available are:

Property	Type	Default Value	Inline Mode Support	Overlay Mode Support
theme_color	hexcode string	# 7d71de	Yes	Yes
primary_text_color	hexcode string	# 525c74	Yes	Yes
secondary_text_color	hexcode string	# 6d7389	Yes	Yes
primary_header_color	hexcode string	# 02041a	Yes	Yes
secondary_header_color	hexcode string	# 000000	Yes	Yes
link_color	hexcode string	# 1a73e8	Yes	Yes
hover_bg_color	hexcode string	# efefef	Yes	Yes
border_color	hexcode string	# e2e8f0	Yes	Yes
button_bg_color	hexcode string	theme_color value	Yes	Yes
font_family	enum: System Fonts (ex: Arial, Verdana) Custom fonts: Poppins/Roboto/Raleway/Montserrat/Inter	Poppins	Yes	Yes

Theme Configurations

All theme configurations mentioned below will be defined under the theme_config{} object as:

<html lang="en">
  <head>
  <script src="https://cdn.getfize.com/sdk/v1.0/getfize.js"></script>
</head>
<body>
    <div id="inline-container"></div>
<script>
      let handler = FIZE.configure({
        client_id: "FIZE_PROVIDED_CLIENT_ID",
        theme_config: {
          theme_color: "#7d71de",
          primary_text_color: "#403c33",
          secondary_text_color: "#827f78",
          primary_header_color: "#000000",
          secondary_header_color: "#7d6f52",
          border_color: "#e6e5e3",
          link_color: "#1a73e8",
          hover_bg_color: "#ebdec5",
          font_family: "Poppins",
        },
        display_mode: "inline",
        element_id: "inline-container"
      });   
</script>
</body>
</html>

📘
All colors are defined in hexcode.

Font

The Font Family for the SDK can be configured which is applied throughout the UI. The key "font_family" has to be defined inside the theme_config object and can accept the following font types:

All Systems Fonts are supported.

Custom Fonts:

Roboto
Raleway
Montserrat
Inter
Poppins

theme_config: {
  font_family: "Poppins",
}

Theme Color

The Theme Color of the SDK can be configured which is applied throughout the UI. All CTA's, Loaders, and search bars will be highlighted with the color defined. The key "theme_color" has to be defined inside the theme_config object.

theme_config: {
  theme_color: "#7d71de",
}

Primary & Secondary Text Color

To define the text color on the SDK UI, the primary and secondary colors can be configured which allow the clients to define colors for the main and sub-texts that are shown on the UI. The key "primary_text_color" and "secondary_text_color" has to be defined inside the theme_config object.

theme_config: {
  primary_text_color: "#403c33",
  secondary_text_color: "#827f78",
}

Primary Header Color

To define the header color on the SDK UI, the primary header colors can be configured which allow the clients to define colors for the headers that are shown on the UI. The key "primary_header_color" has to be defined inside the theme_config object.

theme_config: {
  primary_header_color: "#000000",
}

Border Color

For elements where borders are applied, the client has the option to configure define the border color on the UI. The key "border_color" has to be defined inside the theme_config object.

theme_config: {
  border_color: "#e6e5e3",
}

Hover Background Color

For elements where hover effects are applied, the client has the option to configure define the background color for the hover effect on the UI. The key "hover_bg_color" has to be defined inside the theme_config object.

theme_config: {
  hover_bg_color: "#ebdec5",
}

Link Color

The Link Color of the SDK can be configured which is applied throughout the UI. All links will be shown with the color defined. The key "link_color" has to be defined inside the theme_config object.

theme_config: {
  link_color: '#525c74',
}

Button Background color

The Buttons Background of the SDK can be configured which is applied throughout the UI. Buttons will be shown with the color defined. The key "button_bg_color" has to be defined inside the theme_config object. The default color is theme_color value.

theme_config: {
  button_bg_color: "#7d71de",
}