jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free CSS Light-Dark Function Generator

Build a color-scheme declaration and light-dark() color pairs. Set up basic dark mode with a single CSS function that swaps colors based on the user's system preference. No JavaScript required.

Loading tool...

What is CSS Light-Dark Function Generator?

The light-dark() CSS function takes two color values and automatically picks the first for light mode and the second for dark mode based on the color-scheme property. This eliminates the need for duplicate CSS custom property blocks or a JavaScript theme toggle for basic dark mode support.

quickAnswer

The light-dark() CSS function returns one of two color values based on the current color scheme, making it easy to support light and dark modes without duplicating CSS rules.

Last updated: 2026-05-25

limitations

  • light-dark() only works when the color-scheme property is set on the document or element. Without it the function defaults to the first color.
  • The function accepts exactly two color values -- one for light and one for dark. Complex theme switching still requires custom properties or media queries.
  • Older browsers do not support light-dark(). Provide a fallback color before the light-dark() function in the property declaration.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Choose the color properties you want to theme, such as text color or background.
  2. Enter a light color and a dark color for each property.
  3. The tool generates the color-scheme declaration and light-dark() function calls.
  4. Copy the CSS and add the color-scheme meta tag to your page head.

What you can use it for

  • Add basic dark mode to a static site without JavaScript.
  • Create light and dark color pairs for text, backgrounds, and borders.
  • Build a small design token system using light-dark() for theme consistency.

Use cases

Practical examples

example

Static blog dark mode

A static blog adds color-scheme: light dark to the root element and uses light-dark(#333, #eee) for body text. Dark mode activates automatically based on the visitor's system preference.

example

Tool site card theming

A tool site uses light-dark() for card backgrounds and borders so both color schemes render correctly without separate variable definitions.

Common mistakes

  • Only setting color-scheme without providing light-dark() color pairs.
  • Using light-dark() without setting color-scheme on the root element.
  • Forgetting to test both light and dark modes across all themed elements.

verification

  1. Toggle the page between light and dark mode using DevTools Rendering or the OS setting and verify colors switch correctly.
  2. Test in a browser that does not support light-dark() to confirm the fallback color is applied.

FAQ

Questions about CSS Light-Dark Function Generator

Does light-dark() work in all browsers?

Chrome 123+, Edge 123+, Safari 17.5+, Firefox 120+. Provide fallback colors for older browsers by declaring the light mode color first.

Can light-dark() replace CSS custom properties?

It can handle basic cases, but custom properties are still better for complex design systems with many color tokens.

How does light-dark() detect the user color scheme?

The browser reads the prefers-color-scheme media query from the operating system or browser setting. When the user has selected a light theme, light-dark(A, B) returns A. When they have selected a dark theme, it returns B. The detection is automatic and requires no JavaScript. The function must be used within a color property 閳ユ攰t cannot be used for non-color values.

What is the correct fallback pattern for browsers that do not support light-dark()?

Declare the light mode color first, then use light-dark() in a separate declaration: color: #333; color: light-dark(#333, #eee);. Browsers that support light-dark() use the second declaration. Older browsers ignore the unknown function and keep the first value. This pattern provides automatic graceful degradation without feature detection or JavaScript.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool