Site Bytes – Dark Mode

Site Bytes – Dark Mode
Site Bytes – Dark Mode

What is dark mode?

Dark mode is a setting for some smartphones and computers that turns light backgrounds to dark and dark text to light. It reduces the screen’s brightness and can lengthen the battery life of a device, and can be beneficial for sleep hygiene and eye health. Users choose to use dark mode for their applications in their device’s settings, and if a dark mode theme is available, the application defaults to the dark mode.

The Digital Experience Group (DXG) has developed a dark mode theme for UNL framework sites and is planning to release it July 13, 2021. The framework’s dark mode will automatically invert DCF and UNL CSS classes. Older WDN CSS classes and custom CSS may not display well in dark mode.

Preparing for dark mode

For extension county web managers, there will not be much to do for dark mode’s rollout. Much of the styles used for articles, events, and pages are controlled by templates already using DCF and UNL classes, and should display correctly in dark mode. However, it will be important to refrain from changing text color in the editor. The editor creates “inline CSS” that will not invert when viewed in dark mode and may not be visible to users. You may want to test your site in dark mode after it launches (see #4 below), but there is unfortunately not a way for web managers to preview dark mode prior to its launch.

For program area sites, dark mode can be previewed before the launch. To preview your site in dark mode:

1. Login to your UNLcms site
2. On the admin menu click "Appearance" and then click "Settings" for the 5.2 theme
3. Scroll down to "ADVANCED SETTINGS" and check "Enable Dark Mode Preview for Site Admin"
4. Set your computer's operating system to use dark mode (Apple iPhone, iPad, or iPod, Mac Desktop, Android device, Windows 10)

When previewing your site in dark mode, look for items where the color contrast isn't web accessible. You can check if text on a background color is "WCAG 2 AA" Compliant by using a color contrast checker. Below are examples of what may cause this to happen.

• WDN classes
• custom CSS
• inline styles (ex: style="color: #339933")
• SVG color fills
• GIF and PNG image files with a transparent background

Using 5.0 DCF classes for colors will fix the majority of issues. A fix for SVGs, GIFs and PNGs will be coming soon.

If you have ideas for videos or articles you would like to see, please email Keith McGuffey at kmcguffey2@unl.edu. More video tutorials can be found on the Nebraska Extension County Websites Media Hub channel.

###

Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Keith McGuffey, IANR Media Web Specialist.