Topic: Help with customising Colors (plain sass)

albertorp priority asked 2 months ago


I need help with customising mdbootstrap. I do not know why is it so frustratingly difficult. I've tried all the approaches I've been able to find, with npm and with webstarter, and nothing works straight out of the box.

I just need to change the colors (all, not only the primary and secondary), and do something like this (for bootstrap): https://www.freecodecamp.org/news/how-to-customize-bootstrap-with-sass/

i.e. I want to have my own custom.scss and write something like:

$primary: teal;
$secondary: green;

@import "../mdbootstrap/src/mdb/scss/mdb.pro";

This does not work, and I am not even sure if this import would be the right one

I've managed to make it partially work by overriding this in my custom.scss

$theme-colors: (
"primary":    #0b4f6c,
);

And when I do this, some elements in the webpage (div backgrounds, navbar backgrounds) do work an appear in the right color, but other elements (buttons, list groups) do not, and revert back to another color.

I've got the src folder in my project folder, and I am using VS Code and the Live SASS compiler extension.

I'm new to SASS and CSS, and it looks very frustrating. I would suppose that 99% of the sites using mdbootstrap (or bootstrap) will want to change their colors, and it is the most difficult thing I've encountered so far! (for context, I have been able to integrate a few mdbootstrap plugins with Django, and this was much easier!)

Any help will be greatly appreciated!!

Thanks!


Grzegorz Bujański staff answered 2 months ago


To change the primary and secondary colors, we recommend using our theming.

@import '../mdbootstrap/src/mdb/scss/mdb.pro.scss';

$my-theme-primary: #5050aa; // theme primary color, change this value to customize theme
$my-theme-secondary: #dbdcdd; // theme secondary color, change this value to customize theme

$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

Of course, you can still change the other variables in the same way as you mentioned above - declaring the variable before importing MDB.

The method we recommend is declaring your own variables in our source files - src/scss/custom/_variables.scss. This file was created to make it easier to declare your own SCSS variables.

All available variables can be found in the files src\scss\pro\_variables.scss and src\scss\free\_variables.scss

Some variables are also in src\scss\bootstrap-rtl-fix\_variables.scss. But these are Bootstrap variables and some of them have been overwritten in src\scss\free\_variables.scss and src\scss\pro\_variables.scss


albertorp priority answered 2 months ago


Update, since I've now managed to make the buttons work as expected, but the lists and notes do not work. I've used the 'custom.scss':

$primary: #5050aa;
$secondary: #dbdcdd;

@import "../mdbootstrap/src/mdb/scss/mdb.pro.scss";

After compiling, I've used the resulting custom.css in the

<link rel="stylesheet" href="home/css/kronobox.css" type="text/css" />

And I've removed the reference to mdbootstrap/css/mdb.min.css

Now the following div will show the correct colors for the buttons, but not for the notes or the list-items:

<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>



<p class="note note-primary">
    <strong>Note primary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
    delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
  </p>

  <p class="note note-secondary">
    <strong>Note secondary:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing
    elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui
    necessitatibus delectus placeat illo rem id nisi consequatur esse, sint perspiciatis
    soluta porro?
  </p>

  <p class="note note-success">
    <strong>Note success:</strong> Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
    delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?
  </p>



  <ul class="list-group list-group-light">      
    <li class="list-group-item px-3 border-0 rounded-3 list-group-item-primary mb-2">A simple primary list group item</li>
    <li class="list-group-item px-3 border-0 rounded-3 list-group-item-secondary mb-2">A simple secondary list group item</li>
    <li class="list-group-item px-3 border-0 rounded-3 list-group-item-success mb-2">A simple success list group item</li>
    <li class="list-group-item px-3 border-0 rounded-3 list-group-item-danger mb-2">A simple danger list group item</li>
  </ul>

I'm still not sure if there is a better way, but perhaps this helps someone



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: All
  • Browser: All
  • OS: all
  • Provided sample code: No
  • Provided link: Yes