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--white
text-color--200
text-color--300
text-color--400
Classes that won't generate different color on different background (Static Color Classes)

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-light-gray--100
text-light-gray--200
text-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

border
border-0
border-top
border-bottom
border-left
border-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-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

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.