> ## Documentation Index > Fetch the complete documentation index at: https://captcha.ribaunt.com/llms.txt > Use this file to discover all available pages before exploring further. # Theming > Style the ribaunt-widget using CSS custom properties. Covers all variables for colors, dimensions, borders, spinner, and dark mode implementation. The `` 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 theme={null} ribaunt-widget { --ribaunt-background: #1e1e1e; --ribaunt-border-color: #444; --ribaunt-color: #f0f0f0; --ribaunt-spinner-color: #f0f0f0; } ``` ## CSS variables reference | Variable | Default | Description | | ------------------------------------ | ------------------------- | ----------------------------- | | `--ribaunt-background` | `#fdfdfd` | Widget container background | | `--ribaunt-border-color` | `#dddddd8f` | Widget border color | | `--ribaunt-border-radius` | `14px` | Widget border radius | | `--ribaunt-color` | `#212121` | Text color | | `--ribaunt-widget-width` | `230px` | Widget width | | `--ribaunt-widget-height` | `58px` | Widget height | | `--ribaunt-widget-padding` | `14px` | Widget inner padding | | `--ribaunt-gap` | `15px` | Gap between checkbox and text | | `--ribaunt-checkbox-size` | `25px` | Checkbox width and height | | `--ribaunt-checkbox-background` | `#fafafa91` | Checkbox background color | | `--ribaunt-checkbox-border` | `1px solid #aaaaaad1` | Checkbox border | | `--ribaunt-checkbox-border-radius` | `6px` | Checkbox border radius | | `--ribaunt-checkbox-margin` | `2px` | Checkbox top/bottom margin | | `--ribaunt-spinner-color` | `#000` | Active spinner segment color | | `--ribaunt-spinner-background-color` | `#eee` | Inactive spinner track color | | `--ribaunt-spinner-thickness` | `5px` | Spinner ring thickness | | `--ribaunt-checkmark` | Built-in green checkmark | Success checkmark SVG URL | | `--ribaunt-error-cross` | Built-in red warning icon | Error cross icon SVG URL | | `--ribaunt-logo-color` | `#666` | Color of the Ribaunt logo | | `--ribaunt-font` | system sans-serif | Font stack | ## 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 media query ```css theme={null} @media (prefers-color-scheme: dark) { ribaunt-widget { --ribaunt-background: #2d2d2d; --ribaunt-border-color: #555; --ribaunt-color: #ffffff; --ribaunt-checkbox-background: #444; --ribaunt-spinner-color: #ffffff; --ribaunt-spinner-background-color: #333; --ribaunt-logo-color: #cccccc; } } ``` ### Using a CSS class If your app has its own dark-mode toggle that adds a class to a parent element (such as ``), you can scope the overrides to that class: ```css theme={null} .dark ribaunt-widget { --ribaunt-background: #111; --ribaunt-color: #eee; } ``` ## Custom dimensions You can resize the widget to fit your form layout by overriding the dimension variables. The example below creates a `.large` variant: ```css theme={null} ribaunt-widget.large { --ribaunt-widget-width: 300px; --ribaunt-widget-height: 72px; --ribaunt-checkbox-size: 32px; } ``` 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 `
` just to apply spacing or shadows.