Docs | Fubi — Website Feedback & Collaboration Tool

Home

Features

Pricing

Security

Docs

Live Demo

Get Started

Live Demo

Get Started

Developer Documentation

Fubi runs inside a Shadow DOM and stays out of your way by default. This page covers two things you can customize: theming via CSS variables and element control via data attributes.

CSS Variables

Fubi uses CSS custom properties for highlight colors. Since custom properties inherit through Shadow DOM, you can override them from your page.

Set any of these on <body>, <html>, or any ancestor element:

Variable

--fubi-hoaver-default-color

--fubi-hover-error-color

--fubi-hover-invisible-color

--fubi-hover-done-color

--fubi-hover-thread-color

--fubi-hover-not-allowed-color

--fubi-hover-isolation-color

Default

#0ea5e9

#ef4444

#ea580c

#22c55e

#6366f1

#737373

#6366f1

Used for

Default element highlight

Error state highlight

Hidden/zero-size elements

Resolved/done elements

Elements with comment threads

Ignored elements

Isolation mode outline

body {
--fubi-hover-default-color: #8b5cf6;
--fubi-hover-thread-color: #f59e0b;
}

body {
--fubi-hover-default-color:#8b5cf6;
--fubi-hover-thread-color: #f59e0b;
}

If you don't set them, the built-in defaults are used.

Data attributes

Control how fubi interacts with specific elements on your page.

data-fubi-ignore

Prevents selection of a single element. On touch devices, Fubi shows an “ignored” indicator. On cursor devices, only the tracking dot follows the cursor – no element highlight. Does not affect children.

<button data-fubi-ignore>Can't select this</button>

<nav>
<a href="/" data-fubi-ignore>Home</a> 
<a href="/about">About</a> 
</nav>

data-fubi-ignore-all

Same as data-fubi-ignore, but propagates to all children. Works across shadow DOM boundaries.

<nav data-fubi-ignore-all>
<a href="/">Home</a>
<a href="/about">About</a>
<div class="dropdown">
<button>Menu</button>

</div>
</nav>