Change sidenav bg


Topic: Change sidenav bg

flynic28 free asked 2 years 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 2 years 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 free commented 2 years ago

Is there a timeframe for a potential solution?


Arkadiusz Idzikowski staff answered 2 years 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.

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: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.7.0
  • Device: Mac
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No