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


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