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 buil 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.
If your Gulp tasks are still running in your terminal, we recommend you to stop them (
Ctrl + C) before creating a new theme.
Nephos uses 3 color variables and a set of box shadows that you can customize to control global colors accross 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 immediatly impact all colors in your project.
Some Nephos elements, like buttons, have colored box shadows. Box shadows inherit their colors from the 3 previsously 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 experessions). Here are our converted values:
|$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 exitsing one. in this example, we wil first edit the existing
main.scss file that lives in the
main.scss with your favorite text editor and edit the theme import original statement
Change it to
Now in your terminal, in the root of your project, start Gulp with the following command :