# Skins

Create custom skins and adapt the theme’s appearance to your brand’s needs.

## Introduction

We want Quick to be more than a theme. And we managed to do so by following the same principles and techniques Bootstrap developed over the years. This is why, now we can offer you a great product built as a framework from the ground-up, meaning:

- modular Sass and HTML components
- consistent variables
- clean and robust code

But now, we took this a step further. We are happy to be the first on Bootstrap Theme to introduce Skins. A beautiful and easy process that will help you to adapt Quick to your brand’s visual necessities. You can change almost anything in terms of styleguide and components. Change a few variables and Quick will adapt: from colors and fonts to components and advanced plugins, everything will look amazing.

## File structure

    quick-website-ui-kit-demo/
    ├── resources/
      └── scss/
      │   ├── skins/
      │   ├──├── SKIN_NAME/
      │   ├──├── .../
      │   ├── custom/
      │   ├──├── _variables.scss
      └── ├──├── styles.scss

## Create a new skin

As you can see, all skin files are stored in the `scss/skins` folder. Each skin should be stored in its own folder. Also, the filenames are give by their color scheme: `_light.scss` or `_dark.scss`.

For example, if you want to create Red Skin you will create the `scss/skins/red` folder. Let’s say you choose a dark color scheme you will create the `scss/skins/red/_dark.scss` file. Within this file you will place all the variables you want to override. Make sure you keep the `!default` flag on. This way we make sure any other custom variable applied in the `custom/_variables.scss` will still take effect.

Any of the pre-built skins can be a great start for your own one. Copy and paste a skin folder and start changing variables.

## Usage

Here are the steps you must follow to activate a Skin:

- open `scss/custom/_variables.scss`
- you will see there are some commented lines that contain @import statement for various skins
- uncomment the one you want to use or import the one you just created
- use the build tools to compile the new sass and preview changes

## Considerations

There are some things you should know when using Skins, especially the ones with dark color schemes.

### Navbar

Depending on the color scheme’s type, light/dark, you will need to change the `.navbar's` tag modifier classes directly in the HTML markup:

- when using light mode you will need to use the `.navbar-light .bg-white` modifier classes (it is used by default)
- when using dark mode you will need to use the `.navbar-dark .bg-dark` modifier classes.

### Footer

Same thing goes for the footer, excepting the situations where you use the `.bg-primary` color or any pre-defined colors. Apply these directly on the `.footer` tag from the HTML markup:

- when using light mode you will need to use the `.footer-light .bg-section-secondary` modifier classes (it is used by default)
- when using dark mode you will need to use the `.footer-dark .bg-dark` modifier classes.