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 the dark mode of the page it is embedded in. Many sites need nothing more.
The variables
Set any of these on the container element (#hakanai-connect by default):
| Variable | Light default | Dark default | Used for |
|---|---|---|---|
--hkc-accent | #e06666 | same | Buttons, links, comment count, badges, focus borders |
--hkc-accent-text | #ffffff | same | Text on accent-colored buttons |
--hkc-text | #1a1a1a | #ededed | Main text |
--hkc-muted | #6b7280 | #9a9a9a | Secondary text, actions, checkbox label |
--hkc-faint | #9ca3af | #6e6e6e | Dates, hints, the "powered by" line |
--hkc-border | #e6e7eb | #2c2c2c | Separators, input borders, reply thread line |
--hkc-surface | #f8f9fa | #202020 | Input backgrounds, code blocks |
--hkc-bg | transparent | same | Widget background |
--hkc-radius | 12px | same | Corner rounding. Inputs and buttons derive from it |
--hkc-font | system font stack | same | Font family of the whole widget |
Every value is overridable independently. Anything you do not set keeps its default.
--hkc-radius sets the rounding of the comment form. Inputs and buttons follow at radius - 3px and radius - 4px, never below zero, so a single value keeps the whole widget consistent. Set it to 0 for square corners.
The widget has no background or outer border of its own: it sits directly in your page. To give it a card, style the container yourself:
#hakanai-connect {
background: #fff;
border: 1px solid #e6e7eb;
border-radius: 16px;
padding: 26px 28px;
}
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
Dark mode needs no configuration. The widget reads the scheme of the page it sits in, in this order:
- a
darkorlightclass on<html>or<body>, the convention used by Tailwind and most themes - a
data-theme,data-color-mode,data-bs-themeordata-modeattribute on those elements, set todarkorlight - the computed
color-schemeof the page, when it commits to a single scheme - the visitor's
prefers-color-scheme
A site with its own dark mode toggle is covered by the first two: the widget watches those elements, so flipping the toggle switches the widget at the same time, without a reload.
To force one scheme regardless of the page, use data-theme on the script tag:
<script async src="https://connect.hakanai.io/embed.js"
data-key="YOUR_SITE_PUBLIC_KEY"
data-theme="dark"></script>
Theming both schemes
If the detected scheme is right but the colors are not, scope your overrides to your own dark mode selector. 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.
The "powered by" link
Under the thread, the widget shows a small "Comments by Hakanai Connect" link. It is on by default on every plan, including paid ones.
On a paid plan you can remove it per site, in Site settings → General → Hide the Hakanai link but feel free to leave it if you'd like to support the project!
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.