MatDash Admin Template by Adminmart.com

Change Global Skin Color

How to Configure Global Skin Colors ?

Note : To execute Gulp, navigate to the package folder containing the package.json file. Open a command prompt in that directory and execute the command "gulp" as demonstrated below. If you require guidance on installing Gulp, please refer to the provided resource. Gulp

                    
gulp

                    
// -------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables.scss
// -------------------------------------------------------------------------------------
                        
$primary: #635bff !default; // Change here
$secondary: #16CDC7 !default; // Change here

                    
// ---------------------------------------------------------------------------------------
// For the Blue Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables-blue.scss
// ---------------------------------------------------------------------------------------
[data-bs-theme="light"][data-color-theme="Blue_Theme"] {
  $primary: #635BFF;
  $secondary: #16CDC7;

  &:root {
    --bs-primary: #{$primary};
    --bs-primary-rgb: 99, 91, 255;
    --bs-secondary: #{$secondary};
    --bs-secondary-rgb: 22, 205, 199;

    .btn-primary {
      --bs-btn-bg: #{$primary};
      --bs-btn-border-color: #{$primary};
      --bs-btn-hover-bg: #5249fe;
      --bs-btn-hover-border-color: #5249fe;
    }

    .btn-secondary {
      --bs-btn-bg: #{$secondary};
      --bs-btn-border-color: #{$secondary};
      --bs-btn-hover-bg: #1cc3bd;
      --bs-btn-hover-border-color: #1cc3bd;
    }
  }
}

                    
// ---------------------------------------------------------------------------------------
// For the Aqua Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables-aqua.scss
// ---------------------------------------------------------------------------------------
[data-bs-theme="light"][data-color-theme="Aqua_Theme"],
[data-bs-theme="dark"][data-color-theme="Aqua_Theme"] {
  $primary: #0074ba;
  $light-primary: rgba($primary, 0.1);
  $secondary: #47d7bc;
  $light-secondary: rgba($secondary, 0.1);

  &:root {
    --bs-primary: #{$primary};
    --bs-primary-rgb: 0, 116, 186;
    --bs-light-primary: #{$light-primary};
    --bs-primary-bg-subtle: #{$light-primary};

    --bs-secondary: #{$secondary};
    --bs-secondary-rgb: 71, 215, 188;
    --bs-light-secondary: #{$light-secondary};
    --bs-secondary-bg-subtle: #{$light-secondary};

    .btn-primary {
      --bs-btn-bg: #{$primary};
      --bs-btn-border-color: #{$primary};
      --bs-btn-hover-bg: #00639e;
      --bs-btn-hover-border-color: #00639e;
    }

    .btn-secondary {
      --bs-btn-bg: #{$secondary};
      --bs-btn-border-color: #{$secondary};
      --bs-btn-hover-bg: #3cb7a0;
      --bs-btn-hover-border-color: #3cb7a0;
    }
  }
}

                    
// ---------------------------------------------------------------------------------------
// For the Cyan Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables-cyan.scss
// ---------------------------------------------------------------------------------------
[data-bs-theme="light"][data-color-theme="Cyan_Theme"],
[data-bs-theme="dark"][data-color-theme="Cyan_Theme"] {
  $primary: #01c0c8;
  $light-primary: rgba($primary, 0.1);
  $secondary: #fb9678;
  $light-secondary: rgba($secondary, 0.1);

  &:root {
    --bs-primary: #{$primary};
    --bs-primary-rgb: 1, 192, 200;
    --bs-light-primary: #{$light-primary};
    --bs-primary-bg-subtle: #{$light-primary};
    
    --bs-secondary: #{$secondary};
    --bs-secondary-rgb: 251, 150, 120;
    --bs-light-secondary: #{$light-secondary};
    --bs-secondary-bg-subtle: #{$light-secondary};

    .btn-primary {
      --bs-btn-bg: #{$primary};
      --bs-btn-border-color: #{$primary};
      --bs-btn-hover-bg: #01a3aa;
      --bs-btn-hover-border-color: #01a3aa;
    }

    .btn-secondary {
        --bs-btn-bg: #{$secondary};
        --bs-btn-border-color: #{$secondary};
        --bs-btn-hover-bg: #d58066;
        --bs-btn-hover-border-color: #d58066;
      }
  }
}

                    
// ---------------------------------------------------------------------------------------
// For the Green Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables-green.scss
// ---------------------------------------------------------------------------------------
[data-bs-theme="light"][data-color-theme="Green_Theme"],
[data-bs-theme="dark"][data-color-theme="Green_Theme"] {
  $primary: #0a7ea4;
  $light-primary: rgba($primary, 0.1);
  $secondary: #ccda4e;
  $light-secondary: rgba($secondary, 0.1);

  &:root {
    --bs-primary: #{$primary};
    --bs-primary-rgb: 10, 126, 164;
    --bs-light-primary: #{$light-primary};
    --bs-primary-bg-subtle: #{$light-primary};
    
    --bs-secondary: #{$secondary};
    --bs-secondary-rgb: 204, 218, 78;
    --bs-light-secondary: #{$light-secondary};
    --bs-secondary-bg-subtle: #{$light-secondary};

    .btn-primary {
      --bs-btn-bg: #{$primary};
      --bs-btn-border-color: #{$primary};
      --bs-btn-hover-bg: #096b8b;
      --bs-btn-hover-border-color: #096b8b;
    }

    .btn-secondary {
      --bs-btn-bg: #{$secondary};
      --bs-btn-border-color: #{$secondary};
      --bs-btn-hover-bg: #d4e069;
      --bs-btn-hover-border-color: #d4e069;
    }
  }
}

                    
// ---------------------------------------------------------------------------------------
// For the Orange Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables-orange.scss
// ---------------------------------------------------------------------------------------
[data-bs-theme="light"][data-color-theme="Orange_Theme"],
[data-bs-theme="dark"][data-color-theme="Orange_Theme"] {
  $primary: #fa896b;
  $light-primary: rgba($primary, 0.1);
  $secondary: #0074ba;
  $light-secondary: rgba($secondary, 0.1);

  &:root {
    --bs-primary: #{$primary};
    --bs-primary-rgb: 250, 137, 107;
    --bs-light-primary: #{$light-primary};
    --bs-primary-bg-subtle: #{$light-primary};

    --bs-secondary: #{$secondary};
    --bs-secondary-rgb: 0, 116, 186;
    --bs-light-secondary: #{$light-secondary};
    --bs-secondary-bg-subtle: #{$light-secondary};

    .btn-primary {
      --bs-btn-bg: #{$primary};
      --bs-btn-border-color: #{$primary};
      --bs-btn-hover-bg: #d5745b;
      --bs-btn-hover-border-color: #d5745b;
    }

    .btn-secondary {
      --bs-btn-bg: #{$secondary};
      --bs-btn-border-color: #{$secondary};
      --bs-btn-hover-bg: #00639e;
      --bs-btn-hover-border-color: #00639e;
    }
  }
}

                    
// ---------------------------------------------------------------------------------------
// For the Purple Theme - Primary-Secondary Color
// ---------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------
// File: package/main/src/assets/scss/variables/_variables-purple.scss
// ---------------------------------------------------------------------------------------
[data-bs-theme="light"][data-color-theme="Purple_Theme"],
[data-bs-theme="dark"][data-color-theme="Purple_Theme"] {
  $primary: #763ebd;
  $light-primary: rgba($primary, 0.1);
  $secondary: #95cfd5;
  $light-secondary: rgba($secondary, 0.1);

  &:root {
    --bs-primary: #{$primary};
    --bs-primary-rgb: 118, 62, 189;
    --bs-light-primary: #{$light-primary};
    --bs-primary-bg-subtle: #{$light-primary};

    --bs-secondary: #{$secondary};
    --bs-secondary-rgb: 149, 207, 213;
    --bs-light-secondary: #{$light-secondary};
    --bs-secondary-bg-subtle: #{$light-secondary};

    .btn-primary {
      --bs-btn-bg: #{$primary};
      --bs-btn-border-color: #{$primary};
      --bs-btn-hover-bg: #6435a1;
      --bs-btn-hover-border-color: #6435a1;
    }

    .btn-secondary {
      --bs-btn-bg: #{$secondary};
      --bs-btn-border-color: #{$secondary};
      --bs-btn-hover-bg: #7fb0b5;
      --bs-btn-hover-border-color: #7fb0b5;
    }
  }
}

Now, save files and check in browser