React में रंग थीमिंग: CSS वेरिएबल और Context

थीमिंग उन समस्याओं में से एक है जो तब तक सरल लगती है जब तक आपको इसे बड़े पैमाने पर मेंटेन नहीं करना पड़ता। लाइट और डार्क मोड के बीच एकल टॉगल सीधा है। एक प्रोडक्ट जो कई ब्रांड की सेवा करता है, उपयोगकर्ता-अनुकूलनीय पैलेट प्रदान करता है, या पेज रीलोड के बिना थीम स्विच करने की आवश्यकता है — इसके लिए अधिक सोची-समझी आर्किटेक्चर की आवश्यकता है।

React का कंपोनेंट मॉडल और CSS कस्टम प्रॉपर्टी थीमिंग के लिए एक प्राकृतिक जोड़ी हैं। CSS वेरिएबल रंग मूल्यों को declaratively संभालते हैं; React Context थीम स्टेट मैनेज करता है; और Tailwind CSS (आधुनिक प्रोजेक्ट में) दोनों को जोड़ता है।

थीम आर्किटेक्चर पैटर्न

पैटर्न 1: केवल CSS वेरिएबल (कोई JavaScript स्टेट नहीं)

बुनियादी डार्क मोड सपोर्ट के लिए सबसे सरल पैटर्न को React स्टेट की बिल्कुल आवश्यकता नहीं है। एक prefers-color-scheme मीडिया क्वेरी कस्टम प्रॉपर्टी मूल्यों को बदलती है, और हर कंपोनेंट स्वचालित रूप से अपडेट होता है:

/* globals.css */
:root {
  --color-bg: #F8FAFC;
  --color-text: #1E293B;
  --color-brand: #2563EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0F172A;
    --color-text: #F1F5F9;
    --color-brand: #60A5FA;
  }
}

कंपोनेंट var(--color-bg) का उपयोग करते हैं और उन्हें वर्तमान थीम के बारे में जानने की आवश्यकता नहीं है।

कब उपयोग करें: ऐसी साइटें जहाँ आप OS-स्तरीय प्राथमिकता का सम्मान करना चाहते हैं और उपयोगकर्ता-नियंत्रित टॉगल की आवश्यकता नहीं है।

सीमा: उपयोगकर्ताओं के लिए ऐप के भीतर अपनी OS सेटिंग को ओवरराइड करने का कोई तरीका नहीं।

पैटर्न 2: Data Attribute थीम स्विचिंग

<html> एलीमेंट पर data-theme एट्रिब्यूट जोड़ें ताकि सक्रिय थीम स्पष्ट और ओवरराइड करने योग्य हो:

/* Default: light */
[data-theme="light"],
:root {
  --color-bg: #F8FAFC;
  --color-text: #1E293B;
  --color-brand: #2563EB;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
}

/* Dark */
[data-theme="dark"] {
  --color-bg: #0F172A;
  --color-text: #F1F5F9;
  --color-brand: #60A5FA;
  --color-surface: #1E293B;
  --color-border: #334155;
}

// पहले पेंट से पहले थीम लागू करें (<head> में इनलाइन स्क्रिप्ट)
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);

कब उपयोग करें: अधिकांश प्रोडक्शन ऐप जिन्हें उपयोगकर्ता-नियंत्रित टॉगल की आवश्यकता है।

पैटर्न 3: Class-Based थीम स्विचिंग

Data-attribute के समान, लेकिन CSS क्लास का उपयोग करता है। Tailwind का darkMode: 'class' कॉन्फिगरेशन इस पैटर्न पर निर्भर करता है:

.dark {
  --color-bg: #0F172A;
  --color-text: #F1F5F9;
}

कब उपयोग करें: class डार्क मोड स्ट्रेटेजी के साथ Tailwind CSS का उपयोग करने वाले प्रोजेक्ट।

रंगों के लिए CSS वेरिएबल: टोकन सिस्टम

Descriptive Naming के बजाय Semantic Naming

टोकन सिस्टम में सबसे महत्वपूर्ण निर्णय नामकरण है। रंग मूल्य द्वारा नामकरण (--blue-500, --gray-900) वेरिएबल को अलग से समझना आसान बनाता है लेकिन थीमिंग असंभव बना देता है। Semantic भूमिका द्वारा नामकरण (--color-brand, --color-text-muted) थीम में मूल्यों को पूरी तरह बदलने की अनुमति देता है:

:root {
  /* ---- Color Primitives (कंपोनेंट में सीधे उपयोग नहीं) ---- */
  --blue-500: #3B82F6;
  --blue-700: #1D4ED8;
  --slate-50: #F8FAFC;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* ---- Semantic Tokens (कंपोनेंट में उपयोग) ---- */
  --text-primary: var(--slate-800);
  --text-secondary: #64748B;
  --text-disabled: #94A3B8;
  --text-inverse: var(--slate-50);

  --bg-base: var(--slate-50);
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F1F5F9;

  --brand: var(--blue-700);
  --brand-hover: #1E40AF;
  --brand-subtle: #EFF6FF;
  --on-brand: #FFFFFF;

  --error: #DC2626;
  --error-bg: #FEF2F2;
  --success: #16A34A;
  --success-bg: #F0FDF4;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
}

