---
title: "Day 107: the light-dark() color function"
url: https://daily.dev/posts/day-107-the-light-dark-color-function-qmgjqqgbj
source_url: https://www.matuzo.at/blog/2024/100daysof-day107
type: article
source: "Manuel Matuzović"
published: 2026-06-22T14:41:56.112Z
updated: 2026-06-22T14:43:20.048Z
tags: ["css"]
reading_time: 2
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Day 107: the light-dark() color function

**[Manuel Matuzović](https://daily.dev/sources/matuzo)** · 2 min read · 0 upvotes · 0 comments

## Summary

The CSS `light-dark()` color function lets you define two color values for a property — one for light mode and one for dark mode — without needing `prefers-color-scheme` media queries. It requires setting `color-scheme: light dark` on the target element (typically `html`) to activate. You can also force a specific scheme on individual elements by setting `color-scheme: dark` or `color-scheme: light` directly. Code examples show how to use CSS custom properties with `light-dark()` for background and text colors.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.matuzo.at/blog/2024/100daysof-day107>

---

Tags: [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/day-107-the-light-dark-color-function-qmgjqqgbj)