<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>