Colors, logo and placement

Pass a theme object. primary colors the launcher, header and active states, and onPrimary is the text and icon color on top of it. Every key is optional.

init({
  theme: {
    primary: "#7c3aed",   // launcher, header, active states
    onPrimary: "#ffffff", // text and icons on top of primary
    background: "#ffffff",
    surface: "#f5f3ff",   // footer, segmented controls, hover states
    text: "#1f2937",
    mutedText: "#4b5563",
    border: "#c4b5fd",
    radius: 16,           // number (px) or any CSS length
    fontFamily: "Cairo, Tahoma, sans-serif",
  },
});

When a CMS or tag manager adds the widget, theme it from CSS. The variables go on .a11yw-widget; --a11yw-hl on :root sets the outline color of the highlight adjustments.

.a11yw-widget {
  --a11yw-primary: #7c3aed;
  --a11yw-on-primary: #ffffff;
  --a11yw-radius: 16px;
}
:root {
  --a11yw-hl: #d64000; /* outline color of "highlight headings / links / hover" */
}

A console warning tells you when your theme makes part of the widget fail WCAG contrast. Only hex colors are checked.

• onPrimary on primary: 4.5:1.
• primary as the focus outline on background: 3:1.
• text and mutedText on background, and footer links on surface: 4.5:1.

icon replaces the launcher's icon and logo adds one next to the panel title. Both take an image URL or a DOM element. Pass only elements you trust: they are cloned as they are.

init({
  icon: "/logo.svg",       // launcher: an image URL (svg, png, data: URI) or a DOM element
  logo: "/logo-white.svg", // next to the panel title (hidden by default)
});

The launcher sits in a bottom corner. When keyboard focus lands on a page control under it, it steps aside until focus moves on (WCAG 2.4.11), but it still covers that corner for mouse and touch users: keep it free, add bottom padding to your page, or move the launcher with offset.

init({
  position: "left",        // "left" (default) or "right"
  offset: { x: 20, y: 90 }, // px from the screen edges, 0–1000
  buttonSize: 64,          // launcher diameter, 24–160 px
  zIndex: 9999,
});