Start Here

• Overview
• Installation
• Alternative Versions
• Syntax
• Modularity
• Responsiveness
• Migrating to v1

Features

• CSS Variables
• Themes
• Dark Mode
• Color Palettes
• Skeletons

Sass Tools

• Mixins
• Responsive mixins
• Form Control mixins
• Extends

Customization

• Concepts
• With Sass
• With Modular Sass
• With CSS Variables
• List of Sass variables

CSS Library

• Elements
  • Block
  • Box
  • Button
  • Content
  • Delete
  • Icon
  • Image
  • Notification
  • Progress bars
  • Table
  • Tag
  • Title
• Components
  • Breadcrumb
  • Card
  • Dropdown
  • Menu
  • Message
  • Modal
  • Navbar
  • Pagination
  • Panel
  • Tabs
• Form
  • General
  • Input
  • Textarea
  • Select
  • Checkbox
  • Radio
  • File
• Columns
  • Basics
  • Sizes
  • Responsiveness
  • Nesting
  • Gap
  • Options
• Grid
  • Smart Grid
  • Fixed Grid
  • Grid Cells
  • Playground
• Layout
  • Container
  • Hero
  • Section
  • Level
  • Media Object
  • Footer

CSS Helpers

• Color
• Color Palette
• Spacing
• Typography
• Visibility
• Flexbox
• Other

In Bulma, a theme is a collection of CSS variables.

Bulma comes with 2 themes:

• light.scss (required)
• dark.scss (optional)

The default themes

Because Bulma requires a default value for all CSS variables, it comes with a default light theme located at /sass/themes/light.scss.

It also comes with a dark theme located at /sass/themes/dark.scss.

The file /sass/themes/_index.scss takes care of including both themes, each in two ways:

• with the @media (prefers-color-scheme: $name) media query
• with an HTML attribute [data-theme=$name] and CSS class .theme-$name selector

The only difference is that the light theme is also defined at the top-level: :root (equivalent to the html element, the ancestor of all HTML elements on a webpage). This ensures that a default value is set for all CSS variables.

The CSS output of that theme resembles the following:

:root {
 /* CSS Variables */
}

@media (prefers-color-scheme: light) {
 :root {
 /* CSS Variables */
 }
}

@media (prefers-color-scheme: dark) {
 :root {
 /* CSS Variables */
 }
}

[data-theme=light],
.theme-light {
 /* CSS Variables */
}

[data-theme=dark],
.theme-dark {
 /* CSS Variables */
}

Creating a custom theme

Creating a theme is essentially setting your own CSS variables. A custom theme requires:

• a name like sunrise
• a scope like :root, [data-theme=sunrise], .theme-sunrise or all three
• a set of CSS variables and their new value

Customizing in the browser

If you set your CSS variables under the :root scope, you are overwriting Bulma’s default theme. This can be done by with Sass or CSS.

To test out the CSS method, simply follow these steps:

Open your browser inspector

Select the html element

Insert a new value for the --bulma-link-h variable (the hue of the link color)

Notice how the CSS Helpers section in the side menu changes color