Presets

Color Pairs

Saved Configurations

Preview

Card Title

This is a preview of how your theme colors will look in both light and dark modes.

Background#ffffff
Text#1a1a2e
Border#e0e0e0
Accent#667eea

Side by Side Comparison

Light Mode
Sample Text
Dark Mode
Sample Text

Generated CSS

/* CSS light-dark() Color Function - Generated by Brix340 Tools */

/*
 * The light-dark() function returns one of two colors
 * based on the user's color-scheme preference.
 * It requires color-scheme to be set on the element or ancestor.
 */

/* Enable color-scheme on root */
:root {
  color-scheme: light dark;
}

/* CSS Custom Properties with light-dark() */
:root {
  --background: light-dark(#ffffff, #1a1a2e);
  --text: light-dark(#1a1a2e, #f0f0f0);
  --border: light-dark(#e0e0e0, #333333);
  --accent: light-dark(#667eea, #9b7eea);
}

/* Direct Usage Examples */
.element {
  background-color: var(--background);
  color: var(--text);
  border-color: var(--border);
  accent-color: var(--accent);
}

/* Inline light-dark() Usage */
.inline-example {
  background-color: light-dark(#ffffff, #1a1a2e);
  color: light-dark(#1a1a2e, #f0f0f0);
  border-color: light-dark(#e0e0e0, #333333);
  accent-color: light-dark(#667eea, #9b7eea);
}

/* Force Light Mode */
.force-light {
  color-scheme: light;
}

/* Force Dark Mode */
.force-dark {
  color-scheme: dark;
}

/* Fallback for Older Browsers */
.with-fallback {
  /* Light mode fallback */
  background-color: #ffffff;
  color: #1a1a2e;
  border-color: #e0e0e0;
  accent-color: #667eea;

  /* Modern browsers with light-dark() */
  background-color: light-dark(#ffffff, #1a1a2e);
  color: light-dark(#1a1a2e, #f0f0f0);
  border-color: light-dark(#e0e0e0, #333333);
  accent-color: light-dark(#667eea, #9b7eea);
}

/* @supports Feature Detection */
@supports (color: light-dark(white, black)) {
  :root {
    color-scheme: light dark;
    --background: light-dark(#ffffff, #1a1a2e);
    --text: light-dark(#1a1a2e, #f0f0f0);
    --border: light-dark(#e0e0e0, #333333);
    --accent: light-dark(#667eea, #9b7eea);
  }
}

/* Alternative: Media Query Approach (wider support) */
:root {
  --background: #ffffff;
  --text: #1a1a2e;
  --border: #e0e0e0;
  --accent: #667eea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1a1a2e;
    --text: #f0f0f0;
    --border: #333333;
    --accent: #9b7eea;
  }
}

CSS light-dark() Reference

Basic Syntax

/* Requires color-scheme */
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(#000, #fff);
  background: light-dark(white, black);
}

How It Works

  • First value - Used in light mode
  • Second value - Used in dark mode
  • Requires color-scheme property
  • Automatically responds to user preference
  • Works with any color value type

Browser Support

  • Chrome 123+
  • Firefox 120+
  • Safari 17.5+
  • Edge 123+

~75% global coverage (Dec 2024)

color-scheme Values

  • light - Force light mode
  • dark - Force dark mode
  • light dark - Support both (user preference)
  • only light - Light only, no dark mode support

Use Cases

  • Theme-aware color variables
  • Automatic dark mode support
  • Reduced CSS for theming
  • Component-level theme overrides
  • System preference integration

vs Media Queries

/* Media Query (wider support) */
:root { --bg: white; }
@media (prefers-color-scheme: dark) {
  :root { --bg: black; }
}

/* light-dark() (simpler) */
:root {
  color-scheme: light dark;
  --bg: light-dark(white, black);
}