Tutorial to create custom skin

kmueller222 asked 11 months ago

Hi there, I like the framework very much.

Is there a tutorial to create own skins, explaining in more detail which sass files and variables to be adjusted ? Which can be used by beginners as well...



Currently, we don't have any tutorial that would help you to create your own skin, but it's not that hard to create new skin. You just need to take a look at sass/mdb/pro/_variables-pro.scss file. Here you'll find this code:
"light-blue": (
"skin-primary-color": #3d799c,
"skin-navbar": #3f5c80,
"skin-footer-color": #3f5c80,
"skin-accent": #b4c2c9,
"skin-flat": #6a9ed3,
"skin-sidenav-item": rgba(29, 54, 86, 0.6),
"skin-sidenav-item-hover": rgba(29, 54, 86, 0.6),
"skin-gradient-start": #69adf4,
"skin-gradient-end": #69adf4,
"skin-mask-slight": rgba(87, 134, 180, 0.5),
'skin-mask-light': rgba(87, 134, 180, 0.65),
"skin-mask-strong": rgba(87, 134, 180, 0.8),
"skin-sn-child": #aadeff,
"skin-btn-primary": #ff4a67,
"skin-btn-secondary": #64c3f0,
"skin-btn-default": #2d486a,
"skin-text": #fff

It's a simple array that you need to duplicate it and customize the colors. You should also change "light-blue" to your custom skin name

I'll write a tutorial as soon as possible ;)

randy commented 4 months ago

It would be great if there were a page that would allow you to preview how each variable affects the skin or at the very least some documentation around this.

Bartłomiej Malanowski commented 4 months ago

Thank you for the tip! I added this to our list of ideas ;)

Unicomp commented 3 months ago

How can I get the one of the existing skin colors out of the system? (I would like to make a slight variation on the black skin for example)

elastic-bee answered 4 weeks ago

any updates here?
i need to customize mdb with our CI and currently its not so easy ^^


if you use Gulp version of MDB Pro, you can see in scss catalog this file: "_custom-skin.scss". You can change default values to yours, save, compile and you will have your custom skin.
And could you explain what do you mean by CI?



elastic-bee commented 4 weeks ago

no, iam using the react pro version.
and iam not sure how i can create a custom skin or overwrite an existing one clean an correctly.

elastic-bee commented 3 weeks ago

CI means corporate identity ...so i mean that i need a custom skin in your company colors ;)


MDB-react team should help you tomorrow with that.



Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No