SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

โ€บStyling

SIDEBAR_REPLACE_DOC_Introduction

  • Introduction

Quick setup

  • Video tutorial & Architecture
  • Frontend
  • Backend
  • Core

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

    Database Setup

    • MySQL
    • PostgreSQL

Common customizations

  • Sign Out
  • Sign Up Form

    • About
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Embed in a page
    • Handling signup success
    • Terms of service & Privacy policy links

    Sign In Form

    • About
    • Adding / Modifying field validators
    • Password managers
    • Embed in a page
    • Show Sign In by default

    Reset Password

    • About
    • Reset password email
    • Embed in a page

    Email Verification

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

    Sessions

    • About
    • Cookie Consent
    • Creating a new session
    • Session Verification in API
    • Change session timeout
    • Checking if a session exists on the frontend
    • Get user information on the frontend
    • Using with FaunaDB

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Themes

    Changing base path

    • Website Base Path
    • API Base Path

    Multi Tenancy

    • About
    • One login, many sub domains
    • One login per sub domain
  • User Pagination

Advanced users

    Advanced session management

    • Share sessions across sub domains
    • Anti CSRF
    • JWT Signing key rotation
    • Access token blacklisting
    • Customizing Error Handling

    Supertokens Core config

    • Adding API Keys
    • Tuning Performance
    • Logging
    • Rename database tables

    Make your own frontend

    • Sign-up / Sign-in custom theme
    • Reset password custom theme

    Make your own backend

    • Sign up custom API
    • Sign in custom API
    • Reset password custom APIs

NextJS

  • SuperTokens with NextJS
  • Deploy with Vercel
  • Deploy with Netlify

SIDEBAR_REPLACE_DOC_SDKs

  • SDKs

SIDEBAR_REPLACE_DOC_Compatibility Table

  • Compatibility Table

Migration

  • Migrating from an older version of SuperTokens
  • Migrating to SuperTokens
  • Migrating away from SuperTokens
  • From managed service to self hosted

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:

SuperTokens.init({
    appInfo: {...},
    recipeList: [
        EmailPassword.init({
            palette: {
                background: '#333',
                textTitle: "white",
                textLabel: "white",
                textPrimary: "white",
                error: '#ad2e2e',
                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"

  • 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"
โ† Using with FaunaDBChanging Style via CSS โ†’