How to overwrite react-firebase-admin's theme?

[Tri R.A. Wibowo]

I see that there is a CSS file in src/assets/css/main.css. How do I overwrite it since it seems to have overwritten Bulma's variables? Preferably there is the Sass version of it for me to import and overwrite it.

I have tried to customize Bulma like so:

// custom.scss
@import 'bulma/sass/utilities/initial-variables.sass';
$primary: rgb(82, 84, 84);
@import 'bulma/bulma.sass';

and import it in index.js after src/assets/css/main.css but it caused styling error.

[Mateo Kruk]

Sorry for the late response!. The CSS file in src/assets/css/main.css doesn't override any Bulma variables. We use it mainly for layout in the project.

I'll give you an example to override the $primary variable of Bulma. You can see more details on the Bulma docs: customize.

// customStyles.scss
@charset "utf-8";

// Set your brand colors
$purple: #8a4d76;

// Update Bulma's global variables
$primary: $purple;

// Import only what you need from Bulma
@import '../node_modules/bulma/sass/utilities/_all.sass';
@import '../node_modules/bulma/sass/base/_all.sass';
@import '../node_modules/bulma/sass/elements/button.sass';

And the difference between what you did it's that you import it after the main.css. :)

[Mateo Kruk]

I'm closing this issue. In the meantime if you have any other question let me know!