bulma/docs/documentation/customize/with-css-variables.html

---
title: Customize with CSS Variables
layout: docs
theme: customize
doc-tab: customize
doc-subtab: with-css-variables
breadcrumb:
  - home
  - documentation
  - customize
  - customize-with-css-variables
---

{% capture markdown %}
Bulma makes wide use of **CSS Variables** (also called CSS custom properties). Read more about them on the [dedicated page]({{ site.data.links.by_id['features-css-variables'].path }}).
{% endcapture %}

{% include markdown.html content=markdown %}

{% capture markdown %}
You can change the current Bulma simply by **opening your developer console** and changing a CSS variable's value.

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 this CSS method, simply follow these steps:

<table class="table is-bordered">
{% 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 %}
</table>
{% endcapture %}

{% include docs/elements/anchor.html name="Customizing in the browser" %}

{% include markdown.html content=markdown %}