CSS @media inverted-colors Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 9 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media (inverted-colors) property in CSS is part of media queries that allows developers to detect if a user has activated an inverted color scheme, often for accessibility reasons.

This can be used to adjust styles specifically for users who prefer high-contrast, inverted color displays, which can be enabled through system settings.

💡 Syntax

The syntax for using the @media (inverted-colors) property is simple. You check for the color inversion preference and then define the styles accordingly.

Syntax

Copied

@media (inverted-colors: inverted) {
  /* Styles for inverted colors */
}

@media (inverted-colors: none) {
  /* Styles for normal colors */
}

🏠 Property Values

inverted: This value is applied when the user has enabled an inverted color scheme (dark mode or high-contrast mode).
none: This value applies when no color inversion is applied, and the colors are displayed normally.

🎛️ Default Value

The default behavior assumes the value none, meaning the colors are displayed normally unless the user has specifically enabled color inversion.

📝 Example Usage

📜 Basic Usage

In this example, we will apply different background colors depending on whether the user has inverted colors enabled or not.

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media inverted-colors Example</title>
  <style>
    /* Styles when inverted colors are active */
    @media (inverted-colors: inverted) {
      body {
        background-color: black;
        color: white;
      }
    }

    /* Styles when inverted colors are not active */
    @media (inverted-colors: none) {
      body {
        background-color: white;
        color: black;
      }
    }
  </style>
</head>
<body>
  <h1>Inverted Colors Example</h1>
  <p>This page adjusts its color scheme based on your inverted color settings.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media (inverted-colors) property is supported by some modern browsers. However, its implementation may vary, and it is recommended to test this feature across different browsers and devices for optimal compatibility.

🎉 Conclusion

The @media (inverted-colors) property is a helpful tool for improving accessibility by adjusting styles for users who rely on inverted color schemes.

By incorporating this media query, you can enhance the user experience for individuals who need high-contrast or inverted visuals. Experiment with this property to create inclusive designs that cater to various visual preferences.