Theming

Nephos is built following a CSS modular approach. We've made it easy for you to customize theme colors. In this section, we are going to setup a theme from scratch to help you get started.

Creating a Theme

Let's start from the same example that we build above. Let's say that the Nephos-gulp/scss/partials/_theme-default.scss that Nephos uses doesn't fit your needs and that you want to customize it. Let's start from scratch to make you understand how you can create a new theme in a few minutes.

Add a new Theme

Create a new file in src/assets/scss/base/. For the sake of the example, we will name this file _theme-example.scss . Notice the underscore at the start of the file name. Don't forget it or your project will break.

TIP

If your Gulp tasks are still running in your terminal, we recommend you to stop them (Ctrl + C) before creating a new theme.

Theme colors

Nephos uses 3 color variables and a set of box shadows that you can customize to control global colors across the template. There are 3 main variables :

• Primary color
• Secondary color
• Accent color

Our new example theme will use primary red (#f95c64), secondary blue (#325bff) and accent purple (#dc2dff) as the main colors (these colors are just a random example, do not use in production and pick your own colors instead). Lets create those new variables. Add this to your src/assets/scss/base/_theme-example.scss file :

/*! _theme-example.scss | My Project | My Name */

/* ==========================================================================
Example theme variables
========================================================================== */

$primary: #f95c64;
$secondary: #325bff;
$accent: #dc2dff;

Every Nephos component and layout element rely on these variables. Changing them will immediately impact all colors in your project.

Theme shadows

Some Nephos elements, like buttons, have colored box shadows. Box shadows inherit their colors from the 3 previously defined color variables. Before defining the theme's box shadows, we need to convert our main hex variables to the rgba format. There are many tools to do that quickly and for free, just search on Google (note that you are not forced to do this as you can directly use color variables inside rgba expressions). Here are our converted values:

Variable	Hex	Rgb
$primary	#f95c64	rgb(249, 92, 100)
$secondary	#325bff	rgb(50, 91, 255)
$accent	#dc2dff	rgb(220, 45, 255)

Now that we have our converted values, we can setup box shadows using the rgba format, which adds the alpha channel for transparency :

//Base shadow
$base-shadow: rgba(0, 0, 0, 0.12);

//Primary box shadow
$primary-shadow-from: rgba(249, 92, 100, 0.42);
$primary-shadow-to: rgba(249, 92, 100, 0.2);
$primary-box-shadow:  0 14px 26px -12px $primary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $primary-shadow-to !important;

//Secondary box shadow
$secondary-shadow-from: rgba(50, 91, 255, 0.42);
$secondary-shadow-to: rgba(50, 91, 255, 0.2);
$secondary-box-shadow:  0 14px 26px -12px $secondary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $secondary-shadow-to !important;

//Accent box shadow
$accent-shadow-from: rgba(220, 45, 255, 0.42);
$accent-shadow-to: rgba(220, 45, 255, 0.2);
$accent-box-shadow:  0 14px 26px -12px $accent-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $accent-shadow-to !important;

Activating a Theme

You're almost ready to start using your new theme but first, we need to wire it to the core SCSS file. You can create a new core file or edit the existing one. in this example, we will first edit the existing main.scss file that lives in the src/assets/scss/ folder.

Open main.scss with your favorite text editor and edit the theme import original statement

@import 'base/theme-default';

Change it to

@import 'base/theme-example';

Now in your terminal, in the root of your project, start Gulp with the following command :

gulp dev

Congratulations, your template is setup with a brand new theme you just created. You are now ready to start customizing. Now that you have a global understanding of how Nephos works, you can use the CSS and JS reference sections of this documentation to get a grasp on Nephos classes, classes modifiers and javascript options.