# Themes

Once you have selected the layout you wish to use in the previous article. You should decide to whether to use CSS or SCSS. Pages support both options. Next Pages comes with 9 color themes to select. See below how to change or use them.

# Using CSS

We have included 9 pre-made themes found inside pages/css/themes/ To switch theme locate the link tag with className="main-stylesheet" in your head tag. Replace href or entire link stylesheet tag with the below ones.

Default

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

Corporate

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

Light

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

Retro

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

Simple

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

Mordern

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

Vibes

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

Unlax

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

Abstract

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

# Using SCSS

SCSS works much easier where you can switch the theme by simply changing the import path to the variable file.

The import is located at pages/scss/pages.scss

# Default

// Import Vars
@import "var";

# Change to

// Import Vars
@import "themes/abstract/var";

you can change it to any the in the pages/scss/themes folder.

# Creating your own theme

The themes will be found under pages/scss/themes folder.

# Step One

Create a new folder under the scss/themes/my_theme

# Step two

Create a new file name called theme.scss under the scss/themes/my_theme and add the following code

@import "var";

# Step Three

Create a new file name called var.scss under the scss/themes/my_theme and import the code of scss/themes/abstract/var.scss to it and change the following variables

# Main Base color

$color-contrast-lowest: #fff; 
$color-contrast-higher: #121212;

# Primary Color

$color-primary: #6462e6;
$color-complete: #2979fb; 
$color-success: #00cea0; 
$color-warning: #fece40; 
$color-danger: #f13d5b; 
$color-info: #363c52; 
$color-menu: #3b3a48;

# Step Four

Change the variable $theme-name to your theme name in scss/pages.scss