secondary
Bulma ships five colour palettes — primary, link, info, success,
warning, danger — but no secondary. This library adds a secondary
palette to every theme it publishes: a standard extension colour that sits
alongside primary as a second brand tone.
Because secondary is registered into Bulma's own colour map, it behaves
exactly like a built-in palette — the same class names, helpers, and custom
properties are generated for it.
What you can use
Every theme's theme.min.css exposes the full secondary surface:
- Component modifiers —
.is-secondaryon the components that take a colour modifier:.button,.tag,.notification,.message,.tablerows,.panel,.progress,.input,.select, and the rest. - Colour helpers —
.has-text-secondaryand.has-background-secondary(plus the-light/-dark/-soft/-boldvariants Bulma derives). - Custom properties —
--bulma-secondary,--bulma-secondary-h/-s/-l,--bulma-secondary-invert, and the derived shade tokens, for use in your own CSS.
<button class="button is-secondary">Secondary</button>
<span class="tag is-secondary">Secondary</span>
<p class="has-text-secondary">Secondary text</p>
How the colour is chosen
secondary is a supporting tone to primary; its role is deliberately
open. Across the published themes it tends to be one of:
- an accent — a distinct second hue that complements the primary,
- a neutral — a grey used for lower-emphasis surfaces, or
- a fallback — equal to the primary, for themes that have no distinct supporting colour.
Each theme picks whichever reading fits its own design language, so the
secondary you get depends on the theme you load.
Customising it
The prebuilt theme.min.css is a drop-in. To change the secondary value,
build from the theme's SCSS source and override its tokens:
@use "…/<theme>/variables" as t with (
$secondary-h: 261,
$secondary-s: 44%,
$secondary-l: 70%,
);
:root {
@include t.variables;
}
$secondary-h / $secondary-s / $secondary-l set the base colour;
$secondary-invert-l (optional) pins the text colour drawn on top of a
secondary fill when the automatically chosen contrast is not what you want.