Edit the Color Scheme

You can easily transform the color scheme of your site using SCSS.


Editing the default color scheme variables

Editing the default color scheme variables will change the colors in main.css and result the theme colors to change. Follow below instructions for changing heading titles, paragraph texts, buttons and theme base colors.

  1. Open _colors.scss file

    The _colors.scss file is located in the app/scss/bs-theming directory of the theme package.

  2. Generate color classes(i.e, text-blue, bg-blue, border-blue) for your new color variables by adding the new variables in the $theme-colors array inside the _colors.scss file.
    //-->Currently All Available Colors
      
    $white              :#fff;
    $black              :#000;
    $green              :green;
    $link-water         :#f2f5fb;
    $purple-heart       :#6a26da;
    $blue-ribbon        :#2b59ff;
    $blue-ribbon-2      :#0041ff;
    $green-2            :#22cc74;
    $tree-poppy         :#ff971d;
    $ebony-clay         :#25373f ;
    $golden-tainoi      :#ffd166;
    $coral              :#ff8d52;
    $anakiwaap          :#a9d2ff;
    $silver             :#adadad;
    $java               :#15cda8;
    $java-2             :#1de2cf;
    $ice-cold           :#96f7d2;
    $radical-red        :#ff4057;
    $electric-violet    :#5338fc;
    $electric-violet-2  :#5034fc;
    $electric-violet-3  :#6001d3;
    $electric-violet-4  :#4f34fc;
    $oxford-blue        :#3b4656;
    $white-lilac        :#f8f9fc;
    $victoria           :#494ca2;
    $dodger-blue        :#0f89ff;
    $royal-blue         :#3e49f3;
    $blue               :#7984ee;
    $caribbean-green    :#0cd68a;
    $gorse              :#fee856;
    $yellow             :#fcdc00;
    $yellow-2           :#ffce3e;
    $yellow-3           :#ffd700;
    $shark              :#262729;
    $athens-gray        :#F3F4F6;
    $primary            :#ff5722;
    $readical-red       :#fd346e;
    $flamingo           :#ef4339;
    $egg-blue           :#0abfbc;
    $jumbo              :#828288;
    $orange             :#ff5200;
    $torch-red          :#ff1e38;
    $watermelon         :#fd5284;
    $niagara            :#099a97;
    $bittersweet        :#ff7272;
    $lavender           :#be79df;
    $boulder            :#747474;
    $half-baked         :#82c4c3;
    $cod-gray           :#161616;
    $secondary          : $electric-violet-2;