Theming & RTL
Every value in the default look is a CSS custom property under .bit-bonboarding-root. Restyling
the library is a matter of overriding variables in your own stylesheet, with no selector fights
and no framework to install.
Try it
System leaves the choice to your stylesheet, which here means the light palette.
Localisation
Button text comes from an BonboardingLabels instance, set globally or per tour. For
resource files or a translation service, register your own
IBonboardingLocalizer instead.
Direction affects more than text alignment: in a right-to-left tour the arrow keys swap, and
Start and End alignments mirror.
The variables
This site does exactly what the snippet below shows: every tour card on it is the library's
default markup with Fluent 2 values poured into these variables, light and dark, in the demo's
wwwroot/css/app.css. Not one of the library's selectors is overridden.
/* Your stylesheet, loaded after the library's. */
.bit-bonboarding-root {
--bit-bonboarding-accent: #f59e0b;
--bit-bonboarding-accent-text: #1f1300;
--bit-bonboarding-surface: #101828;
--bit-bonboarding-text: #f9fafb;
--bit-bonboarding-radius: 6px;
--bit-bonboarding-duration: 160ms;
}
/* Or scope it to one tour with PopoverClass. */
.checkout-tour { --bit-bonboarding-accent: #16a34a; }