#### SCSS/CSS Files Usage & Customization

Vuexy admin manages all theme scss files in `src/scss/` folder and users scss files inside `assets/scss/` folder. Both `src/scss/` and `assets/` folders can be found in root of the downloaded package.

Gulp command for scss compile will generate all css files in `app-assets/css`.

#### SCSS files structure of `src/scss/` folder

                        vuexy-html-bootstrap-admin-template/
                        ├── src/
                        |   ├── scss/
                        |   |   ├── bootstrap/
                        |   |   ├── bootstrap-extended/
                        |   |   ├── components/
                        |   |   ├── core/
                        |   |   |   ├── colors/
                        |   |   |   |   ├── palette-variables.scss
                        |   |   |   ├── variables/
                        |   |   |   |   ├── _variables.scss
                        |   |   |   |   ├── _components-variables.scss
                        |   |   ├── pages/
                        |   |   ├── plugins/
                        |   |   ├── themes/
                        |   |   |   ├── dark-layout.scss
                        |   |   |   ├── semi-dark-layout.scss
                        |   ├── bootstrap-extended.scss
                        |   ├── bootstrap.scss
                        |   ├── colors.scss
                        |   ├── components.scss

Folder/Files | Details
--- | ---
bootstrap | `bootstrap/` folder contain Bootstrap core scss files, that can be updated with future bootstrap updates.
bootstrap-extended | `bootstrap-extended/` folder contain customized bootstrap scss files for vuexy admin.
components | `components/` folder contain vuexy admin all custom components and pages scss files.
core | `core/` folder contain colors, layouts, menu, mixins and variables folder.
pages | `pages/` folder contains all pages specific scss files.
plugins | `plugins/` folder contains all vendors scss files.
themes | `themes/` folder contains template layouts specific scss files.
bootstrap-extended.scss | `bootstrap-extended.scss` file is for those bootstrap components which are customized for this theme. It include all files from `bootstrap-extended/` folder.
bootstrap.scss | `bootstrap.scss` file is bootstrap file which includes all the core bootstrap files from `bootstrap/` folder. It extends the default bootstrap variable by using file `scss/core/variables/_variables.scss`
colors.scss | `colors.scss` file includes all colors palette related files from `scss/core/colors/` folder.
components.scss | `components.scss` file includes all theme components files from `scss/components/` folder.

To customize the theme default color and styling You can change following files `scss/core/variables/_variables.scss`, `scss/core/variables/_components-variables.scss` & `scss/core/colors/palette-variables.scss` as per your preferred colors & styling.

Heads Up!

It is not recommend to change any scss files inside `src/scss/` folder apart from following `scss/core/variables/_variables.scss`, `scss/core/variables/_components-variables.scss` & `scss/core/colors/palette-variables.scss` scss files to avoid future update conflicts. If you still modify any other files, it may requires to merge it manually with future updates.

- `_variables.scss`: file contain bootstrap variables which overrides default bootstrap variables, You can use any bootstrap variable to customize it. By using this file you can change bootstrap primary, secondary, success, danger etc... colors & lot more.
- `_components-variables.scss`: file contain theme components variables, You can customize it based on your preferences.
- `palette-variables.scss`: file contain all colors variables, You can customize it based on your preferences.

Tip

Always take back-up of following files `scss/core/variables/_variables.scss`, `scss/core/variables/_components-variables.scss` & `scss/core/colors/palette-variables.scss` scss files if you are changing them as some times it require manual merge when we release new updates.

Info

If you are not familiar with SCSS, you can write your own css in `assets/css/style.css` file, it will overrides theme default css.

#### CSS/SCSS files structure for `assets/` folder.

                        vuexy-html-bootstrap-admin-template/
                        ├── assets/
                        |   ├── css/
                        |   |   ├── style.css
                        |   ├── js/
                        |   |   ├── scripts.js
                        |   ├── scss/
                        |   |   ├── style.scss

If you are familiar with SCSS, Use `assets/scss` folder's style.scss file to write your custom scss. Vuexy HTML admin `sass-compile` command will compile this files and generate css files under `assets/css/` folder.

If you are not familiar with SCSS, Use `assets/css` folder's style.css file to write your custom css.

You can add your new files or folder in `assets/` folder to avoid any future conflicts or merge.