CSS Motion Preferences and Dark Mode

In modern web design, websites should be easy to use, accessible, and SEO-friendly. CSS makes this simple with features like prefers-color-scheme for dark mode and prefers-reduced-motion to limit animations. They automatically follow the user’s system settings—no JavaScript needed.

This guide explains both features with easy HTML + CSS examples.

Prefers Reduced Motion: `@media (prefers-reduced-motion)`

Some users are sensitive to motion, like animations, carousels, or scrolling effects. The prefers-reduced-motion media query allows you to reduce or remove animations, improving comfort and accessibility.

HTML + CSS Example:

<button class="animated-btn">Click Me</button>

/* Default button with animation */
    .animated-btn {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: transform 0.5s;
    }

    .animated-btn:hover {
      transform: scale(1.2);
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
      .animated-btn {
        transition: none; /* Disable animation */
        transform: none;
      }
    }

Dark Mode: `@media (prefers-color-scheme: dark)`

Dark mode reduces eye strain in low-light environments. The prefers-color-scheme media query allows your site to switch automatically between light and dark themes based on the user's device settings.

HTML + CSS Example:

<h1>Welcome to My Website</h1>
  <p>This paragraph will adjust automatically based on your system theme.</p>
  <p>Here’s a <a href="https://learncodewithdurgesh.com/">sample link</a> to test color changes.</p>

 /* Default Light Mode */
    body {
      background-color: #ffffff;
      color: #000000;
      font-family: Arial, sans-serif;
      padding: 20px;
      transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    }

    a {
      color: #007bff; /* Link color in light mode */
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #121212; /* Dark background */
        color: #f0f0f0;           /* Light text */
      }
      a {
        color: #bb86fc;           /* Link color in dark mode */
      }
    }

Combining Both Features

You can implement dark mode and reduced motion together in one stylesheet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode & Reduced Motion Example</title>
  <style>
    /* ----------------------
       Light Mode (Default)
    ------------------------ */
    body {
      background-color: white;        /* Light background */
      color: black;                   /* Dark text */
      font-family: Arial, sans-serif;
      padding: 20px;
      transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
    }

    a {
      color: #007bff;                 /* Light mode link color */
    }

    h1 {
      margin-bottom: 10px;
    }

    /* Animated button */
    .animated-btn {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      transition: transform 0.3s;      /* Button animation */
    }

    .animated-btn:hover {
      transform: scale(1.1);
    }

    /* ----------------------
       Dark Mode
    ------------------------ */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #121212;   /* Dark background */
        color: #f0f0f0;             /* Light text */
      }

      a {
        color: #bb86fc;             /* Dark mode link color */
      }

      .animated-btn {
        background-color: #1e1e1e;  /* Dark button */
        color: white;
      }
    }

    /* ----------------------
       Reduced Motion
    ------------------------ */
    @media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important; /* Disable all transitions */
        animation: none !important;  /* Disable all animations */
      }

      .animated-btn:hover {
        transform: none;            /* Button stays static */
      }
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page supports <strong>dark mode</strong> and <strong>reduced motion</strong> automatically based on your system settings.</p>
  <p>Check out this <a href="https://learncodewithdurgesh.com/tutorials/html-tutorial">sample link</a>.</p>
  <button class="animated-btn">Click Me</button>
</body>
</html>