The <ribaunt-widget> uses Shadow DOM for style encapsulation, which means external stylesheets cannot accidentally bleed into the widget’s internals. You can still customize its entire appearance by setting CSS custom properties (variables) on the ribaunt-widget host element — Shadow DOM inherits these from the outside, so your overrides flow through cleanly.
Quick start
The following four variables are enough for a minimal dark theme:
CSS variables reference
Dark mode
Ribaunt does not enforce an automatic dark mode. Instead, you bind it yourself — either via a media query that responds to the OS preference, or via a CSS class that your application controls.
Using a CSS class
If your app has its own dark-mode toggle that adds a class to a parent element (such as <html class="dark">), you can scope the overrides to that class:
Custom dimensions
You can resize the widget to fit your form layout by overriding the dimension variables. The example below creates a .large variant:
Standard CSS properties like margin, box-shadow, and display work directly on the ribaunt-widget host element since it’s an inline-block custom element. You do not need a wrapper <div> just to apply spacing or shadows.