Content Views: How Theming Works

[#1]

With the release of our new content views, you may be taking a fresh look at your content and wondering how certain theme elements get applied.

In both the Full Details and Explore views of your content, we use Body Background Color, Body Text Color, Body Link Color, Button Background Color, and Button Text Color from your theme for the main portion of your content.

Buttons

Buttons that are considered primary actions will use your Button Background and Button Text colors from your theme and will display with a solid fill.

Buttons that are considered secondary actions will be outlined using your Body Link Color, contain text using Body Link Color, and will use your site Body Background Color as the button background. We use link color and background color for secondary buttons in order to give you a different visual style, while still maintaining legibility and contrast.

Tertiary actions are downplayed by using Body Text Color with Body Background Color to offer a more neutral effect. Most do have a border that changes to link color on mouse hover or when displaying keyboard focus.

Tabs

We have two styles of tabs: vertical, as seen with our In-Page Actions Menu and horizontal, as seen in Filters on the Explore content view.

Vertical tabs use Body Link Color for their background fill and Body Background Color for icons or text, and then display the inverse for active selection. Panels opened through In-Page Actions use the same background, text, and link colors as the site, except for Downloads, which uses a different style of card that presently cannot be themed (but we're working on changing that!)

Horizontal tabs use Body Link Color for text and a thick bottom border to indicate active selection, and the same set of colors four mouse hover state and keyboard focus state for non-active selections.

Where Theme is Not Applied

Historically, we've had difficulties trying to apply theme to tables, since there are two colors need for the alternating rows. It's difficult to ensure proper contrast will be met when opacity is involved on non-disabled content. This is the reason tables are grayscale and do not theme.

We also do not theme map controls or tooltips, since both overlay content. Basemaps can be customized in site settings and can be very vibrant. Sticking with simple colors on these controls makes them more likely to stand-out and less likely to clash with your theme.

Checkboxes and radios use white as the background color for their shape, but use Body Link Color to indicate active selection or keyboard focus. However, if your site uses a dark background, we recognize your link color may be lighter in nature and less legible on white, so we darken it a smidge to improve contrast.