There are 3 options to customize Unishop global colors:
- Use predefined color skin. Choose one of 4 existed color .css files.
- Customize global colors via Sass variables
- Replace global colors in CSS
Using predefined color skin
Unishop comes with 4 predefined color schemes. They are found inside
Unishop/dist/css folder. Each file ends with hex number of primary color except for default blue scheme which is
To use chosen color scheme you need to replace link to
styles.min.css in the
head tag of the document. The easiest and fastest way to do that is using .pug templates. Head section is found in
Unishop/src/templates/partials/head.pug. See Using Preprocessors section for
.pug compilation instructions.
Customize global colors via Sass variables
In case you want to create your own color scheme - the fastest and painless way to do that is via Sass variables.
You need to edit
Unishop/src/scss/helpers/_variables.scss file and re-compile new
styles.min.css file either using Prepross or Grunt. Check Using Preprocessors and Working with Grunt sections for instructions.
Blelow is the screenshot of the part of Sass variables file responsible for global colors:
Replace global colors in CSS
This is the hardest way to do things done. I don't recommend it but if you prefer vanilla CSS you can replace all color hex values inside
Unishop/dist/css/styles.min.css with your own using "find and replace" panel of you code editor. Refer to the image above as a guidance.