Customisation of the Auth UI is achievable through the theme config.

​
Themes

  • DefaultTheme: Delivers the classic Futureverse aesthetic, ready to use out of the box.
  • CoreColors: Includes essential colors, such as black, white, and transparent variants for versatile styling (these cannot be edited).
  • Other Typesafe Theme Types: Access additional types like ThemeConfig, AuthOption, Colors, Fonts, and BorderRadius for enhanced customization.
  • Whitelabeling: Add a modal logo or background image/video to seamlessly integrate the auth UI modal with your personalized brand identity.
import { type ThemeConfig, DefaultTheme, AuthOption, CoreColors } from '@futureverse/auth-ui';

export type ThemeConfig = {
  defaultAuthOption?: AuthOption;
  showCloseButton?: boolean;
  colors: Colors;
  font: Fonts;
  borderRadius: BorderRadius;
  images?: {
    background?: string;
    logo?: string;
  };
};

type AuthOption = 'web3' | 'custodial';

type Colors = {
  /** Primary */
  primaryBackground: string;
  primaryForeground: string;
  primaryHover: string;
  primaryActive: string;
  primaryBackgroundDisabled: string;
  primaryForegroundDisabled: string;

  /** Secondary */
  secondaryBackground: string;
  secondaryForeground: string;
  secondaryHover: string;
  secondaryActive: string;
  secondaryBackgroundDisabled: string;
  secondaryForegroundDisabled: string;

  /** Border */
  border: string;
  borderHover: string;
  borderActive: string;
  borderError: string;

  /** Shared Stylings */
  errorForeground: string;
  body: string;
  muted: string;
  surface: string;
  page: string;
};

type Fonts = {
  fontUrl: string;
  fontName: string;
};

type BorderRadius = {
  none: number;
  default: number;
  large: number;
};

​
Overwrite Theming and Font Examples

  • Color Values: All color properties must be specified using RGBA values for consistency and transparency control.
  • Font Customization: You can easily integrate custom fonts by providing the font URL and name.
  • Border Radius: The ability to tweak the border-radius px number values of auth-ui components to your liking.
  • Comprehensive Theming: The theme object allows you to customize various aspects. You can either create a completely custom theme or selectively override specific elements while inheriting the rest from the default theme.

Example:

import { type ThemeConfig } from '@futureverse/auth-ui';

const customThemeConfig: ThemeConfig = {
  defaultAuthOption: 'web3',
  colors: {
    primaryBackground: 'rgba(255, 255, 255, 0.1)',
    primaryForeground: 'rgba(255, 255, 255, 1)',
    primaryHover: 'rgba(255, 255, 255, 0.2)',
    primaryActive: 'rgba(255, 255, 255, 0.2)',
    primaryBackgroundDisabled: 'rgba(68, 68, 68, 1)',
    primaryForegroundDisabled: 'rgba(165, 163, 164, 1)',
    secondaryBackground: 'rgba(255, 255, 255, 0)',
    secondaryForeground: 'rgba(182, 182, 182, 1)',
    secondaryHover: 'rgba(255, 255, 255, 0)',
    secondaryActive: 'rgba(255, 255, 255, 0.05)',
    secondaryBackgroundDisabled: 'rgba(68, 68, 68, 1)',
    secondaryForegroundDisabled: 'rgba(165, 163, 164, 1)',
    border: 'rgba(255, 255, 255, 0.2)',
    borderHover: 'rgba(255, 255, 255, 1)',
    borderActive: 'rgba(255, 255, 255, 1)',
    borderError: 'rgba(171, 21, 57, 1)',
    errorForeground: 'rgba(171, 21, 57, 1)',
    body: 'rgba(255, 255, 255, 1)',
    muted: 'rgba(182, 182, 182, 1)',
    surface: 'rgba(0, 0, 0, 0.5)',
    page: 'rgba(24, 24, 24, 1)',
  },
  font: {
    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
    fontName: 'Inter',
  },
  borderRadius: {
    none: 0,
    default: 8,
    large: 24,
  },
};


const customThemeConfig: ThemeConfig = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    muted: 'rgba(1, 1, 1, 1)',
  },
   borderRadius: {
    ...DefaultTheme.borderRadius,
    default: 10,
  },
};

All color values only accept rgba codes.