How to Emulate Dark Mode and CSS Media Queries in Safari Web Inspector

Modern responsive web design extends far beyond screen dimensions and viewport widths. CSS user-preference media queries—such as prefers-color-scheme, prefers-reduced-motion, and prefers-contrast—allow front-end developers to adapt styling, contrast levels, and interactive animations to user operating system preferences. Testing these features traditionally required developers to manually switch macOS system themes between Light and Dark mode, alter accessibility preferences in System Settings, or reload pages repeatedly. Apple Safari Web Inspector provides built-in emulation controls that override user-preference media queries directly within the browser tab, enabling rapid and non-destructive styling verification.

Understanding CSS User Preference Media Queries

Modern web applications rely on media queries to respect system-level user choices:

• prefers-color-scheme: Evaluates whether the user’s operating system interface is set to light or dark mode. Websites use this to toggle between light and dark CSS variable palettes (e.g. @media (prefers-color-scheme: dark)).
• prefers-reduced-motion: Detects whether the user has requested to minimise non-essential animations and transitions to prevent vestibular motion sickness (e.g. @media (prefers-reduced-motion: reduce)).
• prefers-contrast: Determines if the user has requested higher or lower contrast in their accessibility settings.
• forced-colors: Detects whether the browser has activated high-contrast forced colour palettes.

Enabling the Develop Menu in Safari

To access developer tools in Safari on macOS:

1. Launch Safari on your Mac.
2. In the menu bar, open Safari > Settings (Cmd + ,).
3. Click the Advanced tab.
4. Check the box labelled Show features for web developers.
5. Close the Settings window. The Develop menu will now appear in your macOS menu bar.

Toggling Dark Mode via the Elements Tab Toolbar

Safari Web Inspector places instant preference toggle controls right in the primary navigation toolbar:

1. Navigate to the website you want to test in Safari.
2. Right-click anywhere on the webpage and select Inspect Element (or press Cmd + Option + I).
3. Click the Elements tab at the top of the inspector.
4. In the secondary toolbar situated above the DOM tree (or at the top right of the Web Inspector window), locate the small Sun / Moon toggle icon (labelled Emulate prefers-color-scheme).
5. Click the icon to cycle through the available modes:
   • System Default: Inherits the active macOS system appearance.
   • Light Mode (Sun icon): Forces prefers-color-scheme: light regardless of system state.
   • Dark Mode (Moon icon): Forces prefers-color-scheme: dark immediately.
6. The webpage CSS recalculates instantly in the viewport, allowing you to audit background contrasts, typography readability, and dark mode SVGs without reloading.

Emulating prefers-reduced-motion and Accessibility Features

Beyond dark mode, testing accessible animations is crucial for modern web compliance:

1. In Safari Web Inspector, look alongside the colour scheme icon for the Reduced Motion toggle icon (represented by a slashed animation circle or running figure).
2. Click the icon to toggle prefers-reduced-motion: reduce on and off.
3. Trigger interactive elements (such as carousel sliders, modal entrance animations, or parallax backgrounds) on your webpage to ensure that smooth animations gracefully simplify into instant cuts or fades as expected under accessibility guidelines.

Inspecting Active Media Queries in the Styles Sidebar

While emulating different modes, inspect which specific CSS rules are being matched by Safari’s rendering engine:

1. Select any DOM element in the Elements tree.
2. On the right side of Web Inspector, navigate to the Styles panel.
3. Scroll through the matched rules. As you toggle between light and dark modes, you will see rules inside @media (prefers-color-scheme: dark) blocks activate or deactivate dynamically.
4. You can edit CSS variables or test new colour declarations directly inside the Styles pane in real time.

Testing Print Media Queries in Safari

Safari Web Inspector also includes an emulation shortcut to test print stylesheets (@media print) without opening a physical print dialogue:

1. In the Elements tab toolbar, locate the Print Styles icon (the printer symbol).
2. Click the printer icon to force the viewport into print media rendering mode.
3. Audit how navigational headers, sidebars, floating widgets, and background colours format for print or PDF export.
4. Click the icon again to return to normal screen rendering.

Best Practices for Multi-Theme Testing

When auditing web themes in Safari:

• CSS Variables: Define semantic colour tokens (such as --bg-primary and --text-primary) within root media blocks to ensure seamless switching during inspection.
• Image Elements: Audit <picture> elements with media="(prefers-color-scheme: dark)" source sets to verify that dark mode graphics swap reliably.
• Form Controls: Verify that native inputs, dropdowns, and buttons remain readable against dark backgrounds.