CSS light-dark() Function: Native थीम स्विचिंग

अंतिम अपडेट दिसमबर 24, 2025 3 मिनट पठन

Dark mode implementation ऐतिहासिक रूप से non-trivial boilerplate की आवश्यकता रही है: एक prefers-color-scheme media query जो हर custom property को override करती है, user toggles handle करने के लिए JavaScript, preference persist करने के लिए localStorage, और page load पर wrong theme की flash को रोकने के लिए <head> में एक inline script।

CSS light-dark() function इन सब को समाप्त नहीं करता, लेकिन यह problem के CSS surface area को dramatically reduce करता है।

light-dark() क्या है?

Function signature simple है:

color: light-dark(<light-color>, <dark-color>);

जब active color scheme light हो, browser <light-color> उपयोग करता है। जब dark हो, <dark-color> उपयोग करता है।

Function supported है: - Chrome/Edge: version 123 से (March 2024) - Firefox: version 120 से (November 2023) - Safari: version 17.5 से (June 2024)

color-scheme Property के साथ यह कैसे काम करता है

light-dark() isolation में काम नहीं करता। यह पूरी तरह से color-scheme CSS property पर depend करता है।

:root {
  color-scheme: light dark;

  --color-background: light-dark(#FFFFFF, #0F0F17);
  --color-text:       light-dark(#1A1A2E, #E8E8F0);
  --color-border:     light-dark(#DEE2E6, #2E2E4A);
  --color-accent:     light-dark(#2563EB, #60A5FA);
}

कोई media query नहीं। कोई selector override नहीं। प्रति color एक declaration, दोनों values inline।

prefers-color-scheme Media Queries को Replace करना

Traditional approach dark mode के लिए हर color variable को duplicate या override करने की आवश्यकता है:

/* Traditional approach — verbose */
:root {
  --bg: #FFFFFF;
  --text: #1A1A2E;
  --accent: #2563EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0F17;
    --text: #E8E8F0;
    --accent: #60A5FA;
  }
}

light-dark() के साथ, यह collapse होता है:

/* light-dark() approach — प्रति variable एक declaration */
:root {
  color-scheme: light dark;

  --bg:     light-dark(#FFFFFF, #0F0F17);
  --text:   light-dark(#1A1A2E, #E8E8F0);
  --accent: light-dark(#2563EB, #60A5FA);
}

CSS Custom Properties के साथ Combining

:root {
  color-scheme: light dark;

  /* Backgrounds */
  --color-bg-base:      light-dark(#FFFFFF,   #0F0F17);
  --color-bg-elevated:  light-dark(#F8F9FA,   #1A1A2E);
  --color-bg-overlay:   light-dark(#F1F3F5,   #252540);

  /* Text */
  --color-text-primary:   light-dark(#1A1A2E, #E8E8F0);
  --color-text-secondary: light-dark(#4A4A6A, #A8A8C0);

  /* Interactive / brand */
  --color-accent:         light-dark(#2563EB, #60A5FA);
  --color-accent-hover:   light-dark(#1D4ED8, #93C5FD);

  /* Feedback */
  --color-success:  light-dark(#16A34A, #4ADE80);
  --color-warning:  light-dark(#D97706, #FCD34D);
  --color-danger:   light-dark(#DC2626, #F87171);
}

ध्यान दें कि light accent #2563EB dark mode में #60A5FA पर shift होता है। हर combination का target contrast ratio verify करने के लिए Contrast Checker का उपयोग करें।

User Toggle जोड़ना (JavaScript)

const STORAGE_KEY = 'color-scheme-preference';

function initColorScheme() {
  const stored = localStorage.getItem(STORAGE_KEY);
  if (stored === 'light' || stored === 'dark') {
    document.documentElement.style.colorScheme = stored;
  }
}

function toggleColorScheme() {
  const current = getComputedStyle(document.documentElement)
    .colorScheme.trim();
  const next = current.includes('dark') ? 'light' : 'dark';
  document.documentElement.style.colorScheme = next;
  localStorage.setItem(STORAGE_KEY, next);
}

// First paint से पहले run करें flash से बचने के लिए
initColorScheme();

Anti-Flash Pattern

<head>
  <meta name="color-scheme" content="light dark">
  <script>
    const stored = localStorage.getItem('color-scheme-preference');
    if (stored) {
      document.documentElement.style.colorScheme = stored;
    }
  </script>
  <link rel="stylesheet" href="styles.css">
</head>

JS-Based Themes से Migration Guide

Step 1: color-scheme को :root में जोड़ें

:root {
  color-scheme: light dark;
}

Step 2: Variables को एक-एक करके Migrate करें

/* Before */
:root { --bg: #FFFFFF; }
[data-theme="dark"] { --bg: #0F0F17; }

/* After */
:root {
  color-scheme: light dark;
  --bg: light-dark(#FFFFFF, #0F0F17);
}

Browser Support Fallback

:root {
  --color-bg: #FFFFFF;
  --color-text: #1A1A2E;
  --color-bg:   light-dark(#FFFFFF, #0F0F17);
  --color-text: light-dark(#1A1A2E, #E8E8F0);
}

@supports not (color: light-dark(white, black)) {
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #0F0F17;
      --color-text: #E8E8F0;
    }
  }
}

मुख्य निष्कर्ष

light-dark(<light-value>, <dark-value>) light color scheme में first argument और dark scheme में second return करता है।
यह color-scheme CSS property पर depend करता है। हमेशा :root पर color-scheme: light dark set करें।
Main advantage traditional media query approach पर: दोनों theme values को एक single declaration में colocating।
User overrides के लिए JavaScript के माध्यम से document.documentElement.style.colorScheme set करना आवश्यक है।
Browser support 2026 तक ~85% है। पुराने environments के लिए @supports not fallback प्रदान करें।
Contrast Checker का उपयोग करें यह verify करने के लिए कि हर light-dark() pair में दोनों values WCAG requirements pass करती हैं।

कंट्रास्ट चेकर

WCAG 2.1 दिशानिर्देशों के अनुसार रंग कंट्रास्ट अनुपात जांचें। सामान्य और बड़े टेक्स्ट के लिए AA और AAA अनुपालन का परीक्षण करें।