How can I use CSS to switch themes automatically based on the user's preferred color scheme setting?

Ask any question about CSS here... and get an instant response.

Post this Question & Answer:

How can I use CSS to switch themes automatically based on the user's preferred color scheme setting? Pending Review

Asked on Dec 25, 2025

Answer

To automatically switch themes based on the user's preferred color scheme, you can use CSS media queries to detect the user's system preference for light or dark mode. This allows you to apply different styles accordingly.

<!-- BEGIN COPY / PASTE -->
    <style>
      body {
        font-family: Arial, sans-serif;
        transition: background-color 0.3s, color 0.3s;
      }

      /* Default light theme */
      body {
        background-color: white;
        color: black;
      }

      /* Dark theme */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: black;
          color: white;
        }
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The `prefers-color-scheme` media feature detects if the user prefers a light or dark color scheme.
You can define styles for both light and dark themes, with the dark theme styles inside the media query.
Use CSS transitions to smoothly animate the change between themes.
This approach respects user preferences and enhances accessibility.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I use CSS to switch themes automatically based on the user's preferred color scheme setting? Pending Review

Asked on Dec 25, 2025

Answer

The Q&A Network