अपना Color Scale जनरेट करना

टोकन सिस्टम बनाने से पहले, आपको कच्चा रंग पैलेट चाहिए। Shade Generator एकल ब्रांड रंग से पूर्ण 50–950 स्केल तैयार करता है — Tailwind CSS द्वारा उपयोग किया जाने वाला वही स्केल पैटर्न।

थीम स्टेट के लिए React Context

ThemeContext पैटर्न

उपयोगकर्ता-नियंत्रित थीम टॉगल वाले ऐप के लिए, React Context स्टेट मैनेजमेंट लेयर प्रदान करता है:

// contexts/ThemeContext.tsx
import { createContext, useContext, useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'system';

interface ThemeContextValue {
  theme: Theme;
  resolvedTheme: 'light' | 'dark';
  setTheme: (theme: Theme) => void;
}

const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setThemeState] = useState<Theme>(() => {
    if (typeof window === 'undefined') return 'system';
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  const systemPrefersDark = typeof window !== 'undefined'
    ? window.matchMedia('(prefers-color-scheme: dark)').matches
    : false;

  const resolvedTheme: 'light' | 'dark' =
    theme === 'system'
      ? (systemPrefersDark ? 'dark' : 'light')
      : theme;

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', resolvedTheme);
    localStorage.setItem('theme', theme);
  }, [theme, resolvedTheme]);

  useEffect(() => {
    if (theme !== 'system') return;
    const media = window.matchMedia('(prefers-color-scheme: dark)');
    const handler = () => {
      document.documentElement.setAttribute(
        'data-theme',
        media.matches ? 'dark' : 'light'
      );
    };
    media.addEventListener('change', handler);
    return () => media.removeEventListener('change', handler);
  }, [theme]);

  const setTheme = (newTheme: Theme) => {
    setThemeState(newTheme);
  };

  return (
    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme(): ThemeContextValue {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
}

Flash of Wrong Theme (FOTWT) को रोकना

Server-side rendered ऐप को गलत थीम की फ्लैश की समस्या का सामना करना पड़ता है। समाधान <head> में एक blocking inline स्क्रिप्ट है जो पेज रेंडर होने से पहले localStorage पढ़ती है:

<!-- आपके <head> में, किसी भी CSS लिंक से पहले -->
<script>
  (function() {
    try {
      var stored = localStorage.getItem('theme');
      var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      var theme = stored === 'dark' || stored === 'light'
        ? stored
        : (systemDark ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    } catch(e) {}
  })();
</script>

Tailwind CSS थीम

Tailwind v3: Class-Based डार्क मोड

Tailwind v3 में, डार्क मोड के लिए tailwind.config.js में darkMode: 'class' सेट करना आवश्यक है:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#EFF6FF',
          500: '#3B82F6',
          600: '#2563EB',
          700: '#1D4ED8',
        },
      },
    },
  },
};

Tailwind v4: CSS-First कॉन्फिगरेशन

Tailwind v4 कॉन्फिगरेशन को पूरी तरह CSS में ले जाता है:

/* styles.css */
@import "tailwindcss";

@theme {
  --color-brand-500: #3B82F6;
  --color-brand-600: #2563EB;
  --color-brand-700: #1D4ED8;
}

मल्टी-ब्रांड थीमिंग रणनीति

Brand Tokens को CSS Variable Overrides के रूप में

सबसे रखरखाव योग्य दृष्टिकोण एक base stylesheet में brand-agnostic semantic tokens परिभाषित करता है, फिर प्रति ब्रांड primitive असाइनमेंट को override करता है:

:root {
  --brand-primary-raw: 37 99 235;
  --brand-primary: rgb(var(--brand-primary-raw));
  --brand-primary-hover: color-mix(in srgb, rgb(var(--brand-primary-raw)) 80%, black);
}

[data-brand="acme"] {
  --brand-primary-raw: 37 99 235;
}

[data-brand="globex"] {
  --brand-primary-raw: 124 58 237;
}

Shade Generator के साथ Brand Scales जनरेट करना

प्रत्येक ब्रांड के लिए, आपको एक पूर्ण रंग स्केल की आवश्यकता है। प्रत्येक ब्रांड के प्राथमिक और एक्सेंट रंग के लिए 50–950 स्केल जनरेट करने के लिए Shade Generator का उपयोग करें।

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

CSS कस्टम प्रॉपर्टी नींव हैं: Semantic tokens (--text-primary, --brand-primary) परिभाषित करें और हर थीम के लिए उनके मूल्य बदलें।
Data-attribute थीम स्विचिंग (data-theme="dark") सबसे लचीला पैटर्न है।
दो-परत टोकन सिस्टम (primitive color scale + semantic role tokens) पूर्ण थीम लचीलेपन की अनुमति देता है।
React Context थीम स्टेट मैनेज करता है; कंपोनेंट को सही रंग लागू करने के लिए context पढ़ने की कभी आवश्यकता नहीं होती।
Flash of Wrong Theme को रोकें <head> में एक blocking inline स्क्रिप्ट से।
मल्टी-ब्रांड थीमिंग थीम सिस्टम के ऊपर एक और data attribute (data-brand) स्टैक करती है।