Theme Variables

Theming works via css variables. Every theme property is defined for different color schemes. Here is the list:

Colors

html[data-color='light-blue'] {
  --primary: #2499e3;                                         // Primary theme color (Class: text-primary)
  --secondary: #50c6db;                                       // Secondary theme color (Class: text-secondary)
  --tertiary: #1859bb;                                        // Tertiary theme color (Class: text-tertiary)
  --quaternary: #2a2c7c;                                      // Quaternary theme color (Class: text-quaternary)
  --primary-rgb: 36, 153, 227;                                // Primary theme color in rgb format
  --secondary-rgb: 48, 198, 220;                              // Secondary theme color in rgb format
  --tertiary-rgb: 24, 89, 187;                                // Tertiary theme color in rgb format
  --quaternary-rgb: 42, 44, 124;                              // Quaternary theme color in rgb format
  --primary-darker: #1d7ab4;                                  // Darker version of the primary theme color
  --secondary-darker: #409faf;                                // Darker version of the secondary theme color
  --tertiary-darker: #124188;                                 // Darker version of the tertiary theme color
  --quaternary-darker: #1a1a4d;                               // Darker version of the quaternary theme color
  --body: #4e4e4e;                                            // Main text color (Class: text-body)
  --alternate: #7c7c7c;                                       // Alternative text color, lighter than body (Class: text-alternate)
  --muted: #afafaf;                                           // Muted text color, lighter than alternate (Class: text-muted)
  --separator: #e6e6e6;                                       // Separator text color, lighter than muted (Class: text-separator)
  --separator-light: #f1f1f1;                                 // Light separator text color, lighter than separator (Class: text-separator-light)
  --body-rgb: 59, 59, 59;                                     // Main text color in rgb format
  --alternate-rgb: 124, 124, 124;                             // Alternative text color in rgb format
  --muted-rgb: 176, 176, 176;                                 // Muted text color in rgb format
  --separator-rgb: 221, 221, 221;                             // Separator text color in rgb format
  --separator-light-rgb: 241, 241, 241;                       // Light separator text color in rgb format
  --background: #f9f9f9;                                      // Background color of the template (Class: bg-background)
  --foreground: #ffffff;                                      // Foreground color of the template (Class: bg-foreground)
  --background-rgb: 249, 249, 249;                            // Background color of the template in rgb format
  --foreground-rgb: 255, 255, 255;                            // Foreground color of the template in rgb format
  --background-theme: #eaf0f1;                                // Lighter version of the primary theme color (Class: bg-theme)
  --background-light: #f8f8f8;                                // Light background color (Class: bg-light)   
  --gradient-1: #238dcf;                                      // Navbar first gradient color (Class: bg-gradient-single-1)
  --gradient-2: #31afe6;                                      // Navbar second gradient color (Class: bg-gradient-single-2)
  --gradient-3: #2fb9f5;                                      // Navbar third gradient color (Class: bg-gradient-single-3)
  --gradient-1-darker: #1e7cb6;                               // Darker version of the navbar first gradient color
  --gradient-2-darker: #2d9fcf;                               // Darker version of the navbar second gradient color
  --gradient-3-darker: #59b4c4;                               // Darker version of the navbar third gradient color
  --light-text: #fff;                                         // Light text color that used over colored backgrounds (Class: text-white)
  --dark-text: #343a40;                                       // Dark text color(Class: text-black)
  --light-text-darker: #eeeeee;                               // Darker version of the light text color
  --dark-text-darker: #23272b;                                // Darker version of the dark text color
  --light-text-rgb: 255, 255, 255;                            // Light text color in rgb format
  --dark-text-rgb: 52, 58, 64;                                // Dark text color in rgb format
  --danger: #cf2637;                                          // Danger color (Class: text-danger)
  --info: #279aac;                                            // Info color (Class: text-info)
  --warning: #ebb71a;                                         // Warning color (Class: text-warning)
  --success: #439b38;                                         // Success color (Class: text-success)
  --light: #dadada;                                           // Light color (Class: text-light)
  --dark: #4e4e4e;                                            // Dark color (Class: text-dark)
  --danger-darker: #771a23;                                   // Darker version of the danger color 
  --info-darker: #19545d;                                     // Darker version of the info color 
  --warning-darker: #aa830f;                                  // Darker version of the warning color
  --success-darker: #285422;                                  // Darker version of the success color
  --light-darker: #c9c9c9;                                    // Darker version of the light color
  --dark-darker: #282828;                                     // Darker version of the dark color
  --body-darker: #333333;                                     // Darker version of the body color
  --alternate-darker: #616161;                                // Darker version of the alternate color
  --muted-darker: #888888;                                    // Darker version of the muted color
  --separator-darker: #c0c0c0;                                // Darker version of the separator color
  --danger-rgb: 182, 40, 54;                                  // Rgb version of the danger color
  --info-rgb: 41, 138, 153;                                   // Rgb version of the info color
  --warning-rgb: 235, 183, 26;                                // Rgb version of the warning color
  --success-rgb: 65, 139, 56;                                 // Rgb version of the success color
  --light-rgb: 218, 218, 218;                                 // Rgb version of the light color
  --dark-rgb: 78, 78, 78;                                     // Rgb version of the dark color
  --menu-shadow: 0px 3px 10px rgba(0, 0, 0, 0.12);            // Navbar shadow
  --menu-shadow-navcolor: 0px 3px 10px rgba(0, 0, 0, 0.07);   // Light navbar shadow
  --background-navcolor-light: #fff;                          // Light navbar background
  --background-navcolor-dark: #253a52;                        // Dark navbar background
  --theme-image-filter: hue-rotate(0deg);                     // Image filter to change illustration colors to selected theme
}

