Customize DashUI Theme

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.

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.

$primary: #ef1e65 !default;
$secondary: #424e68 !default;
$success: #6786b7 !default;
$info: #c8c6c4 !default;
$warning: #b4c9e1 !default;
$danger: #dd4040 !default;
$light: #f2f2f2 !default;
$dark: #000101 !default;

Changing Logo

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

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

app: {
  ...
  logo: "/images/brand/logo/dashui-logo.svg",
  ...
}

Changing Favicon

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