Theming - Stytch Docs

Theming is not supported for admin portal components

The following applies to @stytch/vanilla-js v6, @stytch/react v20, or @stytch/nextjs v22. If you are on an older version, see documentation here.

To theme Stytch UI components, use the presentation property. You can use one of our pre-built themes, override specific tokens, or create an entirely new theme to match your app’s look and feel.

const presentation = {
  theme: { ... },
  options: { ... },
  icons: { ... },
};

Pre-built themes

You can use our default themes as a basis for your own theme.

Light theme

The light theme is the default and can be imported as defaultTheme.

Show colors

background

oklch(1 0 0)

foreground

oklch(0.14 0 0)

primary

oklch(0.2 0 0)

primary-foreground

oklch(0.99 0 0)

secondary

oklch(0.97 0 0)

secondary-foreground

oklch(0.2 0 0)

muted

oklch(0.97 0 0)

muted-foreground

oklch(0.56 0 0)

accent

oklch(0.97 0 0)

accent-foreground

oklch(0.2 0 0)

border

oklch(0.92 0 0)

input

oklch(0.92 0 0)

ring

oklch(0.72 0 0)

destructive

oklch(0.577 0.245 27.325)

destructive-foreground

#fff

warning

oklch(0.67 0.16 58)

success

oklch(0.6 0.13 163)

Dark theme

The default dark theme can be imported as defaultDarkTheme.

Show colors

background

oklch(0.145 0 0)

foreground

oklch(0.985 0 0)

primary

oklch(0.922 0 0)

primary-foreground

oklch(0.205 0 0)

secondary

oklch(0.269 0 0)

secondary-foreground

oklch(0.985 0 0)

muted

oklch(0.269 0 0)

muted-foreground

oklch(0.708 0 0)

accent

oklch(0.269 0 0)

accent-foreground

oklch(0.985 0 0)

border

oklch(1 0 0 / 10%)

input

oklch(1 0 0 / 15%)

ring

oklch(0.556 0 0)

destructive

oklch(0.704 0.191 22.216)

destructive-foreground

#fff

warning

oklch(0.754 0.16 58)

success

oklch(0.704 0.13 163)

shadcn theme

If you use shadcn/ui, you can use shadcnTheme to automatically match Stytch UI to your theme. Here are some examples of how Stytch UI appears with different shadcn/ui themes.

Default
Neobrutalism
Bubblegum
Amethyst dark

You will also need to add these lines to your CSS:

@import 'tailwindcss';
/* Or @stytch/nextjs, @stytch/vanilla-js */
@import '@stytch/react/theme/shadcn.css'; 

For dark mode to work, add these lines to your .dark class.

.dark {
  color-scheme: dark; 
  --st-dark-mode: 1; 
}

Customization

You can override any property in these theme objects. See the reference below for all available properties.

Automatic light/dark themes

You can also provide an array of two themes, and Stytch UI will automatically switch between them based on the user’s OS color scheme.

Creating your own theme

You can create your own theme using this template. The template contains the default value for each property. Feel free to delete any properties where you want to use the default.

const myTheme = {
  'color-scheme': 'light',

  // Fonts
  'font-family': 'system-ui, sans-serif',
  'font-family-mono':
    "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace",

  // Sizes
  spacing: '4px',
  'text-base': '1rem',
  'container-width': '400px',
  'mobile-breakpoint': '768px',
  'rounded-base': '4px',

  // Durations
  'transition-duration': '0.15s',

  // Shadows - no shadow is used by default
  shadow: '',

  // Colors
  background: 'oklch(1 0 0)',
  foreground: 'oklch(0.14 0 0)',

  primary: 'oklch(0.2 0 0)',
  'primary-foreground': 'oklch(0.99 0 0)',

  secondary: 'oklch(0.97 0 0)',
  'secondary-foreground': 'oklch(0.2 0 0)',

  muted: 'oklch(0.97 0 0)',
  'muted-foreground': 'oklch(0.56 0 0)',

  accent: 'oklch(0.97 0 0)',
  'accent-foreground': 'oklch(0.2 0 0)',

  border: 'oklch(0.92 0 0)',
  input: 'oklch(0.92 0 0)',
  ring: 'oklch(0.72 0 0)',

  destructive: 'oklch(0.577 0.245 27.325)',
  'destructive-foreground': '#fff',

  warning: 'oklch(0.67 0.16 58)',
  success: 'oklch(0.6 0.13 163)',
};

Additional properties

These properties are usually derived from base tokens but can be overridden if your theme needs different values.

const additionalThemeProperties = {
  // Defaults to font-family
  'header-font': '',

  // Container defaults to 6x base radius
  'container-radius': '',

  // Defaults to border
  'container-border': '',

  // Button and input defaults to 2x base radius
  'button-radius': '',
  'input-radius': '',

  // Default to shadow
  'shadow-button': '',
  'shadow-input': '',
};

CSS variables

You can also use CSS custom properties (a.k.a. CSS variables) as values. This is useful if you are using Tailwind or another framework that provides them.

const theme = {
  primary: 'var(--color-primary)',
};

TypeScript

Themes are typed as Theme. This object has every non-derived property marked as required. If you only intend to override a few properties from default, you can use Partial<Theme> instead.

Playground

Additional options

Logo and header customization

Use options.logo to configure the logo displayed at the top of the components. The logo will be resized to a maximum of 100×50px, but we recommend using an image at least 200×100px to support users with hi-dpi displays.

const presentation = {
  options: {
    url: 'https://example.com/logo.png',
    alt: 'Your company name',
  },
};

