\n\n### Install\n\n```sh\nnpm install @oruga-ui/theme-bulma\n```\n\nor\n\n```sh\nyarn add @oruga-ui/theme-bulma\n```\n\n### Configure\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\nimport Oruga from \"@oruga-ui/oruga-next\";\nimport { bulmaConfig } from \"@oruga-ui/theme-bulma\";\n\nimport \"@oruga-ui/theme-bulma/style.css\";\n\ncreateApp(App).use(Oruga, bulmaConfig).mount(\"#app\");\n```\n\nPlease note, this package can be used without importing any other Oruga styling or theme.\n\n### Customization (SASS/SCSS)\n\nBulma is a highly customizable CSS framework. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user (see [Bulma Customization](https://bulma.io/documentation/customize/concepts/)).\n\nUsing the following sample code below you **don't need** `import '@oruga-ui/theme-bulma/style.css'` but you have to add a custom sass/scss file (like `main.scss`) to customize Bulma and the theme variables.\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n\nimport Oruga from \"@oruga-ui/oruga-next\";\nimport { bulmaConfig } from \"@oruga-ui/theme-bulma\";\n\nimport \"./main.scss\";\n\ncreateApp(App).use(Oruga, bulmaConfig).mount(\"#app\");\n```\n\nInside your own sass/scss file you need to include Bulma styles and theme styles. To overwrite sass variables with your own values, you have to use `@use` and the `with` keyword, which takes a Sass map.\n\nThere are two ways of importing the theme style:\n\n- **combined** - The theme features a combined entrypoint which includes Bulma styles and theme styles. This is best for most customization use cases.\n- **separated**- The separated entrypoint only contains theme styles without Bulma. This gives you full control over how and how much of Bulma you import, but you'll have to deal with the sass variable scoping yourself. Unless it's critical that you only include part of Bulma, the separate method is best avoided.\n\n#### The Combined Method\n\nThe combined method is fairly straitforward. Define custom variables and then pass them in using `with()` syntax. You can override any variable in Bulma or the theme which has a `!default` by passing it in this way.\n\nIf you need to add custom color variants with this method you must use the `$theme-bulma-custom-colors` variable.\n\n```scss\n// Option A: Include all styling (including bulma)\n\n// Set your color overrides\n$primary: #8c67ef;\n$red: #f00;\n$link: $primary;\n\n// Add new colors to the colors map\n$custom-colors: (\n \"tertiary\": $red,\n);\n\n// Include the Oruga Bulma theme with Bulma included\n@use \"@oruga-ui/theme-bulma/scss/theme-build.scss\" with (\n $family-primary: '\"Nunito\", sans-serif',\n $primary: $primary,\n $link: $link,\n $theme-bulma-custom-colors: $custom-colors\n);\n\n// Then add additional custom code here\n// ...\n```\n\n#### The Separated Method\n\nWhen using this method, you will lose the theme customisation for the Bulma variables.\nIn the combined method the theme will add Oruga's standard `secondary` color variant for you and you can add additional variants using `$theme-bulma-custom-colors`. Using the separate method, you have to do this in your code instead using Bulma's `$custom-colors` var, which will be implicitly passed to the theme behind the scenes.\nYou have to be aware of importing Bulma, `@use \"bulma/sass\" with (...)` before any other Bulma usage. If you reference Bulma beforehand, for example to use a Bulma mixin to create a colour to pass to Bulma, you will get sass scope problems.\n\n```scss\n// Option B: Include the Oruga theme and Bulma separately\n\n// Assemble color variables\n$red: #f00;\n$green: #0f0;\n$blue: #00f;\n$black: #000;\n$dark-grey: #6c757d;\n$speed-slower: 1000ms;\n\n// Custom colors is required if you want the secondary variant. Nothing will break if you omit it though.\n$custom-colors: (\n // Add the standard Oruga secondary variant\n \"secondary\": $dark-grey,\n // If you want to add additional custom colors to the colors map add them here\n \"tertiary\": $red\n);\n\n// Pass any Bulma variables you'd like to override here\n@use \"bulma/sass\" with (\n $red: $red,\n $blue: $blue,\n $green: $green,\n $black: $black,\n $primary: $green,\n $custom-colors: $custom-colors\n);\n\n// Pass any theme variables you'd like to override here\n@use \"@oruga-ui/theme-bulma/scss/components-build.scss\" with (\n $speed-slower: $speed-slower\n);\n\n// Then add additional custom code here\n// ...\n```\n\n### Override default config\n\nIn case you want to replace the default style of a component you can override or add new classes changing `bulmaConfig`; more details about components customization on https://oruga-ui.com/documentation/configuration.html\n\n```js\nimport { createApp } from \"vue\";\n\nimport Oruga from \"@oruga-ui/oruga-next\";\nimport { bulmaConfig } from \"@oruga-ui/theme-bulma\";\n\nimport \"@oruga-ui/theme-bulma/style.css\";\n\nconst customBulmaConfig = {\n ...bulmaConfig,\n checkbox: {\n override: true,\n rootClass: \"checkbox\",\n },\n};\n\ncreateApp(App).use(Oruga, customBulmaConfig).mount(\"#app\");\n```\n\n## Contributors\n\nThank you to everyone involved for improving this project, day by day 💚\n\n\n \n\n\n[Complete list](.github/CONTRIBUTORS.md).\n\n## Credits\n\nLogo designed by [rubjo](https://github.com/rubjo)\n\n## License\n\nCode released under [MIT](https://github.com/oruga-ui/theme-bulma/blob/main/LICENSE) license.\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/oruga-ui/theme-bulma/master/public/logo.svg\"){kind=logo}
\n![](\"https://img.shields.io/npm/v/@oruga-ui/theme-bulma.svg?logo=npm\")
\n ![](\"https://img.shields.io/npm/dt/@oruga-ui/theme-bulma.svg\")
\n ![](\"https://img.shields.io/badge/chat-on%20discord-7289DA.svg?logo=discord\"){kind=icon}
\n ![](\"https://img.shields.io/badge/ko--fi-donate-%23FF5E5B?style=flat&logo=ko-fi&logoColor=white\"){kind=icon}