Bulma: It would be useful to add an example for custom colors in documentations

[service-paradis]

This is about the Docs.

Missing information in the documentation.

Overview of the problem

This is about the Bulma Docs
I'm using Bulma version [0.7.2]

Description

This page contains a lot of information about customizing variables. Unfortunately, it is unclear how to add custom colors.

Steps to Reproduce

Reading the documentation page at https://bulma.io/documentation/customize/variables/

Expected behavior

Having something along:

_In order to add custom colors, you need to customize $custom-colors variable_.
ex.

$orange: #ff8606;
$orange-invert: findColorInvert($orange);
$custom-colors: ("orange": ($orange, $orange-invert));

Actual behavior

[ryanweal]

I would add a sentence like this to the end:

Now you can use is-orange in your HTML.

[mobayen]

@service-paradis
it's not a Bulma issue but CSS/SASS/SCSS
since custom colors won't override anything

[service-paradis]

@service-paradis
it's not a Bulma issue but CSS/SASS/SCSS
since custom colors won't override anything

@mobayen
I'm only suggesting to add some documentation about using custom colors in Bulma (which is working fine BTW). I'm not having any issues with it.

[duartemvix]

How do I change a basic link color defined by the class "is-active"

I just couldn't override anything following the instructions. I am creating variables before importing Bulma but they are still using the default for Bulma.

I'm using a CDN instead of any local installation of Bulma.

[mobayen]

@duartemvix
you can not override CSS styles by setting variables...
import sass version and then you can override anything,

[duartemvix]

@duartemvix
you can not override CSS styles by setting variables...
import sass version and then you can override anything,

Thanks for clarifying that. It was just what I thought.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alvinkonda]

Just in case someone is interested to customise Bulma with Sass here is the solution:

@charset "utf-8";
@import "../node_modules/bulma/sass/utilities/initial-variables";
@import "../node_modules/bulma/sass/utilities/functions";

// Your custom variables
$primary: $red;

@import "../node_modules/bulma/bulma.sass";

// Your styles