Theming

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

Theme colors

Friendkit uses the same color variables that you can customize to control colors across the template. There are 3 main variables :

• Primary color
• Secondary color
• accent color

Default Friendkit uses primary red (#ff5f59), secondary grey (#757a91) and accent blue (#0062ff) as its main colors. You can change those color hex values and your changes will be reflected across the hole template, thanks to SCSS variables

/*! _variables.scss | Friendkit | © CSS Ninja. 2019-2020 */

/* ==========================================================================
Main color and shadow variables
========================================================================== */

/* ==========================================================================
1. Main colors
========================================================================== */

$primary: #3d70b2;
$secondary: #41d6c3;
$accent: #5596e6;

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

Theme shadows

Friendkit plays a lot with colored box shadows. Box shadows inherit their colors from the 3 main variables, and even from additional colors. You can create more box shadow styles by adding your own colors. Here are the ones defined within the template:

/* ==========================================================================
4. Box shadows
========================================================================== */
$base-shadow: rgba(0, 0, 0, 0.12);

//Primary box shadow
$primary-shadow-from: rgba($primary, 0.42);
$primary-shadow-to: rgba($primary, 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($secondary, 0.42);
$secondary-shadow-to: rgba($secondary, 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($accent, 0.42);
$accent-shadow-to: rgba($accent, 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;

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

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

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

//Light box shadow
$light-box-shadow: -1px 3px 10px 0 rgba(0, 0, 0, 0.06);

//Medium box shadow
$medium-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.09);

//Heavy box shadow
$heavy-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);