jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

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.

Quick answer

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.

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.

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.

Related tools

More css tools

Also try

Also try