SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

โ€บStyling

SIDEBAR_REPLACE_DOC_About this recipe

  • About this recipe

Quick setup

  • Frontend
  • Backend
  • Core

    • Self Hosted setup with Docker
    • Self Hosted setup without Docker
    • Managed Service

    Database Setup

    • MySQL
    • PostgreSQL
    • MongoDB
    • Rename database tables

Common customizations

  • Redirect To Auth Screen
  • Sign Out
  • SignUp Form

    • Prerequisite
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • Embed in a page
    • Terms of service & Privacy policy links
    • Show Sign Up by default

    SignIn Form

    • Prerequisite
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • Password managers
    • Embed in a page
  • Post sign up callbacks
  • Post sign in callbacks
  • User Roles

    • Assigning roles to users
    • Assigning roles to a session
    • Reading roles in an API
    • Reading roles in the frontend
    • Updating roles in a session

    Reset Password

    • About
    • Reset Password Email
    • Embed in a page

    Email Verification

    • About
    • Customising the email sent
    • Embed in a page

    Sessions

    • About
    • Storing session data
    • Session Verification in API
    • Revoking a session manually
    • Change session timeout
    • Checking if a session exists on the frontend
    • Get user information on the frontend
    • Fetching sessions for a user
    • Update JWT Payload
    • Update Session Data
    • Cookies and Https
    • Cookie Consent
    • Share sessions across sub domains
    • Anti CSRF
    • Same site cookies
    • JWT Signing key rotation
    • Access token blacklisting
    • Customizing Error Handling

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Themes

    Changing base path

    • Website Base Path
    • API Base Path
  • User Pagination
  • Core

    • Adding API Keys
    • Tuning Performance
    • Logging

    Core CLI

    • Overview
    • Start
    • List
    • Stop
    • Uninstall

NextJS

  • About
  • 1. Configuration
  • 2. Showing Login UI
  • 3. Adding auth APIs
  • 4. Protecting a website route
  • 5. Session verification

    • 5a. Session verification in an API call
    • 5b. Session verification in getServerSideProps
  • 6. Next steps

SIDEBAR_REPLACE_DOC_Serverless Optimisation

  • Running on serverless env

SIDEBAR_REPLACE_DOC_SDKs API Reference

  • SDKs API Reference

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

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

ReactJS
SuperTokens.init({
appInfo: {...},
recipeList: [
ThirdPartyEmailPassword.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"
โ† Customizing Error HandlingChanging Style via CSS โ†’