Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
To change any color globally to a custom color, open src/assets/scss/default/_variables.scss and assign your
custom color value to that color variable which you want to change. For example: --color-primary and recompile.
This quick video demonstrates how to change variables.
--color-primary: #215ADA;
<!-- Brand Color Shades -->
<div class="rbt-bg-color-brand-50"></div>
<div class="rbt-bg-color-brand-100"></div>
<div class="rbt-bg-color-brand-200"></div>
<div class="rbt-bg-color-brand-300"></div>
<div class="rbt-bg-color-brand-400"></div>
<div class="rbt-bg-color-brand-500"></div>
<div class="rbt-bg-color-brand-600"></div>
<div class="rbt-bg-color-brand-700"></div>
<!-- Gray Color Shades -->
<div class="rbt-bg-color-gray-light"></div>
<div class="rbt-bg-color-gray-100"></div>
<div class="rbt-bg-color-gray-200"></div>
<div class="rbt-bg-color-gray-300"></div>
<div class="rbt-bg-color-gray-400"></div>
<div class="rbt-bg-color-gray-500"></div>
<div class="rbt-bg-color-gray-600"></div>
<div class="rbt-bg-color-gray-700"></div>
<!-- Extra Colors -->
<div class="rbt-bg-color-extra-one"></div>
<div class="rbt-bg-color-extra-two"></div>
<div class="rbt-bg-color-extra-three"></div>
<div class="rbt-bg-color-extra-four"></div>
<div class="rbt-bg-color-extra-five"></div>
<div class="rbt-bg-color-extra-six"></div>
<div class="rbt-bg-color-extra-seven"></div>
<div class="rbt-bg-color-white-opacity"></div>
<!-- System Colors -->
<div class="rbt-bg-color-light-green"></div>
<div class="rbt-bg-color-green"></div>
<div class="rbt-bg-color-yellow"></div>
<div class="rbt-bg-color-orange"></div>
<!-- Default Colors -->
<div class="rbt-bg-color-primary"></div>
<div class="rbt-bg-color-secondary"></div>
<div class="rbt-bg-color-gray-black"></div>
<div class="rbt-bg-color-black"></div>
<!-- System Colors -->
<div class="rbt-bg-color-success"></div>
<div class="rbt-bg-color-warning"></div>
<div class="rbt-bg-color-danger"></div>
<div class="rbt-bg-color-white"></div>
<!-- Brand Color Shades -->
<div class="rbt-text-color-brand-50"></div>
<div class="rbt-text-color-brand-100"></div>
<div class="rbt-text-color-brand-200"></div>
<div class="rbt-text-color-brand-300"></div>
<div class="rbt-text-color-brand-400"></div>
<div class="rbt-text-color-brand-500"></div>
<div class="rbt-text-color-brand-600"></div>
<div class="rbt-text-color-brand-700"></div>
<!-- Gray Color Shades -->
<div class="rbt-text-color-gray-light"></div>
<div class="rbt-text-color-gray-100"></div>
<div class="rbt-text-color-gray-200"></div>
<div class="rbt-text-color-gray-300"></div>
<div class="rbt-text-color-gray-400"></div>
<div class="rbt-text-color-gray-500"></div>
<div class="rbt-text-color-gray-600"></div>
<div class="rbt-text-color-gray-700"></div>
<!-- Extra Colors -->
<div class="rbt-text-color-extra-one"></div>
<div class="rbt-text-color-extra-two"></div>
<div class="rbt-text-color-extra-three"></div>
<div class="rbt-text-color-extra-four"></div>
<div class="rbt-text-color-extra-five"></div>
<div class="rbt-text-color-extra-six"></div>
<div class="rbt-text-color-extra-seven"></div>
<div class="rbt-text-color-white-opacity"></div>
<!-- System Colors -->
<div class="rbt-text-color-light-green"></div>
<div class="rbt-text-color-green"></div>
<div class="rbt-text-color-yellow"></div>
<div class="rbt-text-color-orange"></div>
<!-- Default Colors -->
<div class="rbt-text-color-primary"></div>
<div class="rbt-text-color-secondary"></div>
<div class="rbt-text-color-gray-black"></div>
<div class="rbt-text-color-black"></div>
<!-- System Colors -->
<div class="rbt-text-color-success"></div>
<div class="rbt-text-color-warning"></div>
<div class="rbt-text-color-danger"></div>
<div class="rbt-text-color-white"></div>