How to customize Bulma?

Maybe this is the page you need.

Otherwise, if you've installed sass you might choose to follow this step: I'm no npm expert so I chose to download Bulma, create a custom .sass file and let sass generate my css. This path is explained here: https://bulma.io/documentation/customize/with-sass-cli/

This may be bad form but if you write your own css in the html file, you can add !important to override the bulma colors. i.e. if there's a button color you don't like such as is-primary you can do background-color: blue !important.

Just try not to use !important all over the place.

The better solution would be to download sass -- but I can't help with that. The other answer should help?

First, the best way is not to change the node_module's file content.

The simplest way is to create custom scss file and include Bulma SCSS into it.

@charset "utf-8";
// modify the bulma variables here
$primary: #404BFF;
$navbar-item-img-max-height: 5rem;
$card-header-background-color: $primary;
$card-header-color: white;
$footer-background-color: $primary;
$footer-color: white;
// Import Bulma and Buefy styles
@import "~bulma"; // or fallow the partial import example from docs.

// add custom css here.

I discover that if you set an id="for-example" for a div and then you go to your styles.scss you can create a new class for that id.div like this:

#for-example {
  background-color: blue;
} 

I don't know if is a bad practice but it works for me!