Force Dark Mode, Print, and Reduced Motion in Safari

This article provides a quick guide on how web developers can test and force dark mode, print media styles, and reduced motion preferences directly within the Safari Web Inspector. Instead of changing your macOS system settings repeatedly to test CSS media queries like prefers-color-scheme, @media print, and prefers-reduced-motion, you can use built-in browser tools to emulate these states instantly.

Enabling and Opening the Web Inspector

Before you can force media styles, you must have the Safari developer tools enabled and open.

  1. Open Safari and click Safari in the top menu bar, then select Settings (or Preferences).
  2. Go to the Advanced tab.
  3. Check the box at the bottom for Show features for web developers (or Show Develop menu in menu bar on older macOS versions).
  4. Close the settings window and open the Web Inspector on any webpage by pressing Command + Option + I, or by right-clicking the page and selecting Inspect Element.

Locating the Media and Preference Controls

All the controls for forcing media queries and user preferences are located in the same area.

  1. In the Web Inspector, click on the Elements tab.
  2. Look at the top navigation bar of the DOM tree panel (located just to the left of the Styles sidebar).
  3. Here, you will find a group of small icons used to override page rendering.

Forcing Print Media Styles

To test your @media print CSS rules without opening the system print dialog:

  1. In the Elements tab toolbar, locate the Printer icon.
  2. Click the Printer icon to turn it blue. The webpage will immediately render using your print stylesheet.
  3. Click the icon a second time to disable it and return to standard screen rendering.

Forcing Dark Mode

Depending on your version of Safari, forcing prefers-color-scheme is done either via a dedicated button or a dropdown menu in the Elements tab toolbar.

For Newer Safari Versions:

  1. Click the User Preferences icon (it looks like two toggle switches) located next to the printer icon.
  2. In the popover menu that appears, locate the Appearance option.
  3. Select Light or Dark to force the respective mode regardless of your macOS system setting.

For Older Safari Versions:

  1. Locate the Appearance icon (it looks like a half-shaded circle) next to the printer icon.
  2. Click it to toggle between Light and Dark mode.

Forcing Reduced Motion

To test how your webpage behaves when a user has enabled the prefers-reduced-motion accessibility feature:

  1. In the Elements tab toolbar, click the User Preferences icon (the two toggle switches).
  2. Find the Reduce Motion setting in the popover menu.
  3. Select On to force the prefers-reduced-motion: reduce media query, or Off to force no-preference.

Resetting Your Preferences

Any overrides you enable in the Web Inspector are temporary. To return the webpage to its default state, you can either manually toggle the icons and dropdown settings back to System (or default), or simply close the Web Inspector. Refreshing the page while the Web Inspector remains open will keep your forced styles active so you can continue testing seamlessly.