Customization

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

1

Install Buefy via npm

npm install @fantage9/buefy-vue3

Or clone the repository: https://github.com/fantage9/buefy

2

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": (
                            $white,
                            $black,
                        ),
                        "black": (
                            $black,
                            $white,
                        ),
                        "light": (
                            $light,
                            $light-invert,
                        ),
                        "dark": (
                            $dark,
                            $dark-invert,
                        ),
                        "primary": (
                            $primary,
                            $primary-invert,
                            $primary-light,
                            $primary-dark,
                        ),
                        "link": (
                            $link,
                            $link-invert,
                            $link-light,
                            $link-dark,
                        ),
                        "info": (
                            $info,
                            $info-invert,
                            $info-light,
                            $info-dark,
                        ),
                        "success": (
                            $success,
                            $success-invert,
                            $success-light,
                            $success-dark,
                        ),
                        "warning": (
                            $warning,
                            $warning-invert,
                            $warning-light,
                            $warning-dark,
                        ),
                        "danger": (
                            $danger,
                            $danger-invert,
                            $danger-light,
                            $danger-dark,
                        ),
                    ),
                    $custom-colors
                );

                // 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";
                

3

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()

                app.use(Buefy)