#### Limitless - Themes

##### Themes

###### Overview

Limitless template provides a very flexible theming support through a set of SCSS files and variables. Currently it has 3 themes: `default`, `material` and `dark`. Each theme has its own set of SCSS files, but only those that are theme specific - features that look the same in all layouts and themes are stored in `/shared/` folder. Theme folder contains 3 children folders:

- `/bootstrap_limitless/` - includes all Bootstrap overrides
- `/colors/` - color system. All colors are the same in all themes, but kept separate if you want to use different palette
- `/components/` - all 3rd party components, extensions and libraries

Screenshot - components

Each layout also has separate set of theme specific files located in `/scss/layouts/[layout]/` folder:

- `/compile/` - contains main SCSS files for compilation
- `/layout/` - base layout styling
- `/variables/` - set of variables. If you want to change default styling, try changing variables first as most of the styles can be changed there without touching of core SCSS files

Screenshot - layout

###### Description

Well, actually there's no default theme in the template, because all of them can be used separately and don't depend on each other. This is a perfect solution for easy maintaining - if you need to add a new theme, you just need to create a new folder in 2 places with a set of SCSS files and change variables. That's all.

All themes have similar logic - set of SCSS files in 2 locations and, which is the most important part, SCSS variables. They affect everything - look and feel, spacing, backgrounds, main typography etc etc. All components have own set of variables clearly titles in `_variables-core.scss` and `_variables-custom.scss` files.

There are some differencies though - some files are theme specific (e.g. `ripple` effect). 99% of those are reflected in `components.scss` file, bear that in mind.

List of available themes:

- Default - default here means that it is the first and main theme created for Limitless
- Material - inspired by Google Material Design guidelines, technics and design language
- Dark - planned for next releases. Along with a few more.

Folder and file structure is the same in all themes.

###### Switching between themes

Since components and core features are identical in all themes, you can easily switch between themes - you just need to replace CSS files in your current theme with those from a theme you want to use. Also, depending on component or feature, you can also review JS files with example configurations located in `global_assets/js/demo_pages/` folder - some pages contains a bit different configurations or colors to match theme specifications: file uploaders, selects classes, colors etc. Nothing too important.

Screenshot - replace CSS files