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:

PropertyTypeDefault ValueInline Mode SupportOverlay Mode Support
theme_colorhexcode string# 7d71deYesYes
primary_text_colorhexcode string# 525c74YesYes
secondary_text_colorhexcode string# 6d7389YesYes
primary_header_colorhexcode string# 02041aYesYes
secondary_header_colorhexcode string# 000000YesYes
link_colorhexcode string# 1a73e8YesYes
hover_bg_colorhexcode string# efefefYesYes
border_colorhexcode string# e2e8f0YesYes
button_bg_colorhexcode stringtheme_color valueYesYes
font_familyenum:
System Fonts (ex: Arial, Verdana)
Custom fonts: Poppins/Roboto/Raleway/Montserrat/Inter
PoppinsYesYes

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:

  1. Roboto
  2. Raleway
  3. Montserrat
  4. Inter
  5. 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",
}

Whatโ€™s Next