Topic: Correct way to set global body text color

BigMonkey pro asked 1 year ago


What is the correct way to set global body color via scss?

I can do something like

:root { --mdb-body-color: red; }

but it seems strange, is there a scss variable that can be set which will override the text color?


Grzegorz Bujański staff answered 1 year ago


If you want to override the body color, you have few options

  1. overwrite the scss $body-color variable
  2. modify the scss $body-color variable in the source files (src/scss/free/_variables.scss)
  3. override css --mdb-body-color variable
  4. modify css --mdb-body-color variable in the source files (src/scss/bootstrap-rtl-fix/_root.scss);

Options 2 and 4 require recompiling the source code of the MDB styles. Option 1 requires using scss and compiling the scss code. Option 3 is the most convenient. Just overwrite the css variable. It doesn't require using sass and recompiling styles.

If you are using scss in your project you can just overwrite the scss variable. But if you only use css code in your project, I suggest overriding the css variable.


BigMonkey pro answered 1 year ago


But this results in --mdb-body-color being declared twice, first its included by the default MDB scss build and then its declared second time with my override.

Is there a way to override the default color thats used for the default --mdb-body-color variable in a way that doesn't duplicate things nor requires editing MDB core source files?

This seems so basic I must be missing something.


Kamila Pieńkowska staff answered 1 year ago


--mdb-body-color is a variable you are asking about.



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No