Themes may be applied to a containing element to dramatically change that content's appearance. Theme classes are always prefixed by t-.

While selector depth is best kept to a minimum, it's permissible to style objects and components differently within a theme class. If you find you are working against a theme class a lot, it may be a sign that you really need a whole new pattern and modifier (instead of just a themed variation).

Light Mode

Hello World

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis blanditiis, atque hic corrupti dolor, unde obcaecati minus asperiores velit nostrum quos rem ea voluptatum officiis totam temporibus et nesciunt molestiae.

<div class="t-light" style="padding: 1em">
	<h1>Hello World</h1>
	<p>
		Lorem ipsum dolor <a href="#">sit amet</a> consectetur
		<strong>adipisicing</strong> elit. Corporis <em>blanditiis</em>, atque hic
		corrupti dolor, unde obcaecati minus asperiores velit nostrum quos rem ea
		voluptatum officiis totam temporibus et nesciunt molestiae.
	</p>
</div>

Dark Mode

You can test dark mode by enabling dark mode on your computer, or with the theme switcher in the header.

Hello World

<div class="t-dark" style="padding: 1em">
	<h1>Hello World</h1>
	<p>
		Lorem ipsum dolor <a href="#">sit amet</a> consectetur
		<strong>adipisicing</strong> elit. Corporis <em>blanditiis</em>, atque hic
		corrupti dolor, unde obcaecati minus asperiores velit nostrum quos rem ea
		voluptatum officiis totam temporibus et nesciunt molestiae.
	</p>
</div>