Themes

We accomplish theming through the use of CSS Variables. There are two basic types of themes that work together to provide our look and feel: depth themes and color themes.

Depth Themes

There are two different depth themes: --flatand --depth. The --flattheme is active by default, and strictly avoids shadows. The --depththeme is quite the opposite; it uses shadows to provide a feel of depth to the page.

Title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur suscipit sed sit quod? Nam, ex quis! Culpa molestiae facilis necessitatibus illum consequatur tempora voluptates distinctio cum, dicta voluptas aperiam sint?

Title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur suscipit sed sit quod? Nam, ex quis! Culpa molestiae facilis necessitatibus illum consequatur tempora voluptates distinctio cum, dicta voluptas aperiam sint?

Color Themes

Every color that was officially attached to a college or program has been turned into a theme.

--theme-coe

--theme-chp

--theme-honors

--theme-cah

--theme-sbs

--theme-lib

--theme-east

--theme-cos

--theme-gsbe

Applying Themes

Note: Themed elements (cards, buttons, etc.) will be themed according to their most direct theme modifier. See the following example for a more detailed explanation.

Applying a theme is fairly simple. The easiest option is to surround all of the content inside of a single div, and then apply the modifier for the desired theme.

<div class="--depth --theme-lib">
	<section class="section">
		<!--...-->
	</section>
</div>

However, you are not restricted on where you place the theme. For example: one could place the theme modifier on a button, and that button would take on the look of that theme’s button. Even if you had an overarching color theme, they would be overridden by the more direct theme modifier.