• admin
• 0 Comments
• 5916 Views

CSS has always been a powerful tool for styling web pages, and with the introduction of new features, it continues to evolve and make developers’ lives easier. One such feature that has gained popularity is the ability to switch between light and dark color schemes based on user preferences. In this article, we will explore how CSS facilitates easy light-dark mode color switching with the light-dark() function.

Responding to Light or Dark Mode

Traditionally, changing colors based on whether Light Mode or Dark Mode is used would involve using a prefers-color-scheme Media Query. This approach requires duplicating CSS variables for each mode and using custom properties throughout the code. While effective, it can lead to bloated stylesheets.

To simplify this process, CSS now provides the light-dark() utility function. This function takes two color values as arguments and outputs the appropriate value based on the active color scheme. For example:

:root {
  --text-color: light-dark(
# 333, 
# ccc); /* In Light Mode: return 1st value. In Dark Mode: return 2nd value. */
}

body {
  color: var(--text-color);
}

By using light-dark(), you eliminate the need for duplicated CSS variables and streamline your stylesheet. The function automatically handles the color switching based on the active color scheme.

Responding to Light or Dark Mode with light-dark()

The light-dark() function is defined in the CSS Color Module Level 5 Specification as a way to compute the appropriate color value based on the used color scheme. It takes two color values as arguments and returns the first value if the color scheme is light or unknown, and the second value if the color scheme is dark.

However, it’s important to note that the used color scheme is not solely based on the user’s Light/Dark Mode setting. It also takes into account the value of the color-scheme property, which allows elements to indicate the color schemes they are designed for. For light-dark() to work effectively, you must include a color-scheme declaration.

:root {
  color-scheme: light dark;
}

:root {
  --text-color: light-dark(
# 333, 
# ccc); /* In Light Mode: return 1st value. In Dark Mode: return 2nd value. */
}

You can also override the color-scheme value per element to force it into a specific mode:

.dark {
  color-scheme: dark; /* light-dark() on this element and its children will always return dark */
}

The combination of color-scheme and light-dark() provides a flexible solution for responding to Light or Dark Mode in CSS.

What about other non- values and responding to other color schemes?

While light-dark() is an effective solution for handling light/dark color switching, it does have some limitations. Currently, it only works with values and cannot respond to other color schemes. However, these limitations are intentional and serve as an intermediary step towards a more comprehensive solution.

The CSS Working Group has proposed a function called schemed-value() for the future, which will be able to respond to any value of color-scheme and return more than just values. This would provide greater flexibility for developers. For now, we have light-dark(), which serves its purpose well and addresses the common use-case of color switching.

Browser Support

As with any new feature, it’s essential to consider browser support. At the time of writing, CSS light-dark() has varying levels of support across different browsers:

• Chromium (Blink): Not supported
• Firefox (Gecko): Supported in Firefox 120
• Safari (WebKit): Not supported yet (pending data addition)

It’s important to stay updated on browser support for CSS light-dark(). You can follow the tracking issues for each browser to monitor their progress:

• Chromium/Blink: Issue #1490618 
• Firefox/Gecko: Issue #1856999
• Safari/WebKit: Issue #262914

Demo

To demonstrate the functionality of light-dark(), we’ve provided a demo below. If your browser supports light-dark(), you will see a few s labeled .auto that respond to Light/Dark mode toggling. The s with the class .light or .dark are forced into their respective modes.

[codepen_embed height=”300″ default_tab=”html,result” slug_hash=”ExGrNVx” user=”bramus”]See the Pen
CSS light-dark() Support test by Bramus (@bramus)
on CodePen.[/codepen_embed]

Spread the Word

If you find the concept of easy light-dark mode color switching intriguing, feel free to spread the word. Retweet or share this article to help others discover this useful CSS utility function.

In conclusion, the introduction of the light-dark() function in CSS provides developers with a convenient way to switch between light and dark color schemes based on user preferences. It simplifies the process, eliminates the need for duplicated code, and streamlines stylesheets. While light-dark() currently only works with color values, it serves as a stepping stone towards a more comprehensive solution in the future. Stay up-to-date on browser support and experiment with the demo to explore the possibilities of light-dark() in your projects.

More helpful articles can be found by clicking here

admin

administrator