Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Cartzilla
          v3.1.1
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Customize
            
Colors

          



          
          

            
The color scheme of this template is defined by two sets of color variables, ensuring consistent aesthetics across both light and dark color modes.



            
            

              
Grayscale and Theme colors

              
These colors remain constant regardless of the selected color mode:

              
Grayscale

              

                
                
$white:    #fff !default;
$gray-50:  #f5f7fa !default;
$gray-100: #eef1f6 !default;
$gray-200: #e0e5eb !default;
$gray-300: #cad0d9 !default;
$gray-400: #9ca3af !default;
$gray-500: #6c727f !default;
$gray-600: #4e5562 !default;
$gray-700: #333d4c !default;
$gray-800: #222934 !default;
$gray-900: #181d25 !default;
$gray-950: #131920 !default;
$black:    #000 !default;

              

              
Theme colors

              

                
                
$primary:   #f55266 !default;
$secondary: $gray-500 !default;
$success:   #33b36b !default;
$info:      #2f6ed5 !default;
$warning:   #fc9231 !default;
$danger:    #f03d3d !default;
$light:     $white !default;
$dark:      $gray-800 !default;

              

            



            
            

              
Color modes dependant colors

              
In addition to the standard grayscale and theme colors, this template includes a set of color variables that adapt based on the selected color mode - light or dark. These dependant colors ensure that the template maintains visual consistency and optimal readability across different environments.

              
For Light (default) mode

              

                
                
// src/scss/_variables.scss

// Emphasis text
/* stylelint-disable */
$primary-text-emphasis:       adjust-color($primary, $lightness: -10%) !default;
$secondary-text-emphasis:     $gray-700 !default;
$success-text-emphasis:       adjust-color($success, $lightness: -10%) !default;
$danger-text-emphasis:        adjust-color($danger, $lightness: -10%) !default;
$warning-text-emphasis:       adjust-color($warning, $lightness: -10%) !default;
$info-text-emphasis:          adjust-color($info, $lightness: -10%) !default;
$light-text-emphasis:         $gray-700 !default;
$dark-text-emphasis:          $gray-900 !default;
/* stylelint-enable */

// Subtle backgrounds
$primary-bg-subtle:           tint-color($primary, 90%) !default;
$secondary-bg-subtle:         $gray-50 !default;
$success-bg-subtle:           tint-color($success, 90%) !default;
$danger-bg-subtle:            tint-color($danger, 90%) !default;
$warning-bg-subtle:           tint-color($warning, 90%) !default;
$info-bg-subtle:              tint-color($info, 90%) !default;
$light-bg-subtle:             $white !default;
$dark-bg-subtle:              tint-color($dark, 92%) !default;

// Subtle borders
$primary-border-subtle:       tint-color($primary, 80%) !default;
$secondary-border-subtle:     $gray-200 !default;
$success-border-subtle:       tint-color($success, 80%) !default;
$danger-border-subtle:        tint-color($danger, 80%) !default;
$warning-border-subtle:       tint-color($warning, 80%) !default;
$info-border-subtle:          tint-color($info, 80%) !default;
$light-border-subtle:         $gray-100 !default;
$dark-border-subtle:          $gray-200 !default;

// User selection color
$user-selection-color:        rgba($gray-900, .1) !default;

// Body colors
$body-color:                  $gray-600 !default;
$body-bg:                     $white !default;
$body-secondary-color:        $gray-500 !default;
$body-secondary-bg:           $gray-100 !default;
$body-tertiary-color:         $gray-400 !default;
$body-tertiary-bg:            $gray-50 !default;
$body-emphasis-color:         $gray-800 !default;
$link-color:                  $info !default;

// Headings color
$headings-color:              $gray-900 !default;

// Common components colors
$border-color:                $gray-200 !default;
$component-color:             $gray-700 !default;
$component-hover-color:       $gray-900 !default;
$component-hover-bg:          $gray-50 !default;
$component-active-color:      $gray-900 !default;
$component-active-bg:         $gray-100 !default;
$component-disabled-color:    $gray-400 !default;

// Focus ring color
$focus-ring-color:            rgba($gray-900, $focus-ring-opacity) !default;

              

              
For Dark mode

              

                
                
