Configuration Options

File: src/layouts/layout.component.ts

                    
// default settings
layoutType = "vertical || horizontal || RTL || Dark";
layoutWidth = "fluid || boxed";

leftSidebarTheme = "default || dark || Colored";
leftSidebarWidth = "compact || mini";
                    
                  

Description of Fields

Class	Description
data-sidebar="colored"	Add attribute on body to reflect. This attribute used for colored sidebar
data-top="colored"	Add attribute on body to reflect. This attribute used for colored topbar
vertical-collpsed	Add class on body to reflect. This class used for mini sidebar
data-sidebar-size="small"	Add attribute on body to reflect. This attribute used for compact sidebar
data-sidebar="dark"	Add attribute on body to reflect. This attribute used for dark sidebar
RTL Layout	Add stylesheet app-rtl.scss
Dark Layout	Add stylesheet app-dark.scss
data-layout="horizontal" data-topbar="colored" data-layout-size="boxed"	Horizontal layout add attribute on body to reflect. This attribute used for horizontal
data-layout="horizontal" data-topbar="dark" data-layout-size="boxed"	Horizontal layout add attribute on body to reflect. This attribute used for dark horizontal topbar
data-layout="horizontal" data-layout-size="boxed" and class vertical-collpsed	Horizontal layout add attribute on body to reflect. This attribute used for light horizontal topbar

How to Change Logo For Vertical Layout

File: src/partials/topbar.html

                    
<div class="navbar-brand-box">
  <a href="index.html" class="(logo || logo-dark)">
  <span class="logo-lg">
    <img src="assets/images/(logo || logo-light).png" alt="" height="30" />
  </span>
  <span class="logo-sm">
    <img src="assets/images/(logo || logo-light).png" alt="" height="30">
  </span>
  </a>
</div>
                    
                  

How to Change Logo For Horizontal Layout

File: src/partials/topbar-horizontal.html

                    
<div class="navbar-brand-box">
  <a href="index.html" class="(logo || logo-dark)">
  <span class="logo-lg">
    <img src="assets/images/(logo || logo-light).png" alt="" height="30" />
  </span>
  <span class="logo-sm">
    <img src="assets/images/(logo || logo-light).png" alt="" height="30">
  </span>
  </a>
</div>
                    
                  

How to Change Global Fonts

we have used google fonts in our template. so, when you change the fonts of the theme go tho the assets -> scss -> custom -> fonts folder and open _fonts.scss file. In that file use your own font. After this change fonts in assets -> scss -> variable.scss file

                    
@import url('https://fonts.googleapis.com/css?family=Nunito:400,500,600,700,900&display=swap');
                    
                  

                    
$font-family-sans-serif: 'Nunito Sans', sans-serif;
                    
                  

Use can also insert font in index.html

                    

<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800,900&display=swap"
rel="stylesheet"
/>