Tutorial to create custom skin

MDB SupportCategory: MDB jQueryTutorial to create custom skin
kmueller222 Pro User asked 8 months ago in MDB pro, version:4

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…



1 Answers
Bartłomiej Malanowski Pro User answered 8 months ago

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 😉

Unicomp Pro User replied 1 day 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)

Bartłomiej Malanowski Pro User replied 1 month ago

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

randy Pro User replied 1 month 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.