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

Using CSS

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

1. Default

   <link class="main-stylesheet" href="pages/css/pages.css" rel="stylesheet" type="text/css" />

2. Corporate

   <link class="main-stylesheet" href="pages/css/themes/corporate.css" rel="stylesheet" type="text/css" />

3. Retro

   <link class="main-stylesheet" href="pages/css/themes/retro.css" rel="stylesheet" type="text/css" />

4. Unlax

   <link class="main-stylesheet" href="pages/css/themes/unlax.css" rel="stylesheet" type="text/css" />

5. Abstract

   <link class="main-stylesheet" href="pages/css/themes/abstract.css" rel="stylesheet" type="text/css" />

Using Less

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";

Creating your own theme

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