Sign in

Sign up

Tutorial to create custom skin

MDB SupportCategory: MDB jQueryTutorial to create custom skin
kmueller222 Pro User asked 1 week 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 answered 7 days 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 😉