Dark Mode, User Preferences and Print CSS

What Is It?

Media queries can respond to user preferences or a print output context, rather than only viewport dimensions.

Properties, Tags and Attributes Explained

• prefers-color-scheme: Detects a user preference for light or dark color schemes.
• color-scheme: Tells the browser which schemes an element supports, affecting native controls and default colors.
• prefers-reduced-motion: Detects a preference to minimize non-essential motion.
• @media print: Applies rules in print rendering and print preview.
• break-before / break-after / break-inside: Control page or column fragmentation where applicable.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Follow the preferred scheme

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode, User Preferences and Print CSS</title>
  <style>
    :root { color-scheme: light dark; }
    body { color: #172033; background: #f8fafc; }
    @media (prefers-color-scheme: dark) { body { color: #e2e8f0; background: #0f172a; } }
  </style>
</head>
<body>
  <h2>Theme-aware notes</h2><label for="search">Search</label> <input id="search" type="search">
</body>
</html>

What you see: The page follows the preferred scheme. Emulate dark or light mode in browser DevTools to compare.

Example 2: Print a clean lesson

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode, User Preferences and Print CSS</title>
  <style>
    .tools { background: #dbeafe; padding: 12px; }
    @media print { .tools { display: none; } body { color: black; background: white; } article { break-inside: avoid; } }
  </style>
</head>
<body>
  <div class="tools">Screen-only course tools</div><article><h2>Printable lesson</h2><p>A short definition and a useful example.</p></article>
</body>
</html>

What you see: On screen the tools are visible. Print the playground page to inspect the print styles; the result frame follows its print context.

Example 3: Request printed page breaks

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode, User Preferences and Print CSS</title>
  <style>
    @media print { .new-page { break-before: page; } .end-page { break-after: page; } }
  </style>
</head>
<body>
  <section class="end-page"><h2>Part one</h2><p>Print this playground to inspect the page break.</p></section><section class="new-page"><h2>Part two</h2><p>Starts on another printed page.</p></section>
</body>
</html>

What you see: The screen remains continuous. In print preview, the requested page break separates the sections; adjacent break requests resolve at the same boundary rather than requiring two breaks.

When and Where to Use It

Use preference queries to respect user choices and print rules for receipts, reference sheets, or lessons intended for printing.

Common Mistake or Useful Tip

A preference query is not an in-site theme toggle. Test print styles in print preview rather than expecting a screen preview to change.

Try It Yourself

Add an underline to links only inside the print query.