Colors
Check the customization page to know how to update the theme color.
Text Color
Since each of the section/ element has multiple backgrounds (Light, Dark, other gradients) options we declared those section with an identifier class. The colors are nested with those classes. It means the same class will be generated a different color that fits with the background.
Text color on light/white background (Dynamic Color)
text-color--200 on light/white background
text-color--300 on light/white background
text-color--400 on light/white background
Markup example:
<p class="text-color--200">text-color--200 on light/white background</p>
<p class="text-color--300">text-color--300 on light/white background</p>
<p class="text-color--400">text-color--400 on light/white background</p>
Text color on dark background (Dynamic Color)
text-color--white on Dark background
text-color--200 on Dark background
text-color--300 on Dark background
text-color--400 on Dark background
Markup example:
<div class="bg-dark--800 p-30 rounded--5">
<p class="color-white">text-color--white on Dark background</p>
<p class="text-color--200">text-color--200 on Dark background</p>
<p class="text-color--300">text-color--300 on Dark background</p>
<p class="text-color--400">text-color--400 on Dark background</p>
</div>
More color (Static Color)
color--primary
color--white--200
color--green
color--orange
color--yellow
color--purple
text-color--500
text-color--700
text-color--900
text-color-green--400
text-color-blue--400
text-color-orange--400
text-color-gray--200
text-light-gray--100
text-light-gray--200
text-light-gray--300
Markup example:
<p class="color-primary">color--primary</p>
<p class="color-white--200">color--white--200</p>
<p class="color-green">color--green</p>
<p class="color-orange">color--orange</p>
<p class="color-yellow">color--yellow</p>
<p class="color-purple">color--purple</p>
<p class="text-color--500">text-color--500</p>
<p class="text-color--700">text-color--700</p>
<p class="text-color--900">text-color--900</p>
<p class="text-color-green--400">text-color-green--400</p>
<p class="text-color-blue--400">text-color-blue--400</p>
<p class="text-color-orange--400">text-color-orange--400</p>
<p class="text-color-gray--200">text-color-gray--200</p>
<p class="text-light-gray--100">text-light-gray--100</p>
<p class="text-light-gray--200">text-light-gray--200</p>
<p class="text-light-gray--300">text-light-gray--300</p>
Class Reference
Classes that will generate different color on different background (Dynamic Color Classes)
text-color--whitetext-color--200text-color--300text-color--400
Classes that won't generate different color on different background (Static Color Classes)
color-primarycolor-white--200color-greencolor-orangecolor-yellowcolor-purpletext-color--500text-color--700text-color--900text-color-green--400text-color-blue--400text-color-orange--400text-light-gray--100text-light-gray--200text-light-gray--300
Border Color
The same method of text color applied on border. It means the same class will be generated a different border color that fits with the background.
Border color on light/white background
border on light/white background
Markup example:
<div class="section--light">
<div class="border">...</div>
</div>
Border color on dark background
border on light/white background
Markup example:
<div class="section--dark bg-dark--800">
<div class="border">...</div>
</div>
Class Reference
borderborder-0border-topborder-bottomborder-leftborder-right
Background Colors
.bg-color--primary
.bg-white
.bg-dark
.bg-green
.bg-green--300
.bg-yellow
.bg-orange
.bg-purple-dark
.bg-pink
.bg-gray-600
.bg-light-gray--100
.bg-light-gray--200
.bg-light-gray--300
.bg-blue--100
.bg-blue--200
.bg-blue--300
.bg-blue--600
.bg-dark--600
.bg-dark--700
.bg-dark--800
.bg-green--200
.bg-color--white-opacity--30
.gradient-1
.gradient-2
.gradient-3
.gradient-4
.gradient-5
.gradient-6
.gradient-7
.gradient-9
.gradient-yellow
.gradient-orange
.gradient-orange--2
.gradient-blue
Markup example:
<div class="card d-block p-20 mb-30 bg-color--primary">
<p class="color-white">.bg-color--primary</p>
</div>
<div class="card d-block p-20 mb-30 bg-white">
<p class="text-color--400">.bg-white</p>
</div>
<div class="card d-block p-20 mb-30 bg-dark">
<p class="color-white">.bg-dark</p>
</div>
<div class="card d-block p-20 mb-30 bg-green">
<p class="color-white">.bg-green</p>
</div>
<div class="card d-block p-20 mb-30 bg-green--300">
<p class="color--hite">.bg-green--300</p>
</div>
<div class="card d-block p-20 mb-30 bg-yellow">
<p class="text-color--400">.bg-yellow</p>
</div>
<div class="card d-block p-20 mb-30 bg-orange">
<p class="color-white">.bg-orange</p>
</div>
<div class="card d-block p-20 mb-30 bg-purple-dark">
<p class="color-white">.bg-purple-dark</p>
</div>
<div class="card d-block p-20 mb-30 bg-pink">
<p class="text-color--400">.bg-pink</p>
</div>
<div class="card d-block p-20 mb-30 bg-gray-600">
<p class="color-white">.bg-gray-600</p>
</div>
<div class="card d-block p-20 mb-30 bg-light-gray--100">
<p class="text-color--400">.bg-light-gray--100</p>
</div>
<div class="card d-block p-20 mb-30 bg-light-gray--200">
<p class="text-color--400">.bg-light-gray--200</p>
</div>
<div class="card d-block p-20 mb-30 bg-light-gray--300">
<p class="text-color--400">.bg-light-gray--300</p>
</div>
<div class="card d-block p-20 mb-30 bg-blue--100">
<p class=text-color--400">.bg-blue--100</p>
</div>
<div class="card d-block p-20 mb-30 bg-blue--200">
<p class="color-white">.bg-blue--200</p>
</div>
<div class="card d-block p-20 mb-30 bg-blue--300">
<p class="color-white">.bg-blue--300</p>
</div>
<div class="card d-block p-20 mb-30 bg-blue--600">
<p class="color-white">.bg-blue--600</p>
</div>
<div class="card d-block p-20 mb-30 bg-dark--600">
<p class="color-white">.bg-dark--600</p>
</div>
<div class="card d-block p-20 mb-30 bg-dark--700">
<p class="color-white">.bg-dark--700</p>
</div>
<div class="card d-block p-20 mb-30 bg-dark--800">
<p class="color-white">.bg-dark--800</p>
</div>
<div class="card d-block p-20 mb-30 bg-green--200">
<p class="text-color--400">.bg-green--200</p>
</div>
<div class="card d-block p-20 mb-30 bg-color--white-opacity--30">
<p class="text-color--400">.bg-color--white-opacity--30</p>
</div>
<div class="card d-block p-20 mb-30 gradient-1">
<p class="color-white">.gradient-1</p>
</div>
<div class="card d-block p-20 mb-30 gradient-2">
<p class="color-white">.gradient-2</p>
</div>
<div class="card d-block p-20 mb-30 gradient-3">
<p class="color-white">.gradient-3</p>
</div>
<div class="card d-block p-20 mb-30 gradient-4">
<p class="color-white">.gradient-4</p>
</div>
<div class="card d-block p-20 mb-30 gradient-5">
<p class="color-white">.gradient-5</p>
</div>
<div class="card d-block p-20 mb-30 gradient-6">
<p class="color-white">.gradient-6</p>
</div>
<div class="card d-block p-20 mb-30 gradient-7">
<p class="color-white">.gradient-7</p>
</div>
<div class="card d-block p-20 mb-30 gradient-9">
<p class="color-white">.gradient9-</p>
</div>
<div class="card d-block p-20 mb-30 gradient-yellow">
<p class="color-white">.gradient-yellow</p>
</div>
<div class="card d-block p-20 mb-30 gradient-orange">
<p class="color-white">.gradient-orange</p>
</div>
<div class="card d-block p-20 mb-30 gradient-orange--2">
<p class="color-white">.gradient-orange--2</p>
</div>
<div class="card d-block p-20 mb-30 gradient-blue">
<p class="color-white">.gradient-blue</p>
</div>
Class Reference
bg-darkbg-greenbg-green--300bg-yellowbg-orangebg-purple-darkbg-pinkbg-gray-600bg-light-gray--100bg-light-gray--200bg-light-gray--300bg-blue--100bg-blue--200bg-blue--300bg-blue--600bg-dark--600bg-dark--700bg-dark--800bg-green--200bg-color--white-opacity--30gradient-1gradient-2gradient-3gradient-4gradient-5gradient-6gradient-7gradient-9gradient-yellowgradient-orangegradient-orange--2gradient-blue
primary color and its class is always generate dynamic color. Such as this documentation was set to theme-blue which is why it's rendering blue as primary color. If it was set to theme-orange it would render orange color instead of current blue color.