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

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