Topic: Adding a custom skin when using vue-cli

06chaynes pro asked 5 years ago

Do you have a method to add a custom skin when using the Vue version of MDB and building using vue-cli?

Devinec premium answered 4 years ago

I can load the _custom-skins.scss from the projects directory where i copied it to

// Your custom skin
// Skins
$skins: () !default;
$skins: map-merge((
  "darkskin": (
    "skin-primary-color":      #2ad1a3,
    "skin-navbar":             #121212,
    "skin-footer-color":       #121212,
    "skin-flat":               #121212,
    "skin-accent":             #2ad1a3,
    "skin-sidenav-item":       #FF0000,
    "skin-sidenav-item-hover": #FF0000,
    "skin-gradient-start":     #000,
    "skin-gradient-end":       #616161,
    "skin-mask-slight":        rgba(0,0,0, .5),
    "skin-mask-light":         rgba(0,0,0, .65),
    "skin-mask-strong":        rgba(0,0,0, .8),
    "skin-sn-child":           #2ad1a3,
    "skin-btn-primary":        #2ad1a3,
    "skin-btn-secondary":      #0f478a,
    "skin-btn-default":        #121212,
    "skin-text":               #fff
), $skins);

but It does not do anything.

Locally I can change the _custon-skins.scss in the node_module mdbvue folder and it does set a darkskin. However in production environment I dont want to have to alter that file.

Magdalena Dembna staff commented 4 years ago

If you have copied the single file from node modules to your project directory it won't work - first of all, this way mdbvue uses compiled css files, not scss. If you want to use css, follow the guide I send you - you need to load all of the scss files into your project, replace the given file with your own version and compile scss. Kind regards, Magdalena

Magdalena Dembna staff answered 4 years ago

Right now scss management is much easier then it was several releases ago. Add mdbvue with vue cli plugin (vue add mdb - entire instruction can be found here: You can load scss into your project (instead of css which is the default option) and adjust variables according to your needs - Kind regards, Magdalena

Devinec premium answered 4 years ago

So would I copy the _custom_skins.scss into what folder? I want to be able to put like "dark-skin" in the body tag or "custom-skin" etc..

I am trying to load custom skin as well and I can not seem to get it to work. I do not run Gulp as I run NPM. Can you make it easier to figure out and perhaps have some detailed Documentation for this??

Any extra details will help

06chaynes pro answered 5 years ago

Yeah, I'm building the scss now. Unfortunately the path variables are using the old '../path/' relative path links rather than utilizing '~/path', so some tweaks are needed to accomplish this. Hopefully maintaining it across the updates won't be a headache. Thank you.

Magdalena Dembna staff commented 5 years ago

Regrettably, for now there is nothing I can do to make it easier. Good luck with your project. Kind regards, Magdalena

Magdalena Dembna staff answered 5 years ago

Hi, I think that the only way would be to copy scss files into your project's directory and manipulate them from this level. Kind regards, Magdalena

06chaynes pro answered 5 years ago

Sorry, think there's been a misunderstanding. I'm trying to add a new skin, but to do so right now you have to edit the _custom_skins.scss file. Problem is I'm pulling the project in with npm, so I don't want to override the file in node_modules. Is there another way to achieve this?

Magdalena Dembna staff answered 5 years ago

Hi, Essentially, our skins are css classes attached to App's body. So if you want to apply your own custom skin you could do it the same way. Kind regards, Magdalena

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 Vue
  • MDB Version: 5.1.1
  • Device: MacBook Pro
  • Browser: Chrome 73.0.3683.75
  • OS: macOS 10.14.3
  • Provided sample code: No
  • Provided link: No