Limitless template provides a very flexible theming support through a set of SCSS files and variables. Currently it has 3 themes:
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
/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
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
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.
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