Themes

Use one of the built-in themes.

import { THEME_SST } from "@openauthjs/openauth/ui/theme"

export default issuer({
  theme: THEME_SST,
  // ...
})

Or define your own.

import type { Theme } from "@openauthjs/openauth/ui/theme"

const MY_THEME: Theme = {
  title: "Acne",
  radius: "none",
  favicon: "https://www.example.com/favicon.svg",
  // ...
}

export default issuer({
  theme: MY_THEME,
  // ...
})

---

Themes

THEME_OPENAUTH

Default “…”

Built-in default OpenAuth theme.

THEME_SST

Default “…”

Built-in theme based on SST.

THEME_SUPABASE

Default “…”

Built-in theme based on Supabase.

THEME_TERMINAL

Default “…”

Built-in theme based on Terminal.

THEME_VERCEL

Default “…”

Built-in theme based on Vercel.

ColorScheme

• dark string

• light string

A type to define values for light and dark mode.

{
  light: "#FFF",
  dark: "#000"
}

ColorScheme.dark

Type string

The value for dark mode.

ColorScheme.light

Type string

The value for light mode.

Theme

• background? string | ColorScheme

• css? string

• favicon? string

• font? Object

  • family? string

  • scale? string

• logo? string | ColorScheme

• primary string | ColorScheme

• radius? “none” | “sm” | “md” | “lg” | “full”

• title? string

A type to define your custom theme.

Theme.background?

Type string | ColorScheme

The background color of the theme.

Takes a color or both light and dark colors.

{
  background: "#FFF"
}

Theme.css?

Type string

Custom CSS that’s added to the page in a <style> tag.

This can be used to import custom fonts.

{
  css: `@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');`
}

Theme.favicon?

Type string

A URL to the favicon of your app.

{
  favicon: "https://www.example.com/favicon.svg"
}

Theme.font?

Type Object

The font family and scale of the theme.

Theme.font.family?

Type string

The font family of the theme.

{
  font: {
    family: "Geist Mono, monospace"
  }
}

Theme.font.scale?

Type string

Default “1”

The font scale of the theme. Can be used to increase or decrease the font sizes across the UI.

{
  font: {
    scale: "1.25"
  }
}

Theme.logo?

Type string | ColorScheme

A URL to the logo of your app.

Takes a single image or both light and dark mode versions.

{
  logo: "https://www.example.com/logo.svg"
}

Theme.primary

Type string | ColorScheme

The primary color of the theme.

Takes a color or both light and dark colors.

{
  primary: "#FF5E00"
}

Theme.radius?

Type “none” | “sm” | “md” | “lg” | “full”

The border radius of the UI elements.

{
  radius: "none"
}

Theme.title?

Type string

The name of your app. Also used as the title of the page.

{
  title: "Acne"
}