Radius

html[data-radius='rounded'] {
  --border-radius-xl: 50px;                                   // Extra large border radius (Class: rounded-xl)
  --border-radius-lg: 16px;                                   // Large border radius (Class: rounded, rounded-lg)
  --border-radius-md: 10px;                                   // Medium border radius (Class: rounded-md)
  --border-radius-sm: 6px;                                    // Small border radius (Class: rounded-sm)
}

Root

:root {
  --transition-time: 400ms;                                     // Standard transition time
  --transition-time-long: 1000ms;                               // Long transition time
  --transition-time-short: 200ms;                               // Short transition time
  --nav-size-slim: 5rem;                                        // Horizontal navigation height
  --nav-size: 18rem;                                            // Vertical navigation width
  --footer-size: 4.5rem;                                        // Footer height
  --input-height: 2.25rem;                                      // Height of the standard inputs, buttons and so on.
  --small-title-height: 2rem;                                   // Content title height
  --font: 'Nunito Sans', sans-serif;                            // Body font
  --font-heading: 'Montserrat', sans-serif;                     // Heading font
  --card-spacing: 2rem;                                         // Standard card padding
  --card-spacing-sm: 1.25rem;                                   // Small card padding
  --card-spacing-xs: 0.75rem;                                   // Extra small card padding
  --main-spacing-horizontal: 2.5rem;                            // Main content horizontal padding
  --main-spacing-vertical: 2rem;                                // Main content vertical padding
  --title-spacing: 1.25rem;                                     // Page title bottom margin

  @include respond-below(lg) {
    --main-spacing-horizontal: 2rem;                            // Smaller main content horizontal padding for large screens and below
  }
  @include respond-below(md) {
    --nav-size-slim: 4rem;                                      // Smaller height of the horizontal navigation for medium screens and below
    --title-spacing: 1rem;                                      // Smaller page title bottom margin for medium screens and below
    --footer-size: 4rem;                                        // Smaller footer height for medium screens and below
  }
  @include respond-below(sm) {
    --card-spacing: 1.75rem;                                    // Smaller card padding for small screens and below
    --footer-size: 3rem;                                        // Smaller footer height for small screens and below
    --main-spacing-horizontal: 1.25rem;                         // Smaller main content horizontal padding for small screens and below
    --main-spacing-vertical: 1.25rem;                           // Smaller main content vertical padding for small screens and below
  }
}

You may override css variables within inline css or an external file.

/* Override a variable from a certain theme */
html[data-color='light-blue'] { 
  --body: red;
}

/* Overriding a variable globally */
:root {
  --body: red !important;
}