Ascension comes with 3 built-in color schemes. This page will describe how to switch between them, customize the existing colors or add new ones.

Switching between color schemes

You can switch between color schemes by simply loading a different one in the head portion of your page. By default, all pages are loading color-scheme-1.min.css. If you want a different one of the 3 available, you just replace this:

						                
						                    <!-- Color scheme. -->
						                    <link rel="stylesheet" href="assets/css/skins/color-scheme-1.min.css">
						                
						            

with this:

						                
						                    <!-- Color scheme. -->
						                    <link rel="stylesheet" href="assets/css/skins/color-scheme-2.min.css">
						                
						            

or with this:

						                
						                    <!-- Color scheme. -->
						                    <link rel="stylesheet" href="assets/css/skins/color-scheme-3.min.css">
						                
						            

It's that easy. Just make sure you load the minified version of the file since it improves performance.

Editing an existing color scheme

To edit an existing color scheme you need to open the corresponding file, for example assets/css/skins/color-scheme-1.min.css and make the necessary changes. However, since this is a minified file, you'll be having a hard time understanding the code inside it. That's why I recommend you work on the non-minified files, make your changes and then minify that file.

Now, once you open the non-minified file, here's what you do:

1. Change any color you want by replacing its existing value with a new one. I recommand using the rgb() or rgba() format, but any other format will work just fine.
2. Minify the code you just edited using a tool like minifier.org and then copy the minified contents into the corresponding file with the extension .min.css.
3. Test in a browser to make sure you've made the changes correctly.

Adding a new color scheme

The simplest way to add a new color scheme is to duplicate an existing one and edit that file. It's much easier then starting from scratch. If, however, you want to do that, follow these steps:

1. Create a new file inside assets/css/skins/ and call it color-scheme-x.css, where x stands for the next number in line.
2. Add your styles by consulting the other color schemes and the HTML document.
3. Once you're done, minify the file and load it in the head section of your page, just like in the examples above.

If you're using the advanced workflow, here's how you can work with the color schemes.

Switching between color schemes

Go ahead and open the page you want to edit and change the Dark Matter variables at the top. For example, you would change this:

						                
						                    ---
page-title: Landing 1
page-description: The page description goes here
color-scheme-class: color-scheme-1
font-pair-class: font-pair-1
---
						                
						            

to this:

						                
						                    ---
page-title: Landing 1
page-description: The page description goes here
color-scheme-class: color-scheme-3
font-pair-class: font-pair-1
---
						                
						            

Editing an existing color scheme

To edit an existing color scheme, do the following:

1. Open src/assets/scss/_settings.scss.
2. Depending on which color scheme you want to change, find the appropriate map that looks like this:



						                    
						                        // Default color scheme.
						                        'colors-1': (
						                            'black'        : rgb(6, 12, 22),
						                            'white'        : rgb(255, 255, 255),
						                            'accent'       : rgb(18, 154, 199),
						                            'tertiary-01'  : rgb(16, 61, 113),
						                            'primary'      : rgb(26, 186, 138),
						                            'state-error'  : rgb(204, 75, 55),
						                            'state-warning': rgb(255, 174, 0),
						                            'state-success': rgb(96, 161, 11),
						                            'black-95'     : rgba(6, 12, 22, 0.95),
						                            'black-85'     : rgba(6, 12, 22, 0.85),
						                            'black-65'     : rgba(6, 12, 22, 0.65),
						                            'black-50'     : rgba(6, 12, 22, 0.5),
						                            'black-15'     : rgba(6, 12, 22, 0.15),
						                            'black-4'      : rgba(6, 12, 22, 0.04),
						                            'white-75'     : rgba(255, 255, 255, 0.75),
						                            'white-50'     : rgba(255, 255, 255, 0.5),
						                            'white-25'     : rgba(255, 255, 255, 0.25)            
						                        ),
						                    
						                

3. Change the color values while keeping the same color names. Any color name that you change here needs to be replaced in the corresponding .scss file.

Adding an existing color scheme

Adding a new color scheme consists of a few simple steps:

1. First, create a new Sass partial in src/assets/scss/skins/ and call it color-scheme-x.scss, where x stands for the next number in line.
2. Add your styles by consulting the other color schemes and the HTML document.
3. Open src/assets/scss/_settings.scss.
4. Find the $color-schemes variable and add another entry in the array.
5. Call the new entry colors-x, where x matches the x in the file name.
6. Copy one of the other entries contents, paste it inside the new one and edit the contents accordingly.
7. Open the HTML page you want to edit and change the Dark Matter variable at the top to the newly created color scheme.