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.
-
Open _colors.scss file
The
_colors.scss
file is located in theapp/scss/bs-theming
directory of the theme package. -
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;