Learn FriendKitTheming
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 accross 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 accross 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 immediatly impact all colors on your project.
Theme shadows
Friendkit plays alot 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);