If you're familiar with Sass and want to customize Buefy with your own theme, follow these steps


Install Buefy via npm

npm install @fantage9/buefy-vue3

Or clone the repository:


Set your variables with Sass

Tip: You can see all of Bulma's variables.

There's also two other variables created by Buefy:

  1. $speed-slow: 150ms !default
  2. $speed-slower: 250ms !default

                // Import Bulma's core
                @import "bulma/sass/utilities/_all";

                // Set your colors
                $primary: #8c67ef;
                $primary-light: findLightColor($primary);
                $primary-dark: findDarkColor($primary);
                $primary-invert: findColorInvert($primary);
                $twitter: #4099FF;
                $twitter-invert: findColorInvert($twitter);

                // Lists and maps
                $custom-colors: null !default;
                $custom-shades: null !default;
                // Setup $colors to use as bulma classes (e.g. 'is-twitter')
                $colors: mergeColorMaps(
                        "white": (
                        "black": (
                        "light": (
                        "dark": (
                        "primary": (
                        "link": (
                        "info": (
                        "success": (
                        "warning": (
                        "danger": (

                // Links
                $link: $primary;
                $link-invert: $primary-invert;
                $link-focus-border: $primary;

                // Import Bulma and Buefy styles
                @import "bulma/bulma";
                @import "@fantage9/buefy-vue3/src/scss/buefy";


Import and use Buefy

Please note that import '@fantage9/buefy-vue3/dist/buefy.css' from the start section has been omitted.

                import { createApp } from 'vue'
                import Buefy from '@fantage9/buefy-vue3'

                const app = createApp()