@thebase/ui
Version:
CDN-installable Owl and Bootstrap 5 UI component library.
56 lines (39 loc) • 3.41 kB
Markdown
Set the theme on `html` or a subtree:
```html
<html b-theme="dark">
```
At runtime:
```js
BaseUI.theme.set("dark");
BaseUI.theme.set({ primary: "#0057d8", radius: "0.5rem" });
```
BaseUI maps semantic tokens such as `--b-background`, `--b-primary`, `--b-border`, and `--b-radius` into Bootstrap 5 variables. Radius tokens are sourced from the shorter public alias family `--base-radius`, `--base-radius-sm`, `--base-radius-md`, `--base-radius-lg`, `--base-radius-xl`, `--base-radius-2xl`, `--base-radius-3xl`, `--base-radius-4xl`, and `--base-radius-full`, then mirrored to `--b-radius*` for component CSS.
For a reusable theme toggle with persistence, URL override, button-label sync, and iframe preview sync, import the theme helper:
```html
<script type="importmap">
{
"imports": {
"@base/theme": "https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.esm.js"
}
}
</script>
<script type="module">
import { createThemeController } from "@base/theme";
const theme = createThemeController({
storageKey: "my-app-theme",
toggleSelector: "[b-theme-toggle]",
labelSelector: "[b-theme-label]"
});
theme.init();
</script>
```
`https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@0.0.4`) instead of `@latest` for production. Npm/bundler consumers can import the same API from `@thebase/ui`.
For a ready-made icon button, use the BaseUI component instead of wiring your own click handler:
```html
<button b-ui="theme-button" b-att-variant="outline" b-att-storage-key="my-app-theme" type="button"></button>
```
The documentation and example pages use the same theme infrastructure. Owl example modules import `createThemeController` from `@base/theme`; static chrome relies on `b-ui="theme-button"`, which uses the helper internally, so one selected theme is persisted across components, docs, chart galleries, block viewers, and same-origin block preview iframes. Theme changes dispatch `baseui:theme-change` on `document` with `{ theme }` in `event.detail`.
The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com) Base UI neutral theme: black/neutral primary on white in light mode, neutral-900/50 foreground-background inversion in dark mode, neutral `--b-secondary`/`--b-muted`/`--b-accent` surfaces, `--base-radius: var(--radius, 0.625rem)`, and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--b-radius-sm|md|lg|xl`) and shadow scale (`--b-shadow-sm|md|lg`) for consistent elevation across popovers, menus, dialogs, and toasts. BaseUI reads an existing upstream `--radius` value when present, but it does not redefine `--radius` back to `--b-radius`; that one-way bridge avoids CSS custom-property cycles. `--b-card`/`--b-popover` alias `--b-surface` for shadcn-token-name parity.
Because BaseUI ships Bootstrap's stock precompiled CSS, most `.btn-*`/badge colors are not driven by `--bs-*` variables directly — `src/styles/baseui.css` re-points the `.btn-primary`/`.btn-secondary`/`.btn-danger`/`.btn-outline-secondary`/`.btn-light` variants at BaseUI tokens so `BaseUI.theme.set(...)` overrides actually render. Badges use their own `bu-badge-*` classes (`src/components/badge/badge.css`) instead of Bootstrap's `text-bg-*`, which hardcode non-overridable colors.