Bulma-Gomponents provides predefined modifier variables for all colors available in Bulma. These modifiers names (corresponding to Bulma classes) are formatted as:
b.[Target][Color][Variant][Invert], where:
Target... | means... |
|---|
Text | Set text color |
Background | Set background color |
| No target | Set component color - it should work on b.Button*, b.Icon, b.IconText, fa.FA, fa.Icon, fa.Li, b.Notification, b.Progress, b.ProgressIndeterminate, b.TCell, b.Tag, b.Message, b.Navbar, b.Panel, b.Help, b.Input*, b.Textarea, b.Select, b.File and b.Hero. Its use on icons and icon-related elements is specific to Bulma-Gomponents which transforms the color to the text-color equivalent for you. |
Color... | means... |
|---|
White, Black, Dark, Light, Text, Link, Primary, Info, Success, Warning, Danger, BlackBis, BlackTer, GreyDarker, GreyDark, Grey, GreyLight, GreyLighter, WhiteTer or WhiteBis. | Set the base color |
Variant... | means... |
|---|
| No variant | The base color |
00, 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95 or 100 | The corresponding shade |
Light, Dark, Soft, Bold or OnScheme | The corresponding variant |
Invert... | means... |
|---|
| No invert | The base color |
Invert | Invert the color |
Examples:
| Example | Color |
|---|
b.Primary | Primary color for a component or element which supports colors |
b.TextSuccess60 | Success color with 60% opacity on the text |
b.BackgroundDangerLight | Danger color in its light variant on the background |
b.BackgroundInfo, b.TextInfoInvert | Info color on the background and a decent-looking color for the text |
You can also inherit the color, or use the current one:
| Class | Value |
|---|
b.TextCurrent | currentColor |
b.TextInherit | inherit |
b.BackgroundCurrent | currentColor |
b.BackgroundInherit | inherit |
11 main colors
Bulma provides 4 base white/black colors and 7 primary colors, with "inverted" equivalents (which will look decent on the primary color):
| Color | Sample |
|---|
White | |
Black | |
Light | |
Dark | |
Text | |
Link | |
Primary | |
Info | |
Success | |
Warning | |
Danger | |
The 7 primary colors also have the following variants, which you can check in the color palette below:
Light | The primary color at 90% lightness |
Dark | The primary color at 20% lightness |
Soft | Light in light mode, dark in dark mode |
Bold | Dark in light mode, light in dark mode |