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?
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.
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.
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
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.
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
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, 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
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- 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