Themes
This part of the documentation will explain how to change the current theme to pages pre-build themes, pages themes are made with concentrated color palete and its not just changing the theme to pure red but entire color pallete and its done by just replacing one line of code
We have already included 4 pre-made themes found inside pages/css/themes/ To switch the theme remove the exsisting pages.css to the one located in inside themes/ folder
Default
<link class="main-stylesheet" href="pages/css/pages.css" rel="stylesheet" type="text/css" />Corporate
<link class="main-stylesheet" href="pages/css/themes/corporate.css" rel="stylesheet" type="text/css" />Retro
<link class="main-stylesheet" href="pages/css/themes/retro.css" rel="stylesheet" type="text/css" />Unlax
<link class="main-stylesheet" href="pages/css/themes/unlax.css" rel="stylesheet" type="text/css" />Abstract
<link class="main-stylesheet" href="pages/css/themes/abstract.css" rel="stylesheet" type="text/css" />
Less works much easier where you can switch the theme by simply changing the varriable to the theme name
The varriable is located at pages/src/less/pages.less
Varriable
@theme-name
Example
@theme-name:"simple";
The themes will be found under pages/src/less/theme/ folder
Step One
Create a new folder under the less/theme/my_theme
Step Two
Create a new file name called theme.less under the less/theme/my_theme and add the following code
@import "var.less";
Step Three
Create a new file name called var.less under the less/theme/my_theme and import the code ofless/theme/default/var.less to it and change the following varriables
Main Base color
@color-master
Primary Colors
@color-success
@color-complete
@color-primary
@color-warning
@color-danger
@color-info
Step Four
Change the variable @theme-name to your theme name in less/pages.less
