Skip to main content

Changing Colours

It is possible to update the default theme with your colours to make it fit perfectly with your website by adding a palette property to the EmailPassword.init call.

For example if your website uses a dark theme, here is how you can quickly customize it:

SuperTokens.init({    appInfo: {...},    recipeList: [        EmailPassword.init({            palette: {                background: '#333',                error: '#ad2e2e',                textTitle: "white",                textLabel: "white",                textInput: '#a9a9a9',                textPrimary: "white",                textLink: '#a9a9a9'            }        }),        Session.init()    ]});
important

Changes to the palette will apply to all the UI components we provide. If you want to change a specific component, please see this section.

Palette values#

background:#

  • Description: This value represent the background color of all forms.
  • Default: "white"

inputBackground:#

  • Description: This value represents the background color of the input fields of all forms.
  • Default: "#fafafa" (light grey)

primary:#

  • Description: This value represents the primary color used for highlighting focussed inputs, display successful states and button background colour.
  • Default: "#ff9b33" (orange)

success:#

  • Description: This value represents the color used on success events.
  • Default: "#41a700" (green)

error:#

  • Description: This value represents the error color used for highlighting inputs with errors, and display error messages.
  • Default: "#ff1717" (red)

textTitle:#

  • Description: This value represents the color of the title of each forms.
  • Default: "#222222" (black)

textLabel:#

  • Description: This value represents the main color used for form fields labels.
  • Default: "#222222" (black)

textInput:#

  • Description: This value represents the main color used for form fields labels.
  • Default: "#222222" (black)

textPrimary:#

  • Description: This value represents the main color used for subtitles and footer text.
  • Default: "#656565" (grey)

textLink:#

  • Description: This value represents the color used for links (see the image above).
  • Default: "#0076ff" (blue)