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 which 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. Originally, the dark mode theme was set to roll out in the winter, but will now be coming 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 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). You can also install the Dark Mode Switcher bookmarklet to preview your site in Dark Mode before it launches. Dragging the ‘Preview Dark Mode’ button to your bookmark bar will give you an option to see what your site will look like in Dark Mode.
For program area sites, dark mode can be previewed before the launch within UNLcms. 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. Some 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. For images with transparent backgrounds, you can use the ‘@dark’ User Interface Background Colors to force the background of the image to stay cream or gray even in Dark Mode.
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.