# 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 class="main-stylesheet" in your head tag. Replace href or entire link stylesheet tag with the below ones. 1. Default ```markup ``` 2. Corporate ```markup ``` 3. Light ```markup ``` 4. Retro ```markup ``` 5. Simple ```markup ``` 6. Mordern ```markup ``` 7. Vibes ```markup ``` 8. Unlax ```markup ``` 9. Abstract ```markup ``` ## **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 ```css // Import Vars @import "var"; ``` #### Change to ```css // 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/theme/` folder **Step One** Create a new folder under the `scss/theme/my_theme` **Step Two** Create a new file name called `theme.scss` under the `scss/theme/my_theme` and add the following code ``` @import "var"; ``` **Step Three** Create a new file name called `var.scss` under the `scss/theme/my_theme` and import the code of`scss/theme/abstract/var.scss` to it and change the following variables \ \ **Main Base color** ```css $color-contrast-lowest: #fff; $color-contrast-higher: #121212; ``` #### Primary Color ```css $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` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.pages.revox.io/introduction/themes.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.