// src/scss/_variables-dark.scss
// Emphasis text
/* stylelint-disable */
$primary-text-emphasis-dark:        adjust-color($primary, $lightness: -5%) !default;
$secondary-text-emphasis-dark:      $gray-200 !default;
$success-text-emphasis-dark:        adjust-color($success, $lightness: -5%) !default;
$danger-text-emphasis-dark:         adjust-color($danger, $lightness: -5%)!default;
$warning-text-emphasis-dark:        adjust-color($warning, $lightness: -5%) !default;
$info-text-emphasis-dark:           adjust-color($info, $lightness: -5%) !default;
$light-text-emphasis-dark:          $gray-200 !default;
$dark-text-emphasis-dark:           $white !default;
/* stylelint-enable */

// Subtle backgrounds
$primary-bg-subtle-dark:            mix($gray-900, $primary, 90%) !default;
$secondary-bg-subtle-dark:          $gray-800 !default;
$success-bg-subtle-dark:            mix($gray-900, $success, 90%) !default;
$danger-bg-subtle-dark:             mix($gray-900, $danger, 90%) !default;
$warning-bg-subtle-dark:            mix($gray-900, $warning, 90%) !default;
$info-bg-subtle-dark:               mix($gray-900, $info, 90%) !default;
$light-bg-subtle-dark:              $gray-900 !default;
$dark-bg-subtle-dark:               $gray-950 !default;

// Subtle borders
$primary-border-subtle-dark:        mix($gray-900, $primary, 80%) !default;
$secondary-border-subtle-dark:      $gray-700 !default;
$success-border-subtle-dark:        mix($gray-900, $success, 80%) !default;
$danger-border-subtle-dark:         mix($gray-900, $danger, 80%) !default;
$warning-border-subtle-dark:        mix($gray-900, $warning, 80%) !default;
$info-border-subtle-dark:           mix($gray-900, $info, 80%) !default;
$light-border-subtle-dark:          $gray-700 !default;
$dark-border-subtle-dark:           $gray-950 !default;

// User selection color
$user-selection-color-dark:         rgba($white, .12) !default;

// Body colors
$body-color-dark:                   $gray-300 !default;
$body-bg-dark:                      $gray-900 !default;
$body-secondary-color-dark:         $gray-400 !default;
$body-secondary-bg-dark:            $gray-700 !default;
$body-tertiary-color-dark:          $gray-500 !default;
$body-tertiary-bg-dark:             $gray-800 !default;
$body-emphasis-color-dark:          $gray-100 !default;
$link-color-dark:                   $info !default;

// Headings color
$headings-color-dark:               $white !default;

/ Common components colors
$border-color-dark:                 $gray-700 !default;
$component-color-dark:              $gray-200 !default;
$component-hover-color-dark:        $white !default;
$component-hover-bg-dark:           $gray-800 !default;
$component-active-color-dark:       $white !default;
$component-active-bg-dark:          $gray-700 !default;
$component-disabled-color-dark:     $gray-500 !default;

// Focus ring color
$focus-ring-color-dark:             rgba($white, $focus-ring-opacity) !default;

              

            



            
            

              
Customizing colors

              
To align the template colors with your branding or personal preferences, you can modify the color variables for light mode, dark mode, or both. This customization involves variables from both the standard set (grayscale and theme colors) and those dependant on light and dark modes.

              
Steps to customize color variables:

              
    
                
  1. Identify the variable: Determine which color variable(s) you wish to change. For standard grayscale and theme colors, find these in src/scss/_variables.scss. For mode-dependant colors, check src/scss/_variables.scss for light mode and src/scss/_variables-dark.scss for dark mode.
    2. 
                
  2. Copy the variable: Select and copy the variable(s) from the appropriate file. Variables without mode-specific versions (grayscale and main theme colors) are modified for both modes simultaneously unless overridden.
    3. 
                
  3. 
                  Modify in user variables file: Select and copy the variable(s) from the appropriate file. Variables without mode-specific versions (grayscale and main theme colors) are modified for both modes simultaneously unless overridden.
                  
      
                    
    • Paste the copied variable(s) into src/scss/_user-variables.scss.
      • 
                    
    • Change the value(s) to your desired colors.
      • 
                  
    
                
    4. 
              

              
Here's an example of how to change the primary theme color and a mode-specific background color:

              

                
                
// Inside src/scss/_user-variables.scss

$primary: #0066cc !default; // New primary color for all modes
$background-dark: #101010 !default; // New background color for dark mode

              

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize