<p>theme-red</p>
            
            /* theme-red or any other theme class on any parent will followed by element with theme colors */
            <div class="row theme-red mb-3">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card adminuiux-card text-center bg-r-gradient mb-3 height-100">
                        <div class="card-body align-items-center d-flex justify-content-center">
                            <p class="small">.bg-r-gradient</p>
                        </div>
                    </div>
                </div>
            
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card adminuiux-card text-center bg-theme-l-gradient text-white mb-3 height-100">
                        <div class="card-body align-items-center d-flex justify-content-center">
                            <p class="small">.bg-theme-l-gradient</p>
                        </div>
                    </div>
                </div>
            
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card adminuiux-card text-center bg-theme-l-gradient-light mb-3 height-100">
                        <div class="card-body align-items-center d-flex justify-content-center">
                            <p class="small">.bg-theme-l-gradient-light</p>
                        </div>
                    </div>
                </div>
            
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card adminuiux-card text-center bg-theme-r-gradient text-white mb-3 height-100">
                        <div class="card-body align-items-center d-flex justify-content-center">
                            <p class="small">.bg-theme-r-gradient</p>
                        </div>
                    </div>
                </div>
            
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card adminuiux-card text-center bg-theme-accent-l-gradient text-white mb-3 height-100">
                        <div class="card-body align-items-center d-flex justify-content-center">
                            <p class="small">.bg-theme-accent-l-gradient</p>
                        </div>
                    </div>
                </div>
            
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
                    <div class="card adminuiux-card text-center bg-theme-accent-r-gradient mb-3 height-100">
                        <div class="card-body align-items-center d-flex justify-content-center">
                            <p class="small">.bg-theme-accent-r-gradient</p>
                        </div>
                    </div>
                </div>
            
                <div class="col-12"></div>
            
                <div class="col-12">
                    <button class="btn btn-theme mb-2">.btn-theme</button>
                    <button class="btn btn-accent mb-2">.btn-accent</button>
                    <span class="mx-2 mb-2 text-theme-1">text-theme-1</span>
                    <span class="mx-2 mb-2 text-theme-1">text-theme-2</span>
                    <span class="mx-2 mb-2 text-theme-accent-1">text-theme-accent-1</span>
                    <span class="mx-2 mb-2 text-theme-accent-2">text-theme-accent-2</span>
                </div>
            </div>