Use options.hideHeaderText to hide the heading and instruction text on some screens. This can be useful to avoid duplicating existing headings on the page and can be combined with setting theme['container-border'] to 0 to blend the components into the page.

const presentation = {
  options: {
    hideHeaderText: true,
  },
};

hideHeaderText
Without hideHeaderText

Icon customization

Icons can be customized by passing an object to presentation.icons where the keys are icon IDs and the value is a React component (not element) rendering the icon. A monochrome black and white logo set is available as an alternative to the default color one. Currently, we only allow customizing logos used in OAuth, SSO, email, or crypto products. These logos can be customized:

amazon
apple
bitbucket
coinbase
discord
facebook
figma
github
gitlab
google
linkedin
microsoft
salesforce
slack
snapchat
tiktok
twitch
xTwitter
yahoo
phantom
metamask
binance
gmail
outlook

You can also pass in a React component to replace the logo completely. The component should take a size prop and spread the rest of the props onto the root element.

const OutlookLogo = ({ size, ...props }) => (
  <svg width={size} height={size} {...props}>...</svg>
);

const presentation = {
  icons: {
    outlook: OutlookLogo,
  },
};

Shadow DOM style isolation

Use options.enableShadowDOM to use shadow DOM to isolate outer page styles. Use this option if you find Stytch UI’s styling are being overrode by the page’s stylesheet. In @stytch/react and @stytch/nextjs, this will also create an additional wrapper <div> to act as the shadow root for the component.

Compatibility

Our themes use the color-mix CSS function and the oklch color space to generate variant colors. If you need to support older browsers that do not support either of these, use addColorFallback() imported from /compat to generate the colors in JavaScript instead.

TypeScript

Types are available for all parts of presentation.

Reference

`presentation.theme`

color-scheme

'light' | 'dark'

The color scheme for the theme.

transition-duration

string

default:"0.15s"

Duration for transitions.

Fonts

font-family

string

default:"system-ui"

Base font for all text.

font-family-mono

string

default:"ui-monospace"

Font for monospace code, such as TOTP setup and recovery code.

header-font

string

Header font override. Defaults to base font-family.

Sizes

spacing

string

default:"4px"

Base sizing variable. Changing this makes most spacing between elements larger or smaller.

container-width

string

default:"400px"

Max width for outer container.

mobile-breakpoint

string

default:"768px"

UI components are larger to accommodate touch screens below this size.

rounded-base

string

default:"4px"

Base border radius.

text-base

string

default:"1rem (16px)"

Base font size.

button-radius

string

Override for button border radius. Defaults to 2× rounded-base or 8px.

input-radius

string

Override for input border radius. Defaults to 2× rounded-base or 8px.

container-radius

string

Override for outer container border radius. Defaults to 6× rounded-base or 24px.

Shadows

shadow

string

Base box shadow, used for both buttons and inputs. Defaults to none.

shadow-button

string

Box shadow override for buttons.

shadow-input

string

Box shadow override for inputs.

Colors

background

string

Background color of the SDK container.

foreground

string

Default font color for text in the SDK container.

primary

string

Your primary brand color. This will be applied to primary action buttons such as form submit buttons.

primary-foreground

string

Text color contrasting with primary.

secondary

string

Your secondary brand color.

secondary-foreground

string

Text color contrasting with secondary.

muted

string

A neutral, subtle color for areas such as the unfilled part of a progress bar.

muted-foreground

string

Text color contrasting with muted, and also the color used for helper and other secondary text.

accent

string

Your accent brand color. This will be applied to backgrounds to draw the user’s attention, such as the backup code for TOTP registration.

accent-foreground

string

Text color contrasting with accent.

border

string

Border color for the outer container and dividers.

input

string

Border color for inputs.

ring

string

Input and button focus ring color.

destructive

string

Background and font color for destructive actions and error states. Defaults to red.

destructive-foreground

string

Text color contrasting with destructive.

warning

string

Background and font color for warning states. Defaults to dark yellow.

success

string

Background and font color for successful states. Defaults to green.

container-border

string

Border color only for the outer container. Defaults to the value of border.

`presentation.options`

The presentation.options object customizes non-style-related aspects of the SDK’s appearance. You can specify some of them or none at all. We’ll use our defaults for the ones you don’t specify.

hideHeaderText

boolean

When this value is true, the title and description text will not show in the SDK.

logo

object

The configuration object for your custom logo.

Show properties

url

string

The URL of your custom logo.

alt

string

The alt text for the logo for non-visual users. This is required for accessibility.

enableShadowDOM

boolean

When true, the UI components will mount itself in a shadow DOM. In @stytch/vanilla-js, use the shadow attribute on the custom elements or the { shadow: true } option on the component constructor instead of this option. This defaults to false.

`presentation.icons`

See icon customization.

​Pre-built themes

​Light theme

​Dark theme

​shadcn theme

​Customization

​Automatic light/dark themes

​Creating your own theme

​Additional properties

​CSS variables

​TypeScript

​Playground

​Additional options

​Logo and header customization

​Icon customization

​Shadow DOM style isolation

​Compatibility

​TypeScript

​Reference

​presentation.theme

​Fonts

​Sizes

​Shadows

​Colors

​presentation.options

​presentation.icons

Pre-built themes

Light theme

Dark theme

shadcn theme

Customization

Automatic light/dark themes

Creating your own theme

Additional properties

CSS variables

TypeScript

Playground

Additional options

Logo and header customization

Icon customization

Shadow DOM style isolation

Compatibility

TypeScript

Reference

`presentation.theme`

Fonts

Sizes

Shadows

Colors

`presentation.options`

`presentation.icons`