thirdwebDocs
GitHub

lightTheme

Create a custom light theme object by using the default dark theme as a base and applying overrides.

Example

Get the default light theme

const defaultLightTheme = lightTheme();

Create a custom light theme

const customTheme = lightTheme({
  colors: {
    modalBg: "red",
  },
});
function lightTheme(overrides?: ThemeOverrides): Theme;

Parameters

The overrides to apply to the default light theme.

Type

let overrides: {
  [key in Exclude<keyof Theme, "type">]: Partial<Theme[key]>;
};

Returns

let returnType: {
  colors: {
    accentButtonBg: string;
    accentButtonText: string;
    accentText: string;
    borderColor: string;
    connectedButtonBg: string;
    connectedButtonBgHover: string;
    danger: string;
    inputAutofillBg: string;
    modalBg: string;
    modalOverlayBg: string;
    primaryButtonBg: string;
    primaryButtonText: string;
    primaryText: string;
    scrollbarBg: string;
    secondaryButtonBg: string;
    secondaryButtonHoverBg: string;
    secondaryButtonText: string;
    secondaryIconColor: string;
    secondaryIconHoverBg: string;
    secondaryIconHoverColor: string;
    secondaryText: string;
    selectedTextBg: string;
    selectedTextColor: string;
    separatorLine: string;
    skeletonBg: string;
    success: string;
    tertiaryBg: string;
    tooltipBg: string;
    tooltipText: string;
  };
  fontFamily: string;
  type: "light" | "dark";
};

Theme object