Topic: Correct way to set global body text color

BigMonkey pro asked 9 months 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 9 months 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 9 months 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 9 months ago

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

Please insert min. 20 characters.


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



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