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 Passwordless.init call.

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

import SuperTokens from "supertokens-auth-react";import ThirdPartyPasswordless from "supertokens-auth-react/recipe/thirdpartypasswordless";import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        ThirdPartyPasswordless.init({            contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.            palette: {                background: '#333',                error: '#ad2e2e',                textTitle: "white",                textLabel: "white",                textInput: '#a9a9a9',                textPrimary: "white",                textLink: '#a9a9a9',                inputBackground: "#292929",                // ...            }        }),        Session.init()    ]});
Prebuilt form with custom colors
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)
Prebuilt form input field

primary:#

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

success:#

  • Description: This value represents the color used on success events.
  • Default: "#41a700" (green)
Element visible when email is resent succesfully

error:#

  • Description: This value represents the error color used for highlighting inputs with errors, and display error messages.
  • Default: "#ff1717" (red)
Element visible when incorrect OTP is entered

textTitle:#

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

textLabel:#

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

textInput:#

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

textPrimary:#

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

textLink:#

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

buttonText:#

note

This value is only available for supertokens-auth-react version >= 0.18

  • Description: This value represents the colour of the text inside the main button on each page
  • Default: "#ffffff" (white)
Prebuilt form submit button

superTokensBrandingBackground:#

note

This value is only available for supertokens-auth-react version >= 0.18

  • Description: This value controls the color of the SuperTokens branding element on the bottom of sign-in/up pages
  • Default: "#F2F5F6" (alice blue)

superTokensBrandingText:#

note

This value is only available for supertokens-auth-react version >= 0.18

  • Description: This value controls the color of the "Powered by SuperTokens" text on the bottom of sign-in/up pages
  • Default: "#ADBDC4" (heather grey)
Prebuilt form SuperTokens label