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

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

Step Four

Change the varriable @theme-name to your theme name in less/pages.less