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
<link class="main-stylesheet" href="pages/css/pages.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="pages/css/themes/corporate.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="pages/css/themes/retro.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="pages/css/themes/unlax.css" rel="stylesheet" type="text/css" />
<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
Create a new folder under the less/theme/my_theme
Create a new file name called theme.less
under the less/theme/my_theme
and add the following code
@import "var.less";
Create a new file name called var.less
under the less/theme/my_theme
and import the code of
less/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
Change the varriable @theme-name
to your theme name in less/pages.less