# Technical Documentation: jgthms/bulma

> ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/jgthms/bulma)

### Overview (README.md)

# [Bulma](https://bulma.io)

Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).


[][npm-link]
[][npm-link]
[](https://www.jsdelivr.com/package/npm/bulma)
[![Awesome][awesome-badge]][awesome-link]
[](https://gitter.im/jgthms/bulma)
[](https://travis-ci.org/jgthms/bulma)

<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600"></a>

## Quick install

Bulma is constantly in development! Try it out now:

### NPM

```sh
npm install bulma
```

**or**

### Yarn

```sh
yarn add bulma
```

### Bower

```sh
bower install bulma
```

### Import

After installation, you can import the CSS file into your project using this snippet:

```sh
@import 'bulma/css/bulma.css'
```

### CDN

[https://www.jsdelivr.com/package/npm/bulma](https://www.jsdelivr.com/package/npm/bulma)

Feel free to raise an issue or submit a pull request.

## CSS only

Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/main/css/bulma.css)

You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/customize/#docsNav).

There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

## Browser Support

Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of:

- Chrome
- Edge
- Firefox
- Opera
- Safari

Internet Explorer (10+) is only partially supported.

## Documentation

The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool.

Browse the [online documentation here.](https://bulma.io/documentation/start/overview/)

## Related projects

| Project                                                                              | Description                                                                                                      |
| ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors)   | Adds support for attribute-based selectors                                                                       |
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails)                      | Integrates Bulma with the rails asset pipeline                                                                   |
| [BulmaRazor](https://github.com/loogn/bulmarazor)                                    | A lightweight component library based on Bulma and Blazor.                                                       |
| [Vue Admin (dead)](https://github.com/vue-bulma/vue-admin)                           | Vue Admin framework powered by Bulma                                                                             |
| [Bulmaswatch](https://github.com/jenil/bulmaswatch)                                  | Free themes for Bulma                                                                                            |
| [Goldfish (read-only)](https://github.com/Caiyeon/goldfish)                          | Vault UI with Bulma, Golang, and Vue Admin                                                                       |
| [ember-bulma](https://github.com/open-tux/ember-bulma)                               | Ember addon providing a collection of UI components for Bulma                                                    |
| [Bloomer](https://bloomer.js.org)                                                    | A set of React components for Bulma                                                                              |
| [React-bulma](https://github.com/kulakowka/react-bulma)                              | React.js components for Bulma                                                                                    |
| [Buefy](https://buefy.org/)                                                          | Lightweight UI components for Vue.js based on Bulma                                                              |
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components)               | Bulma components for Vue.js with straightforward syntax                                                          |
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS)                                      | Javascript integration for Bulma. Written in ES6 with a data-\* API                                              |
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx)                          | A set of modal window effects with CSS transitions and animations for Bulma                                      |
| [Bulma Stylus](https://github.com/groenroos/bulma-stylus)                            | Up-to-date 1:1 translation to Stylus                                                                             |
| [Bulma.styl (read-only)](https://github.com/log1x/bulma.styl)                        | 1:1 Stylus translation of Bulma 0.6.11                                                                           |
| [elm-bulma](https://github.com/surprisetalk/elm-bulma)                               | Bulma + Elm                                                                                                      |
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes)                     | Bulma classes prepared for usage with Elm                                                                        |
| [Bulma Customizer](https://bulma-customizer.bstash.io/)                              | Bulma Customizer &#8211; Create your own **bespoke** Bulma build                                                 |
| [Fulma](https://fulma.github.io/Fulma/)                                              | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react)                            |
| [Laravel Enso](https://github.com/laravel-enso/enso)                                 | SPA Admin Panel built with Bulma, VueJS and Laravel                                                              |
| [Django Bulma](https://github.com/timonweb/django-bulma)                             | Integrates Bulma with Django                                                                                     |
| [Bulma Templates](https://github.com/dansup/bulma-templates)                         | Free Templates for Bulma                                                                                         |
| [React Bulma Components](https://github.com/couds/react-bulma-components)            | Another React wrap on React for Bulma.io                                                                         |
| [purescript-bulma](https://github.com/sectore/purescript-bulma)                      | PureScript bindings for Bulma                                                                                    |
| [Vue Datatable](https://github.com/laravel-enso/vuedatatable)                        | Bulma themed datatable based on Vue, Laravel & JSON templates                                                    |
| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/)                              | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System                                       |
| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt)                               | Automatically add Bulma classes to HTML files                                                                    |
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react)  | Bulma pagination as a react component                                                                            |
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers)                            | Functional / Atomic CSS classes for Bulma                                                                        |
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook)            | Bulma swatches as a react hook and a component                                                                   |
| [BulmaWP (read-only)](https://github.com/tomhrtly/BulmaWP)                           | Starter WordPress theme for Bulma                                                                                |
| [Ralma](https://github.com/aldi/ralma)                                               | Stateless Ractive.js Components for Bulma                                                                        |
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma)         | Lightweight integration of Bulma and Bulma-Extensions for your Django app                                        |
| [rbx](https://dfee.github.io/rbx)                                                    | Comprehensive React UI Framework written in TypeScript                                                           |
| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates)           | Free real-world Templates built with Bulma                                                                       |
| [Trunx](https://github.com/fibo/trunx)                                               | Super Saiyan React components, son of awesome Bulma |
| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma)  | Web Components library inspired by Bulma and Bulma-extensions                                                    |
| [Drulma](https://www.drupal.org/project/drulma)                                      | Drupal theme for Bulma.                                                                                          |
| [Bulrush](https://github.com/textbook/bulrush)                                       | A Bulma-based Python Pelican blog theme                                                                          |
| [Bulma Variable Export](https://github.com/service-paradis/bulma-variables-export)   | Access Bulma Variables in Javascript/Typescript in project using Webpack                                         |
| [Bulmil](https://github.com/gomah/bulmil)                                            | An agnostic UI components library based on Web Components, made with Bulma & Stencil.                            |
| [Svelte Bulma Components](https://github.com/elcobvg/svelte-bulma-components)        | Library of UI components to be used in [Svelte.js](https://svelte.technology/) or standalone.                    |
| [Bulma Nunjucks Starterkit](https://github.com/benninkcorien/nunjucks-starter-kit)   | Starterkit for Nunjucks with Bulma.                                                                              |
| [Bulma-Social](https://github.com/aldi/bulma-social)                                 | Social Buttons and Colors for Bulma                                                                              |
| [Divjoy](https://divjoy.com/?kit=bulma)                                              | React codebase generator with Bulma templates                                                                    |
| [Blazorise](https://github.com/Megabit/Blazorise)                                    | Blazor component library with the support for Bulma CSS framework                                                |
| [Oruga-Bulma](https://github.com/oruga-ui/theme-bulma)                               | Bulma theme for [Oruga UI](https://oruga.io)                                                                     |
| [@bulvar/bulma](https://github.com/daniil4udo/bulvar/tree/master/packages/bulma)     | Bulma with [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) support |
| [@angular-bulma](https://quinnjr.github.io/angular-bulma)                            | [Angular](https://angular.io/) directives and components to use in your Bulma projects                           |
| [Bulma CSS Class Completion](https://github.com/eliutdev/bulma-css-class-completion) | CSS class name completion for the HTML class attribute based on Bulma CSS classes.                               |
| [Crispy-Bulma](https://github.com/ckrybus/crispy-bulma)                              | Bulma template pack for django-crispy-forms                                                                      |
| [Manifest](https://manifest.build)                                                   | Manifest is a lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK             |
| [Reactive Bulma](https://github.com/NicolasOmar/reactive-bulma)                                                             | A component library based on React, Bulma, Typescript and Rollup         |

<p>Browser testing via<br /><a href="https://www.lambdatest.com/" target="_blank"><img src="https://bulma.io/assets/images/amis/lambdatest-logo.png" width="168" height="40" /></a></p>

## Copyright and license 

Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/main/LICENSE).

[npm-link]: https://www.npmjs.com/package/bulma
[awesome-link]: https://github.com/awesome-css-group/awesome-css
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

---

### README (`docs/README.md`)

## Building the documentation

The documentation HTML is produced with the Ruby-based `jekyll` tool.

1. Make sure Ruby 2.x is installed.
2. `gem install jekyll` if `jekyll` is not already installed.

> **Note**: If you are an ```Ubuntu user```, make sure ruby2.x-dev is installed.

## Viewing the documentation locally

To view the documentation on your system locally:

### Setup

1. `cd` into `docs/` directory
1. Copy the config file, `cp _config.yml _config.local.yml`
1. Edit `_config.local.yml` and change the `url:` value to `http://localhost:4000`. This local config file will be ignored by git.

### Run Jekyll

1. In a separate shell session, `cd` to the `docs/` directory, and do:
```
jekyll serve --incremental --config _config.local.yml
```

This will start an HTTP server at `http://localhost:4000/` that serves the docs built in the `_site` directory; and anytime the docs are rebuilt by you, it will serve the docs site on the fly. You can also add the `--open-url` option (or its alias `--o`) to automatically open the server URL in your default browser when it's ready.

In your main shell session where you develop, if you change anything in `docs/` the jekyll server will rebuild those on the fly. But if you change anything about the Bulma SASS or CSS, you need to do `npm run start` to build the docs' CSS before you will see it in the browser. The process running `jekyll serve` will pick up the new CSS automatically.

---

###  React Bulma Customizer README (`docs/_react/bulma-customizer/README.md`)

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

---

###  Posts 2016 02 09 Blog Launched New Responsive Columns New Helpers (`docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md`)

---
layout: post
title: "Blog launched, new responsive columns, new helpers"
introduction: "Stay updated with everything that's coming up with Bulma"
long_introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
color: "danger"
name: "Launch!"
icon: "rocket"
---

First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes.

### Columns on mobile too

By default, columns are only activated on **tablet** and **desktop**. If you want to use columns on mobile _too_, add the `is-mobile` modifier on the `columns` container.

{% highlight html %}
<div class="columns is-mobile">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  
</div>
{% endhighlight %}

### Responsive columns

You can now apply different **column size** for each **breakpoint**.

For example, let's say you want a column to take half the width on mobile, a third on tablet, and a quarter on desktop:

<div class="columns is-mobile">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
    <p class="notification is-info">
      <code>is-half-mobile</code><br>
      <code>is-one-third-tablet</code><br>
      <code>is-one-quarter-desktop</code>
    </p>
  </div>
  <div class="column">
    <p class="notification is-success">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning">1</p>
  </div>
  <div class="column">
    <p class="notification is-success">1</p>
  </div>
  <div class="column">
    <p class="notification is-warning">1</p>
  </div>
</div>

{% highlight html %}
<div class="columns is-mobile">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop"></div>
  
</div>
{% endhighlight %}

<div class="message is-info">
  <div class="message-header">
    Info
  </div>
  <div class="message-body">
    If you use <strong>mobile</strong> modifiers on single <code>column</code> elements, make sure to use the <code>is-mobile</code> modifier on the <code>columns</code> container.
  </div>
</div>

### Multiline columns

By default, if you want to start a new **row**, you just need to close a `columns` container and open a new one.

But you can also add the `is-multiline` **modifier** on the `columns` container, and use **column size** modifiers (like `is-half` or `is-3`) to define size on multiple rows within the _same_ container.

<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter">
    <p class="notification is-info"><code>is-one-quarter</code></p>
  </div>
  <div class="column is-one-quarter">
    <p class="notification is-success"><code>is-one-quarter</code></p>
  </div>
  <div class="column is-one-quarter">
    <p class="notification is-warning"><code>is-one-quarter</code></p>
  </div>
  <div class="column is-one-quarter">
    <p class="notification is-danger"><code>is-one-quarter</code></p>
  </div>
  <div class="column is-half">
    <p class="notification is-info"><code>is-half</code></p>
  </div>
  <div class="column is-one-quarter">
    <p class="notification is-success"><code>is-one-quarter</code></p>
  </div>
  <div class="column is-one-quarter">
    <p class="notification is-warning"><code>is-one-quarter</code></p>
  </div>
  <div class="column is-one-quarter">
    <p class="notification is-danger"><code>is-one-quarter</code></p>
  </div>
  <div class="column">
    <p class="notification is-info">Auto</p>
  </div>
</div>

{% highlight html %}
<div class="columns is-multiline is-mobile">
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-half"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column is-one-quarter"></div>
  <div class="column"></div>
</div>
{% endhighlight %}

### Helpers section

While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/helpers/)!

---

###  Posts 2016 04 11 Metro Ui Css Grid With Bulma Tiles (`docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md`)

---
layout: post
title: "Metro UI CSS grid with Bulma tiles"
introduction: "Build a **Metro-UI-like grid in CSS** with the new `tile` element"
long_introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
color: "info"
name: "Metro UI"
icon: "th-large"
---

Have you ever wanted to build a **Metro-UI-like grid in CSS**?
Thanks to Flexbox and the new [Bulma tiles](https://bulma.io/documentation/layout/tiles/), you now can! And it only requires 1 HTML element: the `tile` element.

[](https://bulma.io/documentation/layout/tiles/)

Check out the [documentation](https://bulma.io/documentation/layout/tiles/)!

---

###  Posts 2017 03 10 New Field Element (`docs/_posts/2017-03-10-new-field-element.md`)

---
layout: post
title: "New field element (for better controls)"
published: true
introduction: "A new versatile container for form controls"
long_introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
color: "success"
name: "Field element"
icon: "square"
icon_regular: true
---

**TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**

Since the beginning, the `.control` has been a very **versatile** element that allowed:

* to **space** controls vertically
* to include an **icon** alongside inputs, buttons, textareas...
* to append a **loading spinner**
* to create **horizontal forms**
* to create **control addons**
* to create **control groups**

## The problem

The `.control` element acted as both a _block_ container (for spacing, for other controls in a horizontal form), but also an _inline_ container (for adding an icon, a loader, an addon, and grouping).
It led to issues where you couldn't:

* add a help text horizontally
* add multiple icons or loaders in a group of controls
* add a different icon on addons

## The solution

The new `.field` element becomes the **block** container for `.control` elements. As a result, it inherits the `.has-addons`, `.is-grouped`, and `.is-horizontal` modifiers.

Furthermore `.control` element can only contain a `.button`, `.input`, `.select`, or `.textarea`, and eventually a `.icon`. It can **no longer** contain a `.help` element or other `.control`.

But it allows more elaborate designs.

{% highlight sass %}
// Before
.control
  .has-addons
  .has-icon
  .is-grouped
  .is-horizontal
  .is-loading

// After
.control
  .has-icon
  .is-loading
.field
  .has-addons
  .is-grouped
  .is-horizontal
.field-label
.field-body
{% endhighlight %}

{% highlight html %}

<label class="label">Username</label>
<p class="control has-icon has-icon-right">
  <input class="input is-success" type="text" placeholder="Text input" value="bulma">
  <span class="icon is-small">
    <i class="fas fa-check"></i>
  </span>
  <span class="help is-success">This username is available</span>
</p>


<div class="field">
  <label class="label">Username</label>
  <p class="control has-icon has-icon-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
  </p>
  <p class="help is-success">This username is available</p>
</div>
{% endhighlight %}

## Examples

Addons with multiple icons or states.

<div class="field is-grouped">
  <p class="control is-expanded has-icon">
    <input class="input is-success" type="text" placeholder="Username" value="alexsmith">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
  </p>
  <p class="control is-expanded has-icon">
    <input class="input is-warning" type="email" placeholder="Email" value="alex@smith.com">
    <span class="icon is-small">
      <i class="fas fa-exclamation-triangle"></i>
    </span>
  </p>
  <p class="control is-expanded is-loading">
    <input class="input" type="email" placeholder="Name">
  </p>
</div>

Horizontal form with help text

<div class="field is-horizontal">
  <div class="field-label">
    <label class="label">From</label>
  </div>
  <div class="field-body">
    <div class="field is-grouped">
      <p class="control is-expanded">
        <input class="input" type="text" placeholder="Name">
      </p>
    </div>
    <div class="field">
      <p class="control is-expanded has-icon has-icon-right">
        <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
        <span class="icon is-small">
          <i class="fas fa-check"></i>
        </span>
      </p>
      <p class="help is-success">This email is correct</p>
    </div>
  </div>
</div>

---

###  Posts 2017 07 24 Access Previous Bulma Versions (`docs/_posts/2017-07-24-access-previous-bulma-versions.md`)

---
layout: post
title: "Access previous Bulma versions"
introduction: "It is now possible to **access previous versions** of Bulma"
long_introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)"
color: "primary"
name: "Versions"
icon: "undo"
---

It is now possible to **access previous versions** of Bulma. Just head towards: [http://versions.bulma.io/](http://versions.bulma.io/)

While only version [0.4.4](http://versions.bulma.io/0.4.4/) is accessible now, each **new release** will remain available forever.

---

###  Posts 2017 08 01 Bulma Bootstrap Comparison (`docs/_posts/2017-08-01-bulma-bootstrap-comparison.md`)

---
layout: post
title: "Bulma / Bootstrap comparison"
introduction: "New page \"Alternative to Bootstrap\""
long_introduction: "If you're unsure _how_ or _why_ you should try out Bulma if you're familiar to Bootstrap, the new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) tries to help you answer questions you might have."
color: "bootstrap"
name: "Bulma over Bootstrap?"
icon: "heart"
---

Bulma has always been a Bootstrap fan, inspired by its goal and purpose.

Some users ask why they should use Bulma over Bootstrap, and there is **no definite answer**, because while both CSS frameworks share _similarities_, they also **differ** in many ways.

The new page [\"Alternative to Bootstrap\"](https://bulma.io/alternative-to-bootstrap/) draws a **feature comparison** to help undecided users choose the right tool for their web design needs, which can be either Bulma or Bootstrap.

---

###  Posts 2017 08 03 List Of Tags (`docs/_posts/2017-08-03-list-of-tags.md`)

---
layout: post
title: "New feature: list of tags"
introduction: "What's better than one tag? Multiple tags!"
color: "success"
name: "List of tags"
icon: "tag"
---

The [tag](/documentation/elements/tag/) is a small but useful element that can be used in many contexts, to **enhance** the meaning of the text it's attached to.

A tag rarely comes on its own though, so Bulma now supports [list of tags](/documentation/elements/tag/#list-of-tags). The same way you can [group controls](together), you can now **group tags together** to form a list that can span multiple lines.

<figure>
  <a href="{{ site.url }}/documentation/elements/tag/#list-of-tags">
    <img src="{{ site.url }}/images/blog/list-of-tags.png" alt="List of tags in CSS" width="660" height="401">
  </a>
</figure>

As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!

---

###  Posts 2017 10 09 Roses Are Red Links Are Blue (`docs/_posts/2017-10-09-roses-are-red-links-are-blue.md`)

---
layout: post
title: "Roses are red – Links are blue"
introduction: "What's better than one tag? Multiple tags!"
color: "link"
name: "Roses are red and links are blue"
icon: "link"
---

By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:

```sass
// Old styles
$link: $primary !default
```

But the _primary_ color is mostly used as the **brand** color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:

* the `$link` color defaults to `$blue`
* `$info` is using the new `$cyan` color
* `$link` has been added to the `$colors` map as well

```sass
// New styles
$link: $blue !default
$info: $cyan !default
```

<div class="message is-danger">
  <div class="message-header">
    Deprecation warning
  </div>
  <div class="message-body">
    <p>
      Because the modifier <code>is-link</code> for <strong>buttons</strong> already existed, it has been renamed to <code>is-text</code>.
    </p>
  </div>
</div>

As such, the following components are now **blue**:

* [breadcrumb](/documentation/components/breadcrumb/)
* [dropdown](/documentation/components/dropdown/)
* [navbar](/documentation/components/navbar/)
* [pagination](/documentation/components/pagination/)
* [tabs](/documentation/components/tabs/)
* [menu](/documentation/components/menu/)
* [panel](/documentation/components/panel/)

All Bulma elements and components that support **color** modifiers now support the `.is-link` color:

```html
<div class="notification is-link">
  Link notification.
</div>

<div class="notification is-info">
  Info notification.
</div>

<button class="button is-link">
  Link button
</button>

<button class="button is-info">
  Info button
</button>
```

<div class="notification is-link">
  Link notification.
</div>

<div class="notification is-info">
  Info notification.
</div>

<button class="button is-link">
  Link button
</button>

<button class="button is-info">
  Info button
</button>

If you want to use the `$primary` color for your links, just **customize** your Bulma setup by including these rules:

```sass
$link: $primary !default
$link-invert: $primary-invert !default
$link-focus-border: $primary !default
```

---

###  Posts 2017 10 22 List Of Buttons (`docs/_posts/2017-10-22-list-of-buttons.md`)

---
layout: post
title: "New feature: list of buttons"
introduction: "What's better than one button? Multiple buttons!"
color: "danger"
name: "List of buttons"
icon: "hand-pointer"
---

Similarly to the [list of tags](/2017/08/03/list-of-tags/) launched a few months ago, the [button](/documentation/elements/button/) has its own **list of buttons**:

<figure>
  <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">
    <img src="{{ site.url }}/images/blog/list-of-buttons.png" alt="List of buttons in CSS" width="660" height="550">
  </a>
</figure>

Although you could already **group** buttons by using [from groups](/documentation/form/general/#form-group), this new `buttons` class makes everything easier.

---

###  Posts 2017 11 01 Fixed Navbar (`docs/_posts/2017-11-01-fixed-navbar.md`)

---
layout: post
title: "New feature: fixed navbar"
introduction: "Fix your navbar at the top or bottom"
color: "success"
name: "Fixed navbar"
icon: "map-pin"
---

You can now fix a [navbar](/documentation/components/navbar/#fixed-navbar) to the **top** or the **bottom**:

<figure>
  <video width="602.5" height="360" autoplay muted loop>
    <source src="{{ site.url }}/images/blog/fixed-navbar.mp4" type="video/mp4">
  </video>
</figure>

[Check it out!](/documentation/components/navbar/#fixed-navbar)

As a added **bonus**, the bottom navbar required a new **dropup** feature which has also been implemented!

<figure>
  <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">
    <img src="{{ site.url }}/images/blog/dropup.png" alt="Navbar dropup" width="660" height="239">
  </a>
</figure>

---

###  Posts 2017 11 14 Bulma Is On Patreon (`docs/_posts/2017-11-14-bulma-is-on-patreon.md`)

---
title: "Bulma is on Patreon!"
layout: post
introduction: "Support Bulma's future"
color: "patreon"
name: "Bulma on Patreon"
icon: "patreon"
icon_brand: true
---

**Bulma** has now its own [Patreon page](https://www.patreon.com/jgthms):

<figure>
  <a href="https://www.patreon.com/jgthms" target="_blank">
    <img src="{{ site.url }}/images/blog/patreon-homepage.png" alt="Bulma Patreon homepage" width="840" height="525">
  </a>
</figure>

This will allow people to easily support Bulma, and ensure its future development.

---

###  Posts 2018 01 18 Bulma Supports Font Awesome 5 (`docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md`)

---
title: "Bulma supports Font Awesome&nbsp;5"
layout: post
introduction: "No change required!"
color: "info"
name: "Font Awesome 5"
icon: "font-awesome"
icon_brand: true
---

Bulma is **icon library agnostic**: this means that you can use _any_ icon font library (like Font Awesome 4 or 5, Material Design Icons, Ionicons…) with Bulma's `icon` class.

As a result, **Bulma already supports Font Awesome 5**! 😃

Since the `icon` element is simply a **container** for any icon font *allowing the layout to reserve a spot for the icon while it loads), it supports any size of Font Awesome 4 and 5.

For the sake of being in sync with Bulma users, I've recently updated the website to actually use Font Awesome 5! The process of **migrating** from Font Awesome 4 to 5 is straightforward. You simply need to:

1. include Font Awesome 5 instead, [using the script tag](https://fontawesome.com/get-started)
2. replace `fa` classes with their `fas` and `fab` equivalents

That's it!

Check out the [icon documentation](/documentation/elements/icon/).

---

###  Posts 2018 04 13 Website Redesign (`docs/_posts/2018-04-13-website-redesign.md`)

---
title: "Website redesign: clearer layout, easier navigation, better content, and much more!"
layout: post
introduction: "A brand new look"
color: "expo"
name: "Website redesign"
icon: "star"
featured: true
image: "9-OCsKoyQlk"
alt: "Swimming pool"
---

The Bulma website has been widely redesigned! There's been a lot of work, to say the least:

<figure>
  <img src="{{ site.url }}/images/blog/v7/files.png" alt="files" width="312" height="37">
  <br>
  <img src="{{ site.url }}/images/blog/v7/diff.png" alt="diff" width="167" height="38">
</figure>

Just see for yourself!

<div class="columns">
  <div class="column">
    <p class="has-text-centered has-text-grey-light">Before</p>
    <a href="{{ site.url }}/images/blog/v7/before.png">
      <img src="{{ site.url }}/images/blog/v7/before.png" alt="v7 website" width="1400" height="1200">
    </a>
  </div>
  <div class="column">
    <p class="has-text-centered has-text-grey-light">After</p>
    <a href="{{ site.url }}/images/blog/v7/after.png">
      <img src="{{ site.url }}/images/blog/v7/after.png" alt="v7 website" width="1400" height="1200">
    </a>
  </div>
</div>

{% include docs/elements/anchor.html name="Navbar" %}

The **navbar** has been updated with a lighter markup and cleaner design:

<figure>
  <a href="{{ site.url }}/images/blog/v7/navbar.png">
    <img src="{{ site.url }}/images/blog/v7/navbar.png" alt="navbar" width="1080" height="84">
  </a>
</figure>

This doesn't affect the current navbars. There's actually a new modifier called `is-spaced` that was created for this new navbar. Documentation coming soon!

{% include docs/elements/anchor.html name="Customize example" %}

On the homepage, there's a new [**customization** section with a live example](/#customize):

<figure>
  <a href="{{ site.url }}/#customize">
    <img src="{{ site.url }}/images/blog/v7/customize.png" alt="customize" width="492" height="582">
  </a>
</figure>

{% include docs/elements/anchor.html name="Breadcrumb" %}

<figure>
  <a href="{{ site.url }}/images/blog/v7/breadcrumb.png">
    <img src="{{ site.url }}/images/blog/v7/breadcrumb.png" alt="breadcrumb" width="422" height="24">
  </a>
</figure>

A **breadcrumb** is now visible at the top of each page, to easily navigate up and down the hierarchy.

This has led to the creation of new **intermediate pages**:

- [documentation](/documentation)
- [documentation/modifiers](/documentation/modifiers)
- [documentation/columns](/documentation/columns)
- [documentation/layout](/documentation/layout)
- [documentation/form](/documentation/form)
- [documentation/elements](/documentation/elements)
- [documentation/components](/documentation/components)
- [more](/more)

{% include docs/elements/anchor.html name="Links" %}

These intermediate pages have new **link boxes** that help dive into each sub-category:

<figure>
  <a href="{{ site.url }}/images/blog/v7/links.png">
    <img src="{{ site.url }}/images/blog/v7/links.png" alt="footer links" width="664" height="468">
  </a>
</figure>

{% include docs/elements/anchor.html name="Previous/Next" %}

Next to the breadcrumb, you can easily navigate to the **sibling** pages with the **previous** and **next** links:

<figure>
  <a href="{{ site.url }}/images/blog/v7/prevnext.png">
    <img src="{{ site.url }}/images/blog/v7/prevnext.png" alt="prevnext buttons" width="48" height="24">
  </a>
</figure>

These links are also available at the bottom:

<figure>
  <a href="{{ site.url }}/images/blog/v7/prevnextbis.png">
    <img src="{{ site.url }}/images/blog/v7/prevnextbis.png" alt="prevnextbis buttons" width="664" height="58">
  </a>
</figure>

{% include docs/elements/anchor.html name="Categories" %}

There's a new **sidebar** including a navigation menu with all the categories and sub-categories:

<figure>
  <a href="{{ site.url }}/images/blog/v7/categories.png">
    <img src="{{ site.url }}/images/blog/v7/categories.png" alt="categories menu" width="256" height="397">
  </a>
</figure>

{% include docs/elements/anchor.html name="Scroll spy" %}

On some pages below the categories, you'll find a new menu called "On this page" which is actually a **scroll spy**:

<figure>
  <a href="{{ site.url }}/images/blog/v7/scrollspy.png">
    <img src="{{ site.url }}/images/blog/v7/scrollspy.png" alt="scrollspy menu" width="199" height="341">
  </a>
</figure>

{% include docs/elements/anchor.html name="Footer" %}

The footer has been redesigned as well. Among other things, there's a **sitemap** available:

<figure>
  <a href="{{ site.url }}/images/blog/v7/footer.png">
    <img src="{{ site.url }}/images/blog/v7/footer.png" alt="footer links" width="984" height="302">
  </a>
</figure>

{% include docs/elements/anchor.html name="Code" %}

The Bulma website is built with **Jekyll**. In the process of this redesign, the underlying code that helps maintain this website has been optimized and cleaned up as well.

This will help further updates to be easier.

---

###  Posts 2018 04 14 Migration To V070 (`docs/_posts/2018-04-14-migration-to-v070.md`)

---
title: "Migrating to v0.7.0"
layout: post
introduction: "What has changed"
color: "success"
name: "Migrating to v0.7.0"
icon: "angle-double-up"
---

A new major Bulma update is out: [v0.7.0](#)!

While this update is mainly focused on a massive [website redesign](/2018/04/13/website-redesign/), it also includes a few bug fixes, some new features, and some variable changes.

These variable changes are documented here, so you can edit or revert them if needed.

{% include docs/elements/anchor.html name="Updated default values" %}

{% for item in site.data.blog.migratingv070.updated %}

  <table class="table is-bordered">
    <tbody>
      <tr>
        <th class="is-light" colspan="3">
          File
          <code>{{ item.file }}</code>
        </th>
      </tr>
      <tr>
        <th>Variable</th>
        <th>From</th>
        <th>To</th>
      </tr>
      {% for change in item.changes %}
        <tr>
          <td>
            <code>{{ change.variable }}</code>
          </td>
          <td>
            <code>{{ change.from }}</code>
          </td>
          <td>
            <code>{{ change.to }}</code>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endfor %}

{% include docs/elements/anchor.html name="New variables" %}

{% for item in site.data.blog.migratingv070.new %}

  <table class="table is-bordered">
    <tbody>
      <tr>
        <th class="is-light" colspan="2">
          File
          <code>{{ item.file }}</code>
        </th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
      {% for newcomer in item.newcomers %}
        <tr>
          <td>
            <code>{{ newcomer.name }}</code>
          </td>
          <td>
            <code>{{ newcomer.value }}</code>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endfor %}

{% include docs/elements/anchor.html name="Removed variables" %}

<table class="table is-bordered">
  <thead>
    <tr>
      <th>File</th>
      <th>Removed</th>
      <th>Replaced with</th>
    </tr>
  </thead>
  <tbody>
    {% for item in site.data.blog.migratingv070.removed %}
      <tr>
        <td>
          <code>{{ item.file }}</code>
        </td>
        <td>
          <code>{{ item.before }}</code>
        </td>
        <td>
          {% for newcomer in item.after %}
            <code>{{ newcomer }}</code>
          {% endfor %}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

---

###  Posts 2018 06 20 Automatic Variables Documentation (`docs/_posts/2018-06-20-automatic-variables-documentation.md`)

---
title: "Automatic variables documentation"
layout: post
introduction: "Keeping the docs in sync"
color: "link"
name: "Automatic variables docs"
icon: "sync-alt"
---

Bulma is highly customizable because there are **415 Sass variables** across **28 files**.

More and more CSS values are transformed into Sass variables for easy customization. And each new Bulma feature is required to come with its own set of variables.

While providing these variables is necessary, it's only useful if developers are aware they exist! Keeping **in sync** the documentation and the source files used to be a manual process. It is now **automatic**, thanks to a script that parses the source files and outputs the numerous Sass variables as JSON data.

<figure>
  <img src="{{ site.url }}/images/blog/variables/json.png" alt="JSON variables" width="275" height="775">
</figure>

As an added bonus, each variable row in the docs comes with its **type** and its **computed value** (if applicable).

<figure>
  <img src="{{ site.url }}/images/blog/variables/variables-table.png" alt="Variables table" width="597" height="212">
</figure>

---

###  Posts 2019 10 15 Light Dark Colors (`docs/_posts/2019-10-15-light-dark-colors.md`)

---
title: "Light and Dark colors, better look, larger form controls, panel colors, and more"
layout: post
introduction: "A big update for more colors and flexibility"
color: "expo"
name: "Light/Dark colors, better look, larger controls"
icon: "sun"
featured: true
image: hgGplX3PFBg
alt: "Light and dark clouds"
---

The new version **[Bulma 0.8.0](https://github.com/jgthms/bulma/releases/tag/0.8.0)** is out! 😃 It comes with several bug fixes and a lot of nice new features:

- [Light/Dark colors](#light-dark-colors)
- [Better visual look](#better-visual-look)
- [Panel colors](#panel-colors)
- [Larger form controls](#larger-form-controls)
- [4-value color map](#4-value-color-map)
- [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode)

More in the [Changelog](https://github.com/jgthms/bulma/releases/tag/0.8.0).

{% include docs/elements/anchor.html name="Light/Dark colors" %}

Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:

- `findLightColor()` which finds the light version of a color
- `findDarkColor()` which finds the dark version of a color

The **light** colors are used by the `button` element:

<figure>
  <a href="{{ site.data.links.by_id.elements-button.path }}">
    <img src="{{ site.url }}/images/blog/v8/light-buttons-bis.png" alt="List Bulma buttons" width="530" height="104">
  </a>
</figure>

The **light** and **dark** colors are used by the `message` component, which generates much prettier colored versions. See the difference between before (left) and after (right):

<div class="bd-post-fullwidth">
  <a href="{{ site.data.links.by_id.components-message.path }}">
    <img src="{{ site.url }}/images/blog/v8/messages-before.png" alt="Messages before" width="448" height="1200">
    <img src="{{ site.url }}/images/blog/v8/messages-after.png" alt="Messages after" width="448" height="1200">
  </a>
</div>

{% include docs/elements/anchor.html name="Better visual look" %}

Some of the Bulma colors have been updated:

<table>
  <tr>
    <th>Color</th>
    <th>Before</th>
    <th>After</th>
  </tr>
  <tr>
    <th>
      <code>$green</code>
    </th>
    <td>
      {% include docs/elements/color-swatch.html background="hsl(141, 71%, 48%)" %}
    </td>
    <td>
      {% include docs/elements/color-swatch.html background="hsl(141, 53%, 53%)" %}
    </td>
  </tr>
  <tr>
    <th>
      <code>$cyan</code>
    </th>
    <td>
      {% include docs/elements/color-swatch.html background="hsl(204, 86%, 53%)" %}
    </td>
    <td>
      {% include docs/elements/color-swatch.html background="hsl(204, 71%, 53%)" %}
    </td>
  </tr>
  <tr>
    <th>
      <code>$red</code>
    </th>
    <td>
      {% include docs/elements/color-swatch.html background="hsl(348, 100%, 61%)" %}
    </td>
    <td>
      {% include docs/elements/color-swatch.html background="hsl(348, 86%, 61%)" %}
    </td>
  </tr>
</table>

The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have been improved:

<div class="bd-post-fullwidth">
  <a href="{{ site.data.links.by_id.components-card.path }}">
    <img src="{{ site.url }}/images/blog/v8/card-before.png" alt="Card before" width="464" height="236">
    <img src="{{ site.url }}/images/blog/v8/card-after.png" alt="Card after" width="464" height="236">
  </a>
</div>

<div class="bd-post-fullwidth">
  <a href="{{ site.data.links.by_id.elements-box.path }}" style="display: block;" class="has-text-centered">
    <img src="{{ site.url }}/images/blog/v8/box-before.png" alt="Box before" width="464" height="236">
    <img src="{{ site.url }}/images/blog/v8/box-after.png" alt="Box after" width="464" height="236">
  </a>
</div>

{% include docs/elements/anchor.html name="Panel colors" %}

<p>
  The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>:
</p>

<div class="bd-post-fullwidth">
  <a href="{{ site.data.links.by_id.components-panel.path }}">
    <img src="{{ site.url }}/images/blog/v8/panel-colors.png" alt="Panel colors" width="768" height="1029">
  </a>
</div>

{% include docs/elements/anchor.html name="Larger form controls" %}

Form controls and buttons are now `2.5em` high. You can revert this resizing by setting these previous values:

```sass
$control-height: 2.25em
$control-padding-vertical: calc(0.375em - #{$control-border-width})
$control-padding-horizontal: calc(0.625em - #{$control-border-width})

$button-padding-vertical: calc(0.375em - #{$button-border-width})
$button-padding-horizontal: 0.75em
```

{% include docs/elements/anchor.html name="4-value color map" %}

The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.

If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:

```scss
$custom-colors: (
  "lime": (
    lime,
  ),
  "tomato": (
    tomato,
    white,
  ),
  "orange": (
    $orange,
    $orange-invert,
    $orange-light,
  ),
  "lavender": (
    $lavender,
    $lavender-invert,
    $lavender-light,
    $lavender-dark,
  ),
);
```

This is processed by the updated `mergeColorMaps()` Sass function.

{% include docs/elements/anchor.html name='Scheme variables for "Dark mode"' %}

There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
They replace the `$white` and `$black` occurrences in the codebase.

This makes it easy to create a **"Dark mode"** simply by swapping the values:

```sass
$scheme-main: $black
$scheme-invert: $white
// etc.
```

That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly.

<hr class="hr">

The new 0.8.0 version should be fully compatible with any Bulma setup. Feel free to <a href="https://github.com/jgthms/bulma/issues" target="_blank">post an issue</a> if you encounter any problem upgrading.

---

###  Posts 2021 01 12 New Feature Icon Text (`docs/_posts/2021-01-12-new-feature-icon-text.md`)

---
title: "New feature: `.icon-text`"
layout: post
introduction: "An easy way to combine an `.icon` with text"
color: "primary"
name: "New feature: Icon Text"
icon: "star-of-life"
---

Bulma's `.icon` element has been around since its inception. It acts as a simple container for any **icon font**. And thanks to its fixed square dimensions, it provides the icon font time to load while preserving the space fo it.

From version `0.9.2`, a new `.icon-text` element will be available. It allows you to easily combine an `.icon` element with **text**. The purpose of this new feature is to preserve the correct **alignment** of both parts.

<div class="block has-text-centered py-6">
  <span class="icon-text">
    <span class="icon">
      <i class="fas fa-home"></i>
    </span>
    <span>Home</span>
  </span>
</div>

You can combine several icons in sequence:

<div class="block has-text-centered py-6">
  <span class="icon-text">
    <span class="icon">
      <i class="fas fa-train"></i>
    </span>
    <span>Paris</span>
    <span class="icon">
      <i class="fas fa-arrow-right"></i>
    </span>
    <span>Budapest</span>
    <span class="icon">
      <i class="fas fa-arrow-right"></i>
    </span>
    <span>Bucharest</span>
    <span class="icon">
      <i class="fas fa-arrow-right"></i>
    </span>
    <span>Istanbul</span>
    <span class="icon">
      <i class="fas fa-flag-checkered"></i>
    </span>
  </span>
</div>

See the [full `.icon-text` documentation](/documentation/elements/icon/#icon-text).

---

###  Posts 2021 01 23 The Block Probably Bulmas Most Important Feature (`docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md`)

---
title: 'The `.block`, probably Bulma’s most important feature'
layout: post
introduction: 'Automatic spacing for everything in Bulma'
color: 'danger'
name: 'The Bulma block'
icon: 'cube'
---

The Bulma `block` is a simple element but with a very powerful feature: it provides `1.5rem` margin at the bottom, if it's not the last child.

It exists as its own `.block` CSS class, but its properties are also used on **many other Bulma components**.

For example, if you were to combine a `notification`, and a `pagination`, they would be **automatically spaced evenly**:

<div class="block is-size-6" style="margin-left: auto; margin-right: auto; max-width: 80%; padding: 1.5rem;">
  <p class="title mb-5">Newsletter</p>

  <div class="notification is-success">
    451 new subscribers this month.
  </div>

  <table class="table mb-5 is-bordered is-striped is-hoverable is-fullwidth">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alex</td>
        <td>alex.smith@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>sam.rogers@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Luke</td>
        <td>hello.luke@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Eli</td>
        <td>eli.larry@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Dan</td>
        <td>dan.danny@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
    </tbody>
  </table>

  <nav class="pagination" role="navigation" aria-label="pagination">
    <a class="pagination-previous">Previous</a>
    <a class="pagination-next">Next page</a>
    <ul class="pagination-list ml-0 mt-0">
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 1">1</a>
      </li>
      <li class="mt-0">
        <span class="pagination-ellipsis">&hellip;</span>
      </li>
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 45">45</a>
      </li>
      <li class="mt-0">
        <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
      </li>
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 47">47</a>
      </li>
      <li class="mt-0">
        <span class="pagination-ellipsis">&hellip;</span>
      </li>
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 86">86</a>
      </li>
    </ul>
  </nav>
</div>

For comparison, if there was no spacing, here's what they would look like:

<div class="block is-size-6" style="margin-left: auto; margin-right: auto; max-width: 80%; padding: 1.5rem;">
  <p class="title mb-0">Newsletter</p>

  <div class="notification is-success mb-0">
    451 new subscribers this month.
  </div>

  <table class="table is-bordered is-striped is-hoverable is-fullwidth mb-0">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alex</td>
        <td>alex.smith@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Sam</td>
        <td>sam.rogers@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Luke</td>
        <td>hello.luke@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Eli</td>
        <td>eli.larry@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
      <tr>
        <td>Dan</td>
        <td>dan.danny@example.com</td>
        <td><a>Edit</a> · <a>Delete</a></td>
      </tr>
    </tbody>
  </table>

  <nav class="pagination mb-0" role="navigation" aria-label="pagination">
    <a class="pagination-previous">Previous</a>
    <a class="pagination-next">Next page</a>
    <ul class="pagination-list ml-0 mt-0">
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 1">1</a>
      </li>
      <li class="mt-0">
        <span class="pagination-ellipsis">&hellip;</span>
      </li>
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 45">45</a>
      </li>
      <li class="mt-0">
        <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
      </li>
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 47">47</a>
      </li>
      <li class="mt-0">
        <span class="pagination-ellipsis">&hellip;</span>
      </li>
      <li class="mt-0">
        <a class="pagination-link" aria-label="Goto page 86">86</a>
      </li>
    </ul>
  </nav>
</div>

This `block` element has always existed; only recently has there been a <a href="/documentation/elements/block/">dedicated documentation page</a>.

---

### Documentation Features Color Palettes (`docs/documentation/features/color-palettes.md`)

---
title: Color Palettes in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: color-palettes
breadcrumb:
  - home
  - documentation
  - features
  - features-color-palettes
---

Bulma comes with 7 primary colors:

<table class="table is-bordered">
<tr><td><code>text</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-text);"></span></td></tr>
<tr><td><code>link</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-link);"></span></td></tr>
<tr><td><code>primary</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td></tr>
<tr><td><code>info</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-info);"></span></td></tr>
<tr><td><code>success</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-success);"></span></td></tr>
<tr><td><code>warning</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-warning);"></span></td></tr>
<tr><td><code>danger</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-danger);"></span></td></tr>
</table>

Bulma will automatically **generate a collection of CSS variables** for each of those colors. These sets of variables act as a **color palette** you can use to play with different _shades_ of a same color.

For example, by setting the primary color with `$primary: hsl(171, 100%, 41%)`, Bulma will generate the following CSS variables:

- `--bulma-primary`
- `--bulma-primary-rgb` if you want to create your own RGBA shade: `rgba(var(--bulma-primary-rgb), 0.5)`
- `--bulma-primary-h` equal to the primary **hue**
- `--bulma-primary-s` equal to the primary **saturation**
- `--bulma-primary-l` equal to the primary **lightness**
- `--bulma-primary-base` (equal to `--bulma-primary`)
- `--bulma-primary-invert` which is a color that will look decent on the primary color (in a foreground/background combination)
- `--bulma-primary-light` which is the primary color at `90%` lightness
- `--bulma-primary-light-invert` which is a color that looks good on the `-light` version
- `--bulma-primary-dark` which is the primary color at `20%` lightness
- `--bulma-primary-dark-invert` which is a color that looks good on the `-dark` version
- `--bulma-primary-soft` which is a `light` color in light mode, and a `dark` color in dark mode
- `--bulma-primary-bold` which is a `dark` color in light mode, and a `light` color in dark mode
- `--bulma-primary-soft-invert` which is the same as the `bold` version
- `--bulma-primary-bold-invert` which is the same as the `soft` version
- `--bulma-primary-on-scheme` which is a color that looks good on the `scheme-main` color (which by default is white, and is used as the page's background color)

Here is what they look like:

<table class="table is-bordered">
  <tr>
    <td><code>--bulma-primary</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td>
    <td><span class="color-primary">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-invert</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-invert);"></span></td>
    <td><span class="color-primary-invert">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-light</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-light);"></span></td>
    <td><span class="color-primary-light">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-light-invert</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-light-invert);"></span></td>
    <td><span class="color-primary-light-invert">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-dark</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-dark);"></span></td>
    <td><span class="color-primary-dark">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-dark-invert</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-dark-invert);"></span></td>
    <td><span class="color-primary-dark-invert">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-soft</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-soft);"></span></td>
    <td><span class="has-text-primary-soft">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-bold</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-bold);"></span></td>
    <td><span class="has-text-primary-bold">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
  <tr>
    <td><code>--bulma-primary-on-scheme</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-on-scheme);"></span></td>
    <td><span class="color-primary-on-scheme">The quick brown fox jumps over the lazy dog</span></td>
  </tr>
</table>

## Soft and Bold colors

Because Bulma now has a Dark Mode, it comes with a new color concept: **soft** and **bold** colors.

A **soft** color is a shade of a color that has little contrast with the background. It's a muted, faint shade of that color.

In light mode, this means that a soft color will be light as well. It's ideal of **backgrounds**:

<table class="table is-bordered">
  <tr>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-soft);"></span></td>
    <td><code>--bulma-primary-soft</code> as <strong>background</strong></td>
    <td class="has-background-primary-soft">The quick brown fox jumps over the lazy dog</td>
  </tr>
</table>

On the other hand, the **bold** color has a stark contrast with the background. It's a strong, distinct shade of that color.

In light mode, this means that a bold color will be dark. It's ideal of **text colors**:

{% include docs/components/single-color-row.html color="primary-bold" label="text color" classname="has-text-primary-bold" %}

The best use of these colors is to **combine them**: the soft color as background, the bold color as foreground:

<table class="table is-bordered">
  <tr>
    <td>
      <code>--bulma-primary-soft</code> as <strong>background</strong><br>
      <code>--bulma-primary-bold</code> as <strong>foreground</strong>
    </td>
    <td class="has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
  </tr>
</table>

### Automatic switching when going into Dark Mode

If you use switch to between light mode and dark mode, you will notice that the soft and bold colors will **swap**. That way, you don't need to update your CSS classes to keep a decent design.

<table class="table is-bordered">
  <tr>
    <th>System</th>
    <th>Light Mode</th>
    <th>Dark Mode</th>
  </tr>
  <tr>
    <td class="has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
    <td class="theme-light has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
    <td class="theme-dark has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
  </tr>
</table>


## Invert colors

The purpose of `-invert` colors is to combine them with their base counterparts. For example, if you use `primary-light` as the background color, you can use `primary-light-invert` as the foreground color:

<table class="table is-bordered">
  {% include docs/elements/background-foreground-row.html %}
  {% include docs/elements/background-foreground-row.html color="light" %}
  {% include docs/elements/background-foreground-row.html color="dark" %}
</table>

## 21 shades for each color

Bulma will automatically generate 21 shades of each color, one for each amount of **lightness**, starting from _around_ `0%` and going up in `5%` increments, until `100%` is reached.

> I am saying _around_ `0%` because the last digit is determined by the base color. If the base color's lightness is `42%`, then `--bulma-primary-00` will be `2%`, not `0%`.

<table class="table is-bordered">
  {% for i in (0..19) %}
    {% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
    <tr>
      <td><code>--bulma-primary-{{ color }}</code></td>
      <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-{{ color }});"></span></td>
      <td><code>--bulma-primary-{{ color }}-invert</code></td>
      <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-{{ color }}-invert);"></span></td>
    </tr>
  {% endfor %}

  <tr>
    <td><code>--bulma-primary-100</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-100);"></span></td>
    <td><code>--bulma-primary-100-invert</code></td>
    <td><span class="bd-color-swatch" style="--background: var(--bulma-primary-100-invert);"></span></td>
  </tr>
</table>

Each of these shades has an `-invert` counterpart that can be used as a foreground color:

<table class="table is-bordered">
  {% for i in (0..19) %}
    {% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
    {% include docs/elements/background-foreground-row.html color=color %}
  {% endfor %}

{% include docs/elements/background-foreground-row.html color="100" %}

</table>

### Lightness CSS variables

If you write your own CSS and want to use one these shades yourself, you can access the **lightness** value via its dedicated CSS variable that has a `-l` suffix.

For example, the `bulma-primary-75` color is defined like this:

```css
:root {
  --bulma-primary-75: hsla(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-75-l),
    1
  );
}
```

In this case, `--bulma-primary-75-l` is equal to `76%`, and you can access its value with the `var(--bulma-primary-75-l)` CSS variable.

## CSS helper classes

While you can access all a color's CSS variables directly by writing `color: var(--bulma-primary)` for example, Bulma also provides **CSS helper classes** for each color.

Those helper classes exist for to set either the `color` or the `background`.

<div class="table-container">
<table class="table is-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Color</th>
      <th colspan="2"><code>color</code> class</th>
      <th colspan="2"><code>background</code> class</th>
    </tr>
  </thead>
  <tbody>
    {% include docs/elements/palette-class-row.html color="primary" %}
    {% include docs/elements/palette-class-row.html color="primary-invert" %}
    {% include docs/elements/palette-class-row.html color="primary-light" %}
    {% include docs/elements/palette-class-row.html color="primary-light-invert" %}
    {% include docs/elements/palette-class-row.html color="primary-dark" %}
    {% include docs/elements/palette-class-row.html color="primary-dark-invert" %}
    {% include docs/elements/palette-class-row.html color="primary-on-scheme" %}
    {% for i in (0..19) %}
      {% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
      {% assign name = color | prepend: 'primary-' %}
      {% include docs/elements/palette-class-row.html color=name %}
    {% endfor %}
    {% include docs/elements/palette-class-row.html color="primary-100" %}
  </tbody>
</table>
</div>

---

### Documentation Features Css Variables (`docs/documentation/features/css-variables.md`)

---
title: CSS Variables in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: css-variables
breadcrumb:
  - home
  - documentation
  - features
  - features-css-variables
---

All Bulma components are styled using **CSS Variables** (which are also called CSS custom properties). [Read more about them on the MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

For example, here is how the `.title` element is styled:

```css
.title {
  color: var(--bulma-title-color);
  font-size: var(--bulma-title-size);
  font-weight: var(--bulma-title-weight);
  line-height: var(--bulma-title-line-height);
}
```

## Scope

Bulma CSS variables are either defined:

- at the **global** scope `:root`
- at the **component** scope, like `.button`

CSS Variables defined at a more specific scope (like `.button`) will override the ones defined at a more global scope.

```css
:root {
  /* Default global value */
  --bulma-size-medium: 1.25rem;
}

.button {
  /* Overrides the global value */
  --bulma-size-medium: 1.5rem;
}
```

## Prefix

All Bulma CSS variables are prefixed with `bulma-` (including the dash). You will notice theme when inspecting a webpage:

<img src="/assets/images/content-inspect.png" alt="Inspect CSS variables" width="640" height="340">

This prefix can be changed by setting the `$cssvars-prefix` Sass variable:

```scss
@use "bulma/sass" with (
  $cssvars-prefix: "my-prefix-"
);
```

## Themes

The global CSS variables defined at the `:root` level are what defines a **Bulma theme**. Think of a theme as simply a collection of CSS variables.

<p>
  <a href="{{ site.url }}/documentation/features/themes/">
    Read more about Themes
  </a>
</p>

---

### Documentation Features Dark Mode (`docs/documentation/features/dark-mode.md`)

---
title: Dark Mode in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: dark-mode
breadcrumb:
  - home
  - documentation
  - features
  - features-dark-mode
---



Modern browsers come with a way to detect if a user has set their theme preference to `light` or `dark` by using the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) keyword.

This value can be used in a media query to change a website's styles accordingly:

```css
@media (prefers-color-scheme: dark) {
  :root {
    /* Update CSS variables */
  }
}
```

However, it's not possible for a website to alter this preference. That's why it's preferable to **also** add a `data-theme` HTML attribute or a `theme-dark` CSS class.

This is how Bulma defines its dark theme:

```css
@media (prefers-color-scheme: dark) {
  :root {
    /* Update CSS variables */
  }
}

[data-theme=dark],
.theme-dark {
  /* Update CSS variables */
}
```

With these rules:

* the website will be **light by default**, if no user preference is set
* it will also be **light** if the user has set their preference to `light`
* the website will be **dark** if the user has set their preference to `dark`

{% include docs/elements/anchor.html name="Force Dark Mode within a page" %}

You can **enable** Dark Mode in part of your HTML by simply using the HTML attribute or the CSS class:

```html
<div>
  This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
</div>

<div data-theme="dark">
  This is in Dark Mode
</div>

<div class="theme-dark">
  This is also in Dark Mode
</div>
```

{% include docs/elements/anchor.html name="Force Dark Mode for a whole webpage" %}

If you want to enable Dark Mode for a whole webpage, simply set the attribute or the class on the `<html>` element:

```html
<html data-theme="dark">

<html class="theme-dark">
```

{% include docs/elements/anchor.html name="How the Dark theme is created" %}

This is the content of the `sass/themes/dark.scss` file:

```
/* Detailed source-code truncated for AI context efficiency. */
```

This mixin outputs a list of CSS variables and their new value.

To use this theme with the `prefer-color-scheme` media query, write the following:

```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";

@include cv.system-theme($name: "dark") {
  @include dark.dark-theme;
}
```

To use this theme with the `[data-theme=dark]` and `.theme-dark` selectors, write the following:

```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@use "sass/themes/setup";

@include cv.bulma-theme($name: "dark") {
  @include dark.dark-theme;
  @include setup.setup-theme;
}
```


### The `bulma-theme()` mixin

This mixin will allow you to generate a CSS rule-set with both an appropriate HTML attribute selector and a CSS class selector, which names are defined by the `$name` parameter.

```scss
@use "sass/utilities/css-variables" as cv;

@include cv.bulma-theme($name: "my-theme") {
  // Your code
}
```

This will output the following:

```css
[data-theme=my-theme],
.theme-my-theme {
  /* Your code */
}
```

### The `system-theme()` mixin

This mixin will generate a `@media (prefers-color-scheme: $name)` media query.

```scss
@use "sass/utilities/css-variables" as cv;

@include cv.system-theme($name: "dark") {
  // Your code
}
```

This will output the following:

```css
@media (prefers-color-scheme: dark) {
  :root {
    /* Your code */
  }
}
```

### The `register-vars()` function

All Bulma CSS variables are prefixed with `bulma-`. This prefix is defined with the `$cssvars-prefix: "bulma-";` Sass variable.

Because writing all CSS variables with this prefix can be cumbersome, Bulma provides a Sass function to register new variables: `register-vars()`.

This function accepts a Sass map of `name: value` pairs.

```scss
@use "sass/utilities/css-variables" as cv;

$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;

@include cv.bulma-theme($name: "my-theme") {
  @include cv.register-vars(
    (
      "scheme-brightness": "dark",
      "scheme-main-l": $scheme-main-l,
      "scheme-main-bis-l": $scheme-main-l + 2%,
      "scheme-main-ter-l": $scheme-main-l + 4%,
      "background-l": $background-l,
      "border-weak-l": 21%,
      "border-l": 24%,
      "text-weak-l": 53%,
      "text-l": $text-l,
      "text-strong-l": 93%,
      "text-title-l": 100%,
      "hover-background-l-delta": 5%,
      "active-background-l-delta": 10%,
      "hover-border-l-delta": 10%,
      "active-border-l-delta": 20%,
      "hover-color-l-delta": 5%,
      "active-color-l-delta": 10%,
    )
  );
}
```

### Updating the lightness

For Dark Mode, Bulma will keep the same hue and saturation of the main scheme color. It will however **invert the lightness** of background, borders, text colors, and hover/active states.

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Lightness Name</th>
      <th colspan="2">Light Mode (default)</th>
      <th colspan="2">Dark Mode (default)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><code>--bulma-scheme-main-l</code></th>
      <td><code>100%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
      <td><code>11%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-scheme-main-bis-l</code></th>
      <td><code>98%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
      <td><code>13%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-scheme-main-ter-l</code></th>
      <td><code>98%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
      <td><code>15%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-background-l</code></th>
      <td><code>96%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
      <td><code>14%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-border-weak-l</code></th>
      <td><code>93%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
      <td><code>21%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-border-l</code></th>
      <td><code>86%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
      <td><code>24%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-text-weak-l</code></th>
      <td><code>48%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
      <td><code>53%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-text-l</code></th>
      <td><code>29%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
      <td><code>71%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-text-strong-l</code></th>
      <td><code>21%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
      <td><code>93%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-text-title-l</code></th>
      <td><code>14%</code></td>
      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
      <td><code>100%</code></td>
      <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
    </tr>
    <tr>
      <th><code>--bulma-hover-background-l-delta</code></th>
      <td colspan="2"><code>5%</code></td>
      <td colspan="2"><code>5%</code></td>
    </tr>
    <tr>
      <th><code>--bulma-active-background-l-delta</code></th>
      <td colspan="2"><code>10%</code></td>
      <td colspan="2"><code>10%</code></td>
    </tr>
    <tr>
      <th><code>--bulma-hover-border-l-delta</code></th>
      <td colspan="2"><code>10%</code></td>
      <td colspan="2"><code>10%</code></td>
    </tr>
    <tr>
      <th><code>--bulma-active-border-l-delta</code></th>
      <td colspan="2"><code>20%</code></td>
      <td colspan="2"><code>20%</code></td>
    </tr>
    <tr>
      <th><code>--bulma-hover-color-l-delta</code></th>
      <td colspan="2"><code>5%</code></td>
      <td colspan="2"><code>5%</code></td>
    </tr>
    <tr>
      <th><code>--bulma-active-color-l-delta</code></th>
      <td colspan="2"><code>10%</code></td>
      <td colspan="2"><code>10%</code></td>
    </tr>
  </tbody>
</table>

### The `generate-on-scheme-colors()` function

The **scheme** color is the one used for:

* {% include docs/elements/color-swatch.html background="var(--bulma-background)" %} backgrounds
* {% include docs/elements/color-swatch.html background="var(--bulma-border)" %} borders
* text shades
  * {% include docs/elements/color-swatch.html background="var(--bulma-text-strong)" %} strong text
  * {% include docs/elements/color-swatch.html background="var(--bulma-text-weak)" %} weak text
  * {% include docs/elements/color-swatch.html background="var(--bulma-title-color)" %} title text
  * {% include docs/elements/color-swatch.html background="var(--bulma-text)" %} and normal text

For each of the 7 primary colors {% include docs/elements/primary-colors.html %}, the default Bulma theme generates **on scheme** shades, meaning shades of each color that will look decent on the main scheme color.

In Light Mode, they look like this:

<table class="table is-bordered">
  <tbody>
    {% for color in site.data.colors.justColors %}
      {% assign foreground = color | prepend: 'var(--bulma-' | append: '-on-scheme)' %}
      <tr>
        <th><code>{{ color }}</code></th>
        <td>{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Because in Dark Mode we are inverting the lightness of these colors, the page background will go from white {% include docs/elements/color-swatch.html background="#fff" %} to black {% include docs/elements/color-swatch.html background="#141414" %}. We thus need to update the `-on-scheme` colors of all 7 primary colors.

In Dark Mode, they look like this:

<table class="table is-bordered">
  <tbody>
    {% for color in site.data.colors.justColors %}
      {% assign foreground = color | prepend: 'var(--bulma-' | append: '-on-scheme)' %}
      <tr>
        <th><code>{{ color }}</code></th>
        <td class="theme-dark">{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

If you are creating your own theme, you can automatically generate new `-on-scheme` colors by using the `generate-on-scheme-colors()` for **each** color. It takes 3 parameters:

* `$name` which is a string. E.g. `"primary"`
* `$color` which is the color value. E.g.
* `$scheme-main` which is the theme's main scheme color (the one used as the page background). E.g. `#fff`

The full code looks like this:

```scss
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;

$scheme-main-l: 11%;
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);

@include cv.bulma-theme($name: "my-theme") {
  @each $name, $color in dv.$colors {
    @include cv.generate-on-scheme-colors($name, $color, $scheme-main);
  }
}
```

### The `setup-theme()` function

In Bulma, some CSS variables reference other CSS variables. For example, `--bulma-scheme-main` is defined like this:

```css
:root {
  --bulma-scheme-main: hsl(
    var(--bulma-scheme-h)
    var(--bulma-scheme-s)
    var(--bulma-scheme-main-l)
  );
}
```

Because of how CSS variables work, if you update the value of `--bulma-scheme-main-l`, you need to define `--bulma-scheme-main` again. That is what `setup-theme()` does.

```css
[data-theme=my-theme],
.theme-my-theme {
  --bulma-scheme-main-l: 7%;
  --bulma-scheme-main: hsl(
    var(--bulma-scheme-h)
    var(--bulma-scheme-s)
    var(--bulma-scheme-main-l)
  );
}
```

If you create your own theme, simply call this function _after_ having set your own CSS variables:

```scss
@use "sass/themes/setup";

@include cv.bulma-theme($name: "my-theme") {
  // Set your own CSS variables,
  // either manually:
  --bulma-scheme-main-l: 7%;
  // or using Bulma's register-vars() function:
  @include register-vars((
    "bulma-scheme-main-l": 7%,
  ));

  // Then, setup the new theme.
  @include setup.setup-theme();
}
```

---

### Documentation Features Themes (`docs/documentation/features/themes.md`)

---
title: Themes in Bulma
layout: docs
markdown: true
theme: features
doc-tab: features
doc-subtab: themes
breadcrumb:
  - home
  - documentation
  - features
  - features-themes
---


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:

```css
: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:

{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}

---

--- METRICS ---
- Files Extracted: 24
- Estimated Token Budget: ~21927 tokens
- Canonical Reference: https://codewiki.google/github.com/jgthms/bulma