WordPress VIP Gold agency partner 10up recently worked with media company 9to5 to add WordPress dark mode and light mode support to its most popular sites, including 9to5Mac and 9to5Google. Jake Goldman, founder and president of 10up, took the stage at BigWP SF to discuss the project and provide a practical primer on supporting native, OS-level dark and light settings.

As of this year, all major operating systems and browsers have begun to support the ability to view different display modes (light and dark), based on user preference.

Beyond aesthetics, dark mode is a contributing factor in improving accessibility for users who suffer from eye strain or other vision difficulties. Enabling dark and light mode options also empowers users to personalize their experience with your content — which can improve engagement.

The good news? WordPress dark mode is relatively easy to enable. It took 10up only about 30 people hours to set up five sites on the 9to5 network that shared an overarching layout.

In this talk, Jake walks through two approaches to achieve similar results. First, a CSS path to deliver content in light or dark mode based on a user’s predefined settings. Next, a JavaScript method to allow users to toggle between light and dark mode on their own, which defaults to user device settings.