Skip to main content

Widget and theme

Under Widget, choose one of two themes.

Set my own colors​

An accent, light, dark or the visitor's setting, and a corner style. You can also set your own background and text colors.

Match your site​

The widget reads your page's background, text, accent color, font and light or dark when it loads, and switches when your site does.

  • Add data-frankie-accent to an element (for example your primary button) to tell it exactly which color is your accent.
  • The colors you set under Widget are the fallback, used if your page can't be read.
  • When Frankie installs from your repository, it reads your styles and offers your brand colors as those fallbacks.

Scoped styles​

The widget's styles are scoped to the widget, so it never changes the rest of your page, and it works with or without Tailwind. If you already run Tailwind v4, you can skip the stylesheet and compile the widget against your own design tokens; see Styling.