` or `

` ### Theme Sass Mixins ```scss // Generate [data-theme=X] and .theme-X selectors @include cv.bulma-theme($name: "my-theme") { // CSS variable declarations } // Wrap in @media (prefers-color-scheme: X) @include cv.system-theme($name: "dark") { // CSS variable declarations } ``` ### Key Theme Functions | Function | Description | |----------|-------------| | `register-vars()` | Batch CSS variable registration with prefix, accepts Sass maps | | `generate-on-scheme-colors()` | Creates color variants for all 7 colors with contrast | | `setup-theme()` | Redefines composite CSS variables after updating lightness values | ### Creating a Custom Theme ```scss @use "bulma/sass/utilities/css-variables" as cv; @include cv.bulma-theme($name: "sunrise") { --bulma-scheme-h: 35; --bulma-scheme-s: 20%; --bulma-scheme-main-l: 98%; --bulma-primary-h: 25; --bulma-primary-s: 100%; --bulma-primary-l: 55%; } ``` Activating: `` or `` --- ## Dark Mode ### Activation **Automatic** (system preference): ```css @media (prefers-color-scheme: dark) { /* applied automatically */ } ``` **Manual override** (takes precedence): ```html

Only this section is dark

Also dark

``` ### Complete Lightness Variables (Light vs Dark) | CSS Variable | Light | Dark | |-------------|-------|------| | `--bulma-scheme-main-l` | 100% | 11% | | `--bulma-scheme-main-bis-l` | 98% | 13% | | `--bulma-scheme-main-ter-l` | 98% | 15% | | `--bulma-background-l` | 96% | 14% | | `--bulma-border-weak-l` | 93% | 21% | | `--bulma-border-l` | 86% | 24% | | `--bulma-text-weak-l` | 48% | 53% | | `--bulma-text-l` | 29% | 71% | | `--bulma-text-strong-l` | 21% | 93% | | `--bulma-text-title-l` | 14% | 100% | | `--bulma-hover-background-l-delta` | 5% | 5% | | `--bulma-active-background-l-delta` | 10% | 10% | | `--bulma-hover-border-l-delta` | 10% | 10% | | `--bulma-active-border-l-delta` | 20% | 20% | | `--bulma-hover-color-l-delta` | 5% | 5% | | `--bulma-active-color-l-delta` | 10% | 10% | ### JavaScript Toggle ```js document.getElementById('themeToggle').addEventListener('click', () => { const html = document.documentElement; const isDark = html.dataset.theme === 'dark'; html.dataset.theme = isDark ? 'light' : 'dark'; }); ``` --- ## Color Palettes Bulma generates extensive CSS variables for 7 primary colors: `text`, `link`, `primary`, `info`, `success`, `warning`, `danger`. ### Variables Per Color (using `primary` as example) **Base:** - `--bulma-primary` — base color - `--bulma-primary-base` — equals base - `--bulma-primary-rgb` — for custom RGBA: `rgba(var(--bulma-primary-rgb), 0.5)` - `--bulma-primary-h` — hue - `--bulma-primary-s` — saturation - `--bulma-primary-l` — lightness **Tonal Variants:** - `--bulma-primary-invert` - `--bulma-primary-light` - `--bulma-primary-light-invert` - `--bulma-primary-dark` - `--bulma-primary-dark-invert` - `--bulma-primary-soft` - `--bulma-primary-soft-invert` - `--bulma-primary-bold` - `--bulma-primary-bold-invert` - `--bulma-primary-on-scheme` **21 Lightness Shades (0–100%, step 5):** - `--bulma-primary-00` through `--bulma-primary-100` - Each has `-invert` counterpart: `--bulma-primary-00-invert` through `--bulma-primary-100-invert` - Each has lightness variable: `--bulma-primary-00-l` through `--bulma-primary-100-l` **HSL Construction:** ```css --bulma-primary-75: hsla( var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-l), 1 ); ``` ### Total Variables Per Color ~70+ CSS variables per color = ~490+ color CSS variables total ### CSS Helper Classes For every color and variant: - `has-text-{color}` / `has-background-{color}` - `has-text-{color}-light` / `has-background-{color}-light` - `has-text-{color}-dark` / `has-background-{color}-dark` - `has-text-{color}-soft` / `has-background-{color}-soft` - `has-text-{color}-bold` / `has-background-{color}-bold` - `has-text-{color}-on-scheme` / `has-background-{color}-on-scheme` - `has-text-{color}-00` through `has-text-{color}-100` - `has-background-{color}-00` through `has-background-{color}-100` - All shade classes have `-invert` counterparts ### Light/Dark Behavior - **Soft** colors = light backgrounds in light mode, dark in dark mode - **Bold** colors = dark text in light mode, light in dark mode - They swap automatically when theme changes --- ## Skeletons Loading placeholder components for use while content is loading. ### CSS Variables | Variable | Default | |----------|---------| | `--bulma-skeleton-background` | `var(--bulma-border)` | | `--bulma-skeleton-radius` | `var(--bulma-radius-small)` | | `--bulma-skeleton-block-min-height` | `4.5em` | | `--bulma-skeleton-lines-gap` | `0.75em` | | `--bulma-skeleton-line-height` | `0.75em` | ### Standalone Elements **Skeleton Block** — rectangular placeholder: ```html

``` **Skeleton Lines** — multiple line placeholders: ```html

``` ### Modifier Classes **`is-skeleton`** — transforms an entire component into loading state: ```html Tag

Title

``` **`has-skeleton`** — applies skeleton only to content portion: ```html

Title

``` ### Supported Components | Component | `is-skeleton` | `has-skeleton` | |-----------|:---:|:---:| | Button | yes | — | | Icon | yes | — | | Image | yes (all sizes) | — | | Input | yes | — | | Textarea | yes | — | | Notification | yes | — | | Tag | yes (all colors) | — | | Title | yes | yes | | Subtitle | yes | yes | | Media Object | yes (on children) | — | ### Animation Skeletons use CSS keyframes with a pulsating effect. Duration, size, and colors are configurable via CSS variables. ### Example — Card Skeleton ```html

```