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