BulmaCssVars

Use CSS Variables for Bulma

Docs

Bulma-Css-Vars is not included in Buefy, you have to install it.

Also make sure you use Bulma v0.8 or higher and sass instead of node-sass:

npm install -S bulma-css-vars
npm install -D sass
node ./node_modules/.bin/bulma-css-vars --init

This creates an initial config file bulma-css-vars.config.js, where you can declare the variables you want to modify. Each additional variable will increase the size of your css.

Finally, you have to reference the main.scss file in your compilation, preferably in your entry Vue component:

import './main.scss'

You have to run bulma-css-vars every time you change the config. Add this script to your package.json to simplify this:

"scripts": {
  "bulma-css-vars": "bulma-css-vars"
}

Read more in the bulma-css-vars documentation.

This notification uses the primary color of bulma. Click one of the buttons below to set the --primary css variable to another value.

CSS Variables set in DOM:

--primary: rgb(121, 87, 213);

--primary--color-invert: rgb(255, 255, 255);

<template>
    <section ref="bcvContainer">
        <b-notification type="is-primary" :closable="false">
            This notification uses the primary color of bulma. Click one of the
            buttons below to set the <code>--primary</code> css variable to
            another value.
        </b-notification>
        <div class="buttons">
            <b-button type="is-success" @click="setColor('#23d160')">
                Green
            </b-button>
            <b-button type="is-info" @click="setColor('#209cee')">
                Blue
            </b-button>
            <b-button type="is-primary" @click="setColor('#7957d5')">
                Buefy Default Primary
            </b-button>
        </div>
        <p><b>CSS Variables set in DOM:</b></p>
        <p v-for="cssVar in cssVars" :key="cssVar">
            <code>{{ cssVar }}</code>
        </p>
    </section>
</template>

<script>
// You have to install bulma-css-vars to use it:
// 'npm install bulma-css-vars'
import { ColorUpdater } from "bulma-css-vars";
import { bulmaCssVariablesDefs } from "./bulma-generated/bulma-colors";

const updater = new ColorUpdater(bulmaCssVariablesDefs);

export default {
    data() {
        return {
            cssVars: []
        };
    },
    mounted() {
        this.setColor('#7957d5')
    },
    methods: {
        setColor(newColor) {
            const updatedVars = updater.getUpdatedVars("primary", newColor);
            const container = this.$refs.bcvContainer;
            this.cssVars = updatedVars.map(({ name, value }) => {
                container.style.setProperty(name, value);
                return `${name}: ${value};`;
            });
        }
    }
};
</script>

<style scoped>
/* if you set up bulma-css-vars, this will be generated in your bulma scss */
.notification.is-primary {
    background-color: var(--primary);
    color: var(--primary--color-invert);
}
</style>

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub