Styles and theming

The widget renders inside a Shadow DOM, so your site's CSS never breaks it and its CSS never leaks into your site. Theming goes through one deliberate opening in that isolation: CSS custom properties set on the container, which inherit into the shadow root.

Out of the box, the widget uses your visitors' system font, a neutral palette, and follows their dark mode preference. Many sites need nothing more.

The variables

Set any of these on the container element (#hakanai-connect by default):

Every value is overridable independently. Anything you do not set keeps its default.

Examples

The most common adjustment is matching your brand color and typography:

#hakanai-connect {
  --hkc-accent: #0f766e;
  --hkc-font: Georgia, serif;
}

A softer, rounder look:

#hakanai-connect {
  --hkc-radius: 12px;
  --hkc-border: #e5e7eb;
}

Dark mode

By default the widget follows prefers-color-scheme: the dark defaults in the table above apply automatically when the visitor's system is in dark mode, with no configuration.

If your site uses its own dark mode toggle (a .dark class on html or body, as Tailwind and most themes do), scope your overrides to it. Custom properties inherit, so this works naturally:

#hakanai-connect {
  --hkc-text: #1f2937;
  --hkc-surface: #f9fafb;
}
.dark #hakanai-connect {
  --hkc-text: #e5e7eb;
  --hkc-border: #374151;
  --hkc-surface: #111827;
}

Values you set explicitly win over the widget's own dark mode defaults in both schemes, so if you theme one mode, theme both.

What theming cannot do

There is deliberately no custom CSS injection into the widget in the current version: the variables above are the contract, which is what lets the widget's internal markup evolve without breaking your styling. If a design need does not fit the variables, tell us; extending the variable set is easy, un-breaking sites is not.