Topic: Adding a custom skin when using vue-cli

06chaynes pro asked 4 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: 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


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 4 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 4 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 4 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 4 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 4 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: 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
Tags