Theming

Match the Glide widget to your app's design

Both useGlidePay and useGlideDeposit accept a theme object that lets you customize the widget's colors, fonts, borders, and spacing — including full light and dark mode support.

import { useGlidePay, GlideWidgetTheme } from "@paywithglide/glide-react";
 
const theme: GlideWidgetTheme = {
  colorModalBackground: "#ffffff",
  buttonPrimaryBackground: "#4f46e5",
  buttonPrimaryForeground: "#ffffff",
  buttonPrimaryBorderRadius: "9999px",
};
 
const { openGlidePay } = useGlidePay({
  app: "my-app",
  sessionId,
  theme,
});

Every property is optional and accepts standard CSS values — colors in any CSS format (#hex, rgba(...), etc.), and lengths in any CSS unit (px, rem, %).

Light and dark mode

The widget's default palette is light. It does not switch palettes automatically — to support dark mode, define a dark theme and pass it whenever your app is in dark mode.

1. Define your themes

import { GlideWidgetTheme } from "@paywithglide/glide-react";
 
export const lightTheme: GlideWidgetTheme = {
  colorScheme: "light",
 
  colorModalBackdrop: "rgba(0, 0, 0, 0.4)",
  colorModalBackground: "#ffffff",
  colorModalBorder: "#f5f5f5",
 
  colorTextPrimary: "#171717",
  colorTextSecondary: "#a3a3a3",
  colorBackgroundSecondary: "#f5f5f5",
 
  buttonPrimaryForeground: "#ffffff",
  buttonPrimaryBackground: "#262626",
  buttonSecondaryBackground: "#f5f5f5",
 
  alertBackground: "#f5f5f5",
  colorAlertBackground: "#f5f5f5",
  colorAlertAccent: "#171717",
  colorAlertWarningBackground: "#fed7aa",
  colorAlertWarningAccent: "#f97316",
};
 
export const darkTheme: GlideWidgetTheme = {
  colorScheme: "dark",
 
  colorModalBackdrop: "rgba(0, 0, 0, 0.7)",
  colorModalBackground: "#121212",
  colorModalBorder: "#333333",
 
  colorTextPrimary: "#ffffff",
  colorTextSecondary: "#b0b0b0",
  colorBackgroundSecondary: "#1e1e1e",
 
  buttonPrimaryForeground: "#121212",
  buttonPrimaryBackground: "#ffffff",
  buttonSecondaryBackground: "#222222",
  buttonSecondaryBorderColor: "#333333",
  buttonSecondaryBorderWidth: "1px",
 
  alertBackground: "#1e1e1e",
  colorAlertBackground: "#1e1e1e",
  colorAlertAccent: "#ffffff",
  colorAlertWarningBackground: "#2e1f00",
  colorAlertWarningAccent: "#f0b90b",
  colorAlertBorder: "#333333",
};

2. Pass the active theme

If your app manages its own light/dark state, use that:

const { openGlidePay } = useGlidePay({
  app: "my-app",
  sessionId,
  theme: isDarkMode ? darkTheme : lightTheme,
});

Or follow the user's system preference:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
const { openGlidePay } = useGlidePay({
  app: "my-app",
  sessionId,
  theme: prefersDark ? darkTheme : lightTheme,
});

About `colorScheme`

The colorScheme property sets the CSS color-scheme inside the widget, which controls how native browser UI — form inputs, scrollbars — renders. Set it to "light" or "dark" to match the palette you're passing.

If you don't set it, the SDK auto-detects it from your page's root color-scheme value. Note that this only affects native browser UI — the widget's colors always come from the theme properties, so a dark palette must be provided explicitly.

Custom fonts

Load your app's font into the widget with fontSrcCss (a URL to a CSS stylesheet that declares the font) and fontFamily:

const theme: GlideWidgetTheme = {
  fontSrcCss: "https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap",
  fontFamily: "Manrope, sans-serif",
};

Theme reference

General

Property	Description	Default
`colorScheme`	CSS `color-scheme` for native browser UI (`"light"` or `"dark"`)	Auto-detected from your page
`fontSrcCss`	URL of a CSS stylesheet that loads your font	—
`fontFamily`	CSS `font-family` used throughout the widget	Inter

Modal

Property	Description	Default
`colorModalBackdrop`	Overlay color behind the modal	`#f5f5f5`
`colorModalBackground`	Modal surface color	`#ffffff`
`colorModalBorder`	Modal border and divider color	`#f5f5f5`
`modalBorderWidth`	Modal border width	`1px`
`modalBorderRadius`	Modal corner radius	`1rem`

Text & surfaces

Property	Description	Default
`colorTextPrimary`	Primary text color	`#171717`
`colorTextSecondary`	Secondary / muted text color	`#a3a3a3`
`colorBackgroundSecondary`	Background of secondary surfaces (cards, list rows)	`#f5f5f5`

Primary button

Property	Description	Default
`buttonPrimaryForeground`	Text color	`#ffffff`
`buttonPrimaryBackground`	Background color	`#262626`
`buttonPrimaryBorderColor`	Border color	`transparent`
`buttonPrimaryBorderWidth`	Border width	`0px`
`buttonPrimaryBorderRadius`	Corner radius	`0.5rem`
`buttonPrimaryPadding`	Padding (CSS shorthand)	`0.5rem`

Secondary button

Property	Description	Default
`buttonSecondaryBackground`	Background color	`#f5f5f5`
`buttonSecondaryBorderColor`	Border color	`transparent`
`buttonSecondaryBorderWidth`	Border width	`0px`
`buttonSecondaryBorderRadius`	Corner radius	`0.375rem`
`buttonSecondaryPadding`	Padding (CSS shorthand)	`0.5rem`

Alerts

Property	Description	Default
`alertBackground`	Alert background color	`#f5f5f5`
`alertBorderWidth`	Alert border width	`0px`
`colorAlertBackground`	Informational alert background	`#f5f5f5`
`colorAlertAccent`	Informational alert icon / accent color	`#171717`
`colorAlertWarningBackground`	Warning alert background	`#fed7aa`
`colorAlertWarningAccent`	Warning alert icon / accent color	`#f97316`
`colorAlertBorder`	Alert border color	`transparent`

Misc

Property	Description	Default
`appLogoHeight`	Height of your app's logo in the widget header	`2rem`