Layout setting Class
Enable Light/Dark & High Contrast Mode!
<html class="no-js " lang="en" data-theme="light">
Change class in HTML tage .light, .dark, .theme-dark, & .high-contrast
Font Settings
<body class="layout-1 font-opensans">
.font-opensans, .font-quicksand, .font-nunito, .font-raleway
Theme Color Settings
<body class="layout-1" data-Avio="theme-blue">
theme-blue, theme-indigo, theme-cyan, theme-green, theme-orange, theme-blush, theme-red, theme-dynamic
Enable Sidebar dark
<div class="sidebar dark">
Toggle class in sidebar .dark
Background Image (Sidebar)
<div class="sidebar sidebar-img-bg">
Toggle class in sidebar .sidebar-img-bg
Mini Sidebar
<div class="sidebar sidebar-mini">
Toggle class in sidebar .sidebar-mini
Enable RTL Mode!
<body class="layout-1 rtl_mode">
Toggle class in Body tage .rtl_mode
Horizontal Menu
<body class="h-menu">
Just one click change (Vertical menu) to Horizontal Menubar. .h-menu
Page Header Dark Mode
<header class="page-header dark">
Toggle class in Page Header. .dark
More helpful classes

for more about Helper classs References helpers.scss

Background Color
.bg-primary
.bg-secondary
.bg-primary-gradient
.bg-dark
.bg-light
.bg-body
.bg-card
Light Background Color
.bg-light-primary
.bg-light-success
.bg-light-danger
.bg-light-warning
.bg-light-info
Chart Background & Font Color

All chart Background & Text Color will be change based on theme color

.chart-text-color1
.chart-color1
.chart-text-color2
.chart-color2
.chart-text-color3
.chart-color3
.chart-text-color4
.chart-color4
.chart-text-color5
.chart-color5
Font Text Color
.text-primary
.text-secondary
.text-gradient
.color-fff
.color-100
.color-200
.color-300
.color-400
.color-500 (Body font color)
.color-600
.color-700
.color-800
.color-900