Примерlink

<section class="theme-light bg-danger-tonal p-3">
    <p class="color-primary">Основной текст</p>
    <p class="color-secondary">Вспомогательный текст</p>
    <p class="color-hint">Незначительный текст</p>
    <span class="c-icon-active">Активная иконка</span>
    <span class="c-icon-inactive">Неактивная иконка</span>
    <div class="b-divider m-top-1">Разделитель</div>
</section>

<section class="theme-dark p-3">
    <p class="color-primary">Основной текст (темная тема)</p>
    <p class="color-secondary">Вспомогательный текст (темная тема)</p>
    <p class="color-hint">Незначительный текст (темная тема)</p>
    <span class="c-icon-active">Активная иконка (темная тема)</span>
    <span class="c-icon-inactive">Неактивная иконка (темная тема)</span>
    <div class="b-divider m-top-1">Разделитель (темная тема)</div>
</section>