Customize Theme

Customize your application's default colors codes easily in real time.


Changing Color Variables


Here, we will go over how you can customize the theme/colors in our template.

Theme's colors variables are defined in /styles/theme/_variables.scss file, but it's not preferable to modify this core style sheet file. If you want to override values of these variables, you can use below file i.e. _user-variables.scss. To update primary colors to something else navigate to below mentioned theme file and update value to desired colors in themes you like.

File: /styles/_user-variables.scss

In order to demonstrate this, here is a code example you can paste into /styles/_user-variables.scss, save the file and check the result of customized colors.

// Theme Colors
$primary: #ef1e65 !default;
$secondary: #424e68 !default;
$success: #6786b7 !default;
$info: #c8c6c4 !default;
$warning: #b4c9e1 !default;
$danger: #dd4040 !default;
$light: #f2f2f2 !default;
$dark: #000101 !default;
// Light Colors
$light-primary: #ffeef7 !default;
$light-secondary: #707785 !default;
$light-success: #aeb6c5 !default;
$light-info: #dfddda !default;
$light-warning: #eaecf0 !default;
$light-danger: #f27474 !default;
$light-dark: #151717 !default;
// Dark Colors
$dark-primary: #cb0547 !default;
$dark-secondary: #2b3957 !default;
$dark-success: #476ba5 !default;
$dark-danger: #d32424 !default;
$dark-warning: #85aad3 !default;
$dark-info: #b09377 !default;

Changing Logo


Here, we will go over how you can change or replace current/default branding by replacing the logo path.

File: app.config.js

Open the above mentioned file, located at sourcecode root and modify urls for logo to change logo.

Note :
- Preferable Logo file type : .svg
- Preferable Logo size : Width:150px Height:30px

app: {
...
logo: '/images/brand/logo/logo.svg',
mentorLogo: '/images/mentor/geeks-mentor.svg',
...
}

Changing Favicon


To change the favicon of the theme, you just need to replace favicon.ico file located at below path.

File: /app/favicon.ico
Buy Now