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.
/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