Change sidenav bg

web
mobile

Topic: Change sidenav bg

flynic28 pro asked 3 months ago

Expected behavior

angular.json

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/animate.css/animate.css",
    "src/styles.scss"
],

style.scss

@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/colors';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/variables';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/variables-pro';

@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/bootstrap/bootstrap.scss';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/mdb.scss';

@import './src/theme/_variables.scss';

@import './src/theme/_overrides.scss';
@import './src/theme/_global.scss';

_variables.scss

$sidenav-background-color: black;

I would expect the compiled css in the browser to reflect the updated variable.

.side-nav {
    transition: 0.5s;
    background-color: #2c2f34; // This should be BLACK
    overflow-y: auto;
}

Actual behavior

No variable is updated

Resources (screenshots, code snippets etc.)


Arkadiusz Idzikowski staff commented 3 months ago

We have recently received several reports regarding problems with variable overwriting. We will take a closer look at this problem and try to fix that as soon as possible.


flynic28 pro commented 2 months ago

Is there a timeframe for a potential solution?


Arkadiusz Idzikowski staff answered 2 months ago

There are two workarounds for now:

  1. You can overwrite the background-color property in the .sidenav-bg class instead of updating the scss variable:

mdb-side-nav .sidenav-bg {<br> background-color: red;<br>}

  1. You can use our predefined skin or create custom one:

https://mdbootstrap.com/docs/angular/css/skins/

We can't provide an ETA for the solution for scss variables yet. We will probably need to switch from scss variables to css custom properties, but it would be a breaking change and we would need to add that in one of the major updates.


Please insert min. 20 characters.