Style Customization

Vuely template is developed with Scss and Vuetify so it's easy to change the styling. It uses some custom variables which provide you the more flexibility and control over design.

Changing the Default Theme

We have already covered this topic in the Themes section in the side menu. Please visit that section to get detail information about changing the default theme's.

Theme Customization

When you open the src -> themes folder, you will see, different theme files there. Choose from them the file in which you want to make the desired changes. When you open one of the theme file you will find different color values defined like below:

primaryTheme.js

export default {
   primary: '#5D92F4',
   secondary: '#424242',
   accent: '#82B1FF',
   error: '#FF3739',
   info: '#00D0BD',
   success: '#00D014',
   warning: '#FFB70F'
}

You can make the changes in the color code given above as per your requirements. After all the changes, save the file and open the browser, you will see the new colors in the template.

For more info, check out the following link.

Vuetify — A Material Design Framework for Vue.js

You can find all the style variables(that are used in the given examples) inside the src -> assets -> scss -> _app.variables.scssfile.

Changing the Font Family

We are using Google Fonts in the template as it is free to use and is easily available. For more info, please visit:

Google FontsGoogle Fonts

Step 1: To change the font family in the template, please visit the above link and select the font you wish to apply to your template and copy the embed code & font family. Example:

Embed Code & Font Family

Paste the embed code in index.html file under the public folder.

Make sure to copy the embed code in the head tag of the index.html file.

Step 2: Now go to the src->assets->scss and open the _app.variables.scss file and paste the font family in the variable $font-family-base like:

$font-family-base: 'Open Sans Condensed', sans-serif;

Sidebar Customization

You can easily change the width, background color, text color etc of the sidebar easily. Open the src->components->Header->Header.vue file. For modifications in the width. change the value of the width parameter in the given code:

Header.vue

<v-navigation-drawer
    ...
	:width="250"
	...
>

You can change all other properties of the sidebar from the given variables. You can find these variables inside this src->assets->scss->_app.variables.scss file:

// Sidebar Variable
$sidebar-bg:                   #2E3344;
$sidebar-width:                250px;
$sidebar-nav-color:            #1D2433;
$sidebar-nav-text-size:        14px;
$sidebar-nav-active-color:     $light;
$sidebar-nav-font-weight:      500;
$sidebar-box-shadow:           0 0 10px 0 rgba(0,0,0,0.5);
$sidebar-subnav-font-size:     $sidebar-nav-text-size;
$sidebar-subnav-font-color:    $sidebar-nav-color;

Change Text Colors

You can change the text colors using the given style variables.

// App Text Scale

$gray-dark:                 #273142 !default;
$gray:                      #354052 !default;
$gray-light:                #9799A8 !default;
$gray-lighter:              #DDE6F3 !default;

Gradient Colors

If you want to use gradient colors then use these variables with basic values.

// Gradient Theme Color

$light-primary:         linear-gradient(0deg, #6A11CB 0%, #2575FC 100%); // Primary
$light-success:         linear-gradient(180deg, #00ECBC 0%, #007ADF 100%); // success
$light-pink:            linear-gradient(0deg, #002849 0%, rgba(231,2,94,1) 100%); // Pink
$light-warning:         linear-gradient(180deg, #FF9944 0%, #FC6076 100%); // warning
$light-purple:          linear-gradient(180deg, #3023AE 0%, #C86DD7 100%);// purple

Content Block

Customise your main block settings with help of the following variables.

// App Custom Card

$card-bg:                         #FDFDFD;
$card-border-radius:              5px;
$card-border:                     1px solid #DDE6F3;
$card-spacing:                    1.25rem 1.25rem;//20px 20px
$card-margin-bottom:              1.25rem; //20px
$card-shadow:                     0 8px 13px 0 rgba(0,0,0,0.12);
$card-hover-shadow:               none;

// Card Title

$card-title-color:                #354052;
$card-title-font-size:            1.375rem; //22px
$card-title-transform:            capitalize;
$card-title-weight:               600;
$card-title-spacing:              1.25rem 1.25rem;//20px 20px

// Card Contextual link

$contextual-link-size:            1.25rem;//20px
$contextual-link-color:           #D8D8D8;

Change Header Styling

You can also modify the header using the variable defined below:

// App Header Varibale

$navbar-bg:                     $purple;

Main Container

To change app background color, go to _app.variables.scss file and change the following values.

// Settings for the  <body>  element.

$body-bg:                       $light;
$body-color:                    $gray;
$font-family-base:              'Source Sans Pro', sans-serif;
$border-color:                  darken($navbar-bg, 5%);

Heading

With help of following variables you can easily change font sizes for all the headings ( h1 to h6 ).

// Setting For Heading Element

$h1-font-size:                1.75rem !default;      // 28px
$h2-font-size:                1.5rem !default;       // 24px
$h3-font-size:                1.375rem !default;     // 22px
$h4-font-size:                1.125rem !default;     // 20px
$h5-font-size:                1rem !default;         // 16px
$h6-font-size:                0.875rem !default;     // 14px

Dark Theme Variable

Change the dark theme variables as per your requirement.

// Dark theme

$dark-bg:                      #424242;
$dark-bg-color:                #fff;
$dark-bg-container:            #303030;
$dark-border-color:            rgba(0, 0, 0, 0.1);