Theming

Introduction

Looper comes with scss directory in src/assets. In the scss directory you will look file structure that looks like this:

scss/
├── custom/
│   ├── _variables-custom-dark.scss
│   └── _variables-custom.scss
├── dark/
│   ├── bootstrap/
│   ├── components/
│   ├── _mixins.scss
│   ├── _variable-bs-overrides.scss
│   └── _variables.scss
├── default/
│   ├── bootstrap/
│   ├── components/
│   ├── _mixins.scss
│   ├── _variable-bs-overrides.scss
│   └── _variables.scss
├── custom-dark.scss
├── custom.scss
├── theme-dark.scss
└── theme.scss

Looper comes with `default` and `dark` skin which are separated in their own folders, see the folder structure above. Whenever possible, avoid modifying Looper core files. You can use _variable-custom.scss and custom.scss instead if you want to modify or creating new components. This is the best strategy to make it easier for you to update Looper when a new version is released.

Bootstrap

This folder is where custom bootstrap styles lives. With some effort, you can modify the look of Bootstrap components by override Bootstrap variables using _variable-custom.scss file. If you want to go deeper, you can use our custom.scss file to write your own styles.

Components

The components directory contains all new components that included in Looper. Each components separated in their own files in this directory. You can edit the look of each components by override looper components variables using _variable-custom.scss file, as well as custom.scss if you want to write your own styles.