Changing Colours 🎨

This section applies to the Sign-up / Sign-in and reset-password forms.

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:

ReactJS

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

Changes to the palette will apply to the following forms:

• Sign up form
• Sign in form
• Reset password forms

You will see that the styles were applied to Sign-up too if you click on the "Sign up" link on the form above.

Palette values

• background:

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

• inputBackground:

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

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

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

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

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

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

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

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

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