Adding a custom skin when using vue-cli

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

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?

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

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.

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

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: https://mdbootstrap.com/docs/vue/getting-started/quick-start/#basic). You can load scss into your project (instead of css which is the default option) and adjust variables according to your needs - https://mdbootstrap.com/docs/vue/getting-started/quick-start/#scss. Kind regards, Magdalena

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.