Tailwind CSS on kenji.blog

Hugo थीम कस्टमाइज़ेशन: Tailwind CSS को लागू करने का तरीका

Sun, 13 Sep 2026 03:00:00 +0900

परिचय: स्टैटिक साइट जनरेटर Hugo और Tailwind CSS की शक्तिशाली सिनर्जी

आधुनिक वेब फ्रंटएंड डेवलपमेंट में, प्रदर्शन और डेवलपमेंट अनुभव (DX: Developer Experience) के बीच संतुलन बनाए रखना हर प्रोजेक्ट की सबसे महत्वपूर्ण चुनौतियों में से एक है। स्टैटिक साइट जनरेटर्स (SSG) में दुनिया की सबसे तेज़ बिल्ड स्पीड वाले Hugo और यूटिलिटी-फर्स्ट (utility-first) के अभिनव प्रतिमान (paradigm) को लाने वाले Tailwind CSS का संयोजन, इस चुनौती का एक अंतिम समाधान कहा जा सकता है।

Hugo को Go भाषा में लिखा गया है, और यह हजारों पेजों वाली साइटों को भी कुछ ही सेकंड या मिलीसेकंड में बिल्ड करने का अद्भुत प्रदर्शन प्रदान करता है। दूसरी ओर, Tailwind CSS पहले से परिभाषित अनगिनत यूटिलिटी क्लासेस (flex, text-center, mt-4 आदि) को सीधे HTML में लिखकर, CSS फाइल और HTML फाइल के बीच होने वाले कॉन्टेक्स्ट स्विच को खत्म करता है, और डिज़ाइन इटरेशन को तेज़ करता है।

इस लेख में, हम Hugo थीम में Tailwind CSS को लागू करने और PostCSS का उपयोग करके एक उन्नत एसेट पाइपलाइन (Hugo Pipes) बनाने की प्रक्रिया को, आर्किटेक्चर के मूल से लेकर गणितीय प्रदर्शन अनुकूलन के दृष्टिकोण तक, विस्तार और गहराई से समझाएंगे।

1. यूटिलिटी-फर्स्ट CSS और कंपोनेंट-ओरिएंटेड दृष्टिकोण का विकास

Tailwind CSS को लागू करने की प्रक्रिया में जाने से पहले, हमें Tailwind CSS का उपयोग क्यों करना चाहिए, और इसके पीछे CSS डिज़ाइन दर्शन के इतिहास और विकास को गहराई से समझना बहुत फायदेमंद है।

पारंपरिक CSS डिज़ाइन (BEM और OOCSS) की सीमाएँ

अतीत के वेब विकास में, सिमेंटिक क्लास नाम देना एक सर्वोत्तम अभ्यास माना जाता था। उदाहरण के लिए, एक कार्ड कंपोनेंट बनाते समय, HTML और CSS को निम्न प्रकार से अलग किया जाता था।

1
2
3
4
5
6
7


<div class="card">
 <img class="card__image" src="image.jpg" alt="thumbnail">
 <div class="card__content">
 <h2 class="card__title">शीर्षक</h2>
 <p class="card__description">विवरण यहाँ आएगा।</p>
 </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


.card {
 border-radius: 8px;
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 background-color: #ffffff;
 overflow: hidden;
}
.card__title {
 font-size: 1.5rem;
 font-weight: bold;
 color: #333333;
}
/* इसके बाद, विस्तृत स्टाइल्स आते हैं */

इस तरह का BEM (Block Element Modifier) आधारित डिज़ाइन तब तक काम करता है जब तक प्रोजेक्ट का आकार छोटा हो, लेकिन यह निम्नलिखित समस्याओं का कारण बन सकता है:

नामकरण की थकावट और कमी: हर बार जब आप एक समान कंपोनेंट बनाते हैं, तो आपको एक नया क्लास नाम सोचना पड़ता है (जैसे: card-news, card-featured आदि)।
CSS का बढ़ना: हर बार नई सुविधा जोड़ने पर CSS की लाइनें बढ़ती जाती हैं, और एक बार लिखी गई CSS को यह सोचकर डिलीट नहीं किया जाता कि “यह कहाँ उपयोग हो रही है पता नहीं”, जिससे डेड कोड जमा होता रहता है।
कॉन्टेक्स्ट स्विच: HTML स्ट्रक्चर और CSS स्टाइल को अलग-अलग फाइलों में प्रबंधित करने के कारण, एडिटर में टैब के बीच स्विच करने की संख्या बहुत तेजी से बढ़ती है।

Tailwind CSS द्वारा पैराडाइम शिफ्ट

Tailwind CSS इन समस्याओं को “यूटिलिटी क्लास के संयोजन” के दृष्टिकोण से हल करता है। यदि आप ऊपर दिए गए कार्ड कंपोनेंट के लिए Tailwind CSS का उपयोग करते हैं, तो यह कुछ इस तरह दिखेगा:

1
2
3
4
5
6
7


<div class="rounded-lg shadow-md bg-white overflow-hidden">
 <img class="w-full h-48 object-cover" src="image.jpg" alt="thumbnail">
 <div class="p-6">
 <h2 class="text-2xl font-bold text-gray-800">शीर्षक</h2>
 <p class="mt-2 text-gray-600">विवरण यहाँ आएगा。</p>
 </div>
</div>

चूंकि क्लास का नाम ही स्टाइल का विशिष्ट मान (p-6 का अर्थ padding: 1.5rem; है आदि) दर्शाता है, इसलिए आप केवल HTML को देखकर अंतिम रेंडरिंग परिणाम की भविष्यवाणी कर सकते हैं। इसके अलावा, Tailwind के JIT (Just-In-Time) कंपाइलर के माध्यम से, केवल उपयोग की गई क्लासेस को ही प्रोडक्शन CSS फ़ाइल में निकाला जाता है, जिससे CSS का फ़ाइल आकार बहुत छोटा हो जाता है।

2. Hugo Pipes और PostCSS का आर्किटेक्चर

Hugo में Tailwind CSS को एकीकृत करने के लिए, आपको Hugo Pipes नामक एसेट प्रोसेसिंग पाइपलाइन को समझना होगा। Hugo Pipes एक शक्तिशाली विशेषता है जो Sass/SCSS के कंपाइलेशन, JavaScript की बंडलिंग और Minify, और इस बार उपयोग किए जाने वाले PostCSS के निष्पादन जैसी एसेट से संबंधित सभी प्रक्रियाओं को Hugo के भीतर ही पूरा करती है।

PostCSS, JavaScript प्लगइन्स का उपयोग करके CSS को ट्रांसफॉर्म करने का एक टूल है। वास्तव में, Tailwind CSS खुद भी PostCSS के प्लगइन के रूप में काम करता है।

PostCSS द्वारा AST (Abstract Syntax Tree) ट्रांसफॉर्मेशन तंत्र

PostCSS किस तरह CSS को प्रोसेस करता है, यह समझना ट्रबलशूटिंग के समय बहुत मददगार होता है। नीचे दिया गया Mermaid आरेख दिखाता है कि PostCSS कैसे CSS फ़ाइल को पढ़ता है, प्लगइन्स के माध्यम से इसे ट्रांसफॉर्म करता है, और अंतिम CSS आउटपुट करता है।

flowchart TD
A["कच्चा CSS (styles.css)"] -->|Parser| B["AST (Abstract Syntax Tree)"]
B --> C["प्लगइन 1: Tailwind CSS"]
C --> D["प्लगइन 2: Autoprefixer"]
D --> E["प्लगइन N: cssnano"]
E -->|Stringifier| F["कंपाइल और ऑप्टिमाइज़्ड CSS"]

Parser (पार्सर): इनपुट किए गए कच्चे CSS स्ट्रिंग का विश्लेषण करता है और इसे AST (Abstract Syntax Tree) में बदलता है, जो एक डेटा स्ट्रक्चर है जिसे प्रोग्राम द्वारा प्रोसेस किया जा सकता है।
Plugins (प्लगइन्स):
- Tailwind CSS: टेम्पलेट फाइलों (HTML या Markdown) को स्कैन करता है और उपयोग किए गए यूटिलिटी क्लासेस को नोड्स के रूप में AST पर जोड़ता है। इसके अलावा, यह @tailwind डायरेक्टिव्स का विस्तार करता है।
- Autoprefixer: Can I Use के डेटाबेस का संदर्भ लेता है और आवश्यकतानुसार वेंडर प्रीफिक्स (-webkit-, -moz- आदि) को AST की प्रॉपर्टीज में जोड़ता है।
Stringifier (स्ट्रिंगिफायर): ट्रांसफॉर्मेशन पूरा होने के बाद, AST को फिर से ब्राउज़र द्वारा समझे जा सकने वाले CSS स्ट्रिंग में बदलकर आउटपुट देता है।

3. पर्यावरण सेटअप और पूर्वापेक्षाएँ

अब, आइए वास्तविक सेटअप प्रक्रिया शुरू ব্যায়াম करते हैं। सबसे पहले, यह जांच लें कि आवश्यक सॉफ़्टवेयर इंस्टॉल हैं या नहीं।

अनिवार्य आवश्यकताएँ

Hugo Extended Version: सामान्य Hugo के बजाय, Extended वर्ज़न अनिवार्य है, जिसमें Sass/SCSS प्रोसेसिंग फीचर्स और नेटिव PostCSS इंटीग्रेशन फीचर्स शामिल हैं। अपने टर्मिनल में निम्नलिखित कमांड चलाएँ और सुनिश्चित करें कि वर्ज़न जानकारी में extended स्ट्रिंग शामिल है।
1 2 3

hugo version # अपेक्षित आउटपुट उदाहरण: # hugo v0.121.2-4146... windows/amd64 BuildDate=... VendorInfo=gohugoio +extended
Node.js और npm: Tailwind CSS और PostCSS जैसे डिपेंडेंसी पैकेज Node.js पर चलते हैं। सुनिश्चित करें कि Node.js (LTS वर्ज़न अनुशंसित) इंस्टॉल है।
1 2

node -v npm -v

npm पैकेजेस का इंस्टॉलेशन

प्रोजेक्ट की रूट डायरेक्टरी (जहाँ Hugo की कॉन्फ़िगरेशन फ़ाइल hugo.toml स्थित है) में npm को इनिशियलाइज़ करें और आवश्यक पैकेजेस इंस्टॉल करें।

1
2
3
4
5


# package.json बनाना
npm init -y

# डेवलपमेंट डिपेंडेंसी के रूप में Tailwind CSS, PostCSS, Autoprefixer को इंस्टॉल करना
npm install -D tailwindcss postcss postcss-cli autoprefixer

[!IMPORTANT] यदि postcss-cli इंस्टॉल नहीं है, तो Hugo के भीतर से PostCSS को कॉल करते समय एरर आ सकता है। Hugo Pipes आंतरिक रूप से postcss-cli का उपयोग करता है, इसलिए इसे अवश्य इंस्टॉल करें।

4. कॉन्फ़िगरेशन फ़ाइलें बनाना (PostCSS और Tailwind CSS)

पैकेज इंस्टॉलेशन पूरा होने के बाद, प्रोजेक्ट के व्यवहार को नियंत्रित करने वाली दो महत्वपूर्ण कॉन्फ़िगरेशन फ़ाइलें बनाएँ। इन्हें प्रोजेक्ट की रूट डायरेक्टरी में रखें।

tailwind.config.js बनाना

टर्मिनल में निम्न कमांड चलाने पर एक डिफ़ॉल्ट कॉन्फ़िगरेशन फ़ाइल उत्पन्न हो जाएगी।

1

npx tailwindcss init

उत्पन्न की गई tailwind.config.js को एडिटर में खोलें और content प्रॉपर्टी सेट करें। यह बहुत महत्वपूर्ण है। Tailwind यहाँ निर्दिष्ट पाथ की फाइलों का विश्लेषण करेगा और उपयोग किए गए क्लासेस को निकालेगा। Hugo के प्रोजेक्ट स्ट्रक्चर के अनुसार, लेआउट फाइलों और कंटेंट फाइलों को सही ढंग से निर्दिष्ट करें।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


/** @type {import('tailwindcss').Config} */
module.exports = {
 // Hugo की डायरेक्टरी संरचना के अनुसार स्कैन टारगेट निर्दिष्ट करें
 content: [
 "./content/**/*.md",
 "./content/**/*.html",
 "./layouts/**/*.html",
 "./assets/**/*.js",
 // यदि आप किसी थीम का उपयोग कर रहे हैं, तो थीम की डायरेक्टरी को भी शामिल करना होगा
 // "./themes/my-theme/layouts/**/*.html",
 ],
 theme: {
 extend: {
 // कस्टम कलर्स या फोंट्स का विस्तार यहाँ करें
 colors: {
 'brand-primary': '#3490dc',
 'brand-secondary': '#ffed4a',
 },
 fontFamily: {
 'sans': ['Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'sans-serif'],
 }
 },
 },
 plugins: [
 // यदि आवश्यक हो तो आधिकारिक प्लगइन्स जोड़ें (उदा: Typography प्लगइन)
 // require('@tailwindcss/typography'),
 ],
}

postcss.config.js बनाना

इसके बाद, प्रोजेक्ट रूट में postcss.config.js बनाएँ, जो परिभाषित करता है कि PostCSS किन प्लगइन्स को किस क्रम में चलाएगा।

1
2
3
4
5
6


module.exports = {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 }
}

इस सेटिंग के साथ, जब Hugo PostCSS को कॉल करता है, तो पहले Tailwind CSS प्रोसेसिंग की जाएगी, और उसके बाद Autoprefixer द्वारा वेंडर प्रीफिक्स जोड़ा जाएगा।

5. Hugo में CSS एसेट पाइपलाइन का निर्माण

कॉन्फ़िगरेशन पूरा होने के बाद, अंततः हम Hugo की थीम में Tailwind CSS को जोड़ेंगे।

5-1. एंट्री पॉइंट के रूप में CSS फ़ाइल बनाना

assets/css/ डायरेक्टरी में (यदि यह मौजूद नहीं है तो इसे बनाएँ), एंट्री पॉइंट के रूप में काम करने वाली एक CSS फ़ाइल बनाएँ। यहाँ हम इसे main.css कहेंगे।

फ़ाइल पाथ: assets/css/main.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


/* Tailwind की बेस स्टाइल्स (जैसे रिसेट CSS) को लोड करना */
@tailwind base;

/* कंपोनेंट क्लासेस को लोड करना */
@tailwind components;

/* यूटिलिटी क्लासेस को लोड करना */
@tailwind utilities;

/* यदि आपको कस्टम CSS की आवश्यकता है तो आप यहाँ लिख सकते हैं,
 लेकिन जितना हो सके tailwind.config.js के extend में जोड़ने की सलाह दी जाती है */
@layer components {
 .btn-primary {
 @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300;
 }
}

5-2. लेआउट फ़ाइल (head.html) को एडिट करना

इसके बाद, हम Hugo के टेम्पलेट से उपरोक्त CSS फ़ाइल को लोड करेंगे और PostCSS द्वारा प्रोसेस करने के लिए पाइपलाइन लिखेंगे। आम तौर पर, हम पार्शियल टेम्पलेट को एडिट करते हैं जो <head> टैग को परिभाषित करता है (उदा: layouts/partials/head.html)।

फ़ाइल पाथ: layouts/partials/head.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{{ .Title }} | {{ .Site.Title }}</title>

 <!-- assets/css/main.css प्राप्त करें -->
 {{ $css := resources.Get "css/main.css" }}

 <!-- PostCSS विकल्प परिभाषा -->
 {{ $options := dict "inlineImports" true }}
 {{ $css = $css | resources.PostCSS $options }}

 <!-- प्रोडक्शन (Production) के लिए एसेट ऑप्टिमाइज़ेशन पाइपलाइन -->
 {{ if hugo.IsProduction }}
 <!-- 1. Minify (कंप्रेस) -->
 {{ $css = $css | minify }}
 <!-- 2. Fingerprint (कैश बस्टिंग के लिए हैश जोड़ना) -->
 {{ $css = $css | fingerprint "sha512" }}
 <!-- 3. SRI (Subresource Integrity) के साथ टैग आउटपुट करें -->
 <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">
 {{ else }}
 <!-- डेवलपमेंट (Development) वातावरण में कंप्रेस किए बिना आउटपुट करें (बिल्ड स्पीड को प्राथमिकता) -->
 <link rel="stylesheet" href="{{ $css.RelPermalink }}">
 {{ end }}
</head>

पाइपलाइन स्पष्टीकरण और Mermaid आरेख

ऊपर दिया गया Go टेम्पलेट कोड CSS फ़ाइल को कैसे प्रोसेस करता है, इसके पाइपलाइन प्रोसेसिंग को आरेख के माध्यम से स्पष्ट किया गया है।

flowchart TD
A["assets/css/main.css"] -->|resources.Get| B["Hugo मेमोरी स्पेस"]
B -->|resources.PostCSS| C["PostCSS + Tailwind JIT प्रोसेस"]
C --> D{"hugo.IsProduction ?"}
D -- "हाँ (प्रोडक्शन वातावरण)" --> E["minify (रिक्त स्थान और नई लाइनें हटाएँ)"]
E --> F["fingerprint (हैश कैलकुलेशन)"]
F --> G["public/css/main.[hash].css (SRI के साथ)"]
D -- "नहीं (डेवलपमेंट वातावरण)" --> H["public/css/main.css"]

resources.Get: assets डायरेक्टरी के भीतर निर्दिष्ट फ़ाइल को ढूँढता है और इसे मेमोरी में रिसोर्स ऑब्जेक्ट के रूप में लोड करता है।
resources.PostCSS: प्रोजेक्ट रूट में postcss.config.js का संदर्भ लेता है और CSS सोर्स कोड पर Tailwind CSS और Autoprefixer प्रोसेसिंग लागू करता है। डेवलपमेंट वातावरण (hugo server) में, JIT मोड काम करता है, और फ़ाइल बदलने पर यह तेज़ी से केवल आवश्यक क्लासेस उत्पन्न करता है।
minify: प्रोडक्शन बिल्ड के दौरान (उदा: hugo --environment production), यह अनावश्यक स्पेस और कमेंट्स को हटाकर फ़ाइल साइज़ को कम कर देता है।
fingerprint: फ़ाइल सामग्री के आधार पर SHA हैश की गणना करता है और इसे फ़ाइल नाम में जोड़ता है (उदा: main.ab12cd...css)। इससे ब्राउज़र के शक्तिशाली कैश का उपयोग करते हुए, CSS अपडेट होने पर नई फ़ाइल लोड होने की गारंटी मिलती है, जिसे “कैश बस्टिंग” कहा जाता है।
integrity: Fingerprint द्वारा गणना किए गए हैश मान का उपयोग करके SRI (Subresource Integrity) विशेषता आउटपुट करता है, जो CDN आदि से डेटा में छेड़छाड़ को रोकता है।

6. CSS ऑप्टिमाइज़ेशन में गणितीय प्रदर्शन विश्लेषण

Tailwind CSS को लागू करने का सबसे बड़ा लाभ यह है कि डिलीवर की गई CSS फ़ाइल का आकार बहुत कम हो जाता है। इसका वेब परफॉरमेंस (विशेष रूप से First Contentful Paint: FCP) पर क्या प्रभाव पड़ता है, आइए गणितीय मॉडल का उपयोग करके इसका मात्रात्मक विश्लेषण करें।

CSS फ़ाइल आकार में कमी का मॉडल

पारंपरिक CSS फ्रेमवर्क (जैसे Bootstrap) में, उन स्टाइल्स को भी लोड किया जाता है जिनका उपयोग नहीं किया जा रहा है, जिससे फ़ाइल का आकार $S_{original}$ बड़ा हो जाता है (लगभग 150KB - 200KB)। Tailwind CSS के JIT कंपाइलर द्वारा अनावश्यक क्लासेस को हटाने (Purge) के बाद का आकार $S_{purged}$ मानते हुए, कमी दर $R_{purge}$ का उपयोग करके इसे इस प्रकार व्यक्त किया जा सकता है:

$$ S_{purged} = S_{original} \times (1 - R_{purge}) $$

एक सामान्य प्रोजेक्ट में, $R_{purge}$ लगभग $0.9$ (90% की कमी) तक पहुँच जाता है, और $S_{purged}$ मात्र 10KB से 20KB तक रह जाता है।

इसके अलावा, डिलीवरी के समय सर्वर साइड पर Brotli या Gzip द्वारा संपीड़न किया जाता है। यदि संपीड़न दर को $R_{compress}$ (आमतौर पर लगभग 0.7 - 0.8) माना जाए, तो नेटवर्क से गुज़रने वाला अंतिम पेलोड आकार $S_{final}$ की गणना इस सूत्र से की जाती है:

$$ S_{final} = S_{purged} \times (1 - R_{compress}) $$

क्रिटिकल रेंडरिंग पाथ और नेटवर्क विलंबता

ब्राउज़र द्वारा स्क्रीन पर पहला कंटेंट रेंडर करने में लगने वाले समय (FCP) का अनुमान HTML डाउनलोड समय, CSS डाउनलोड समय और रेंडरिंग समय के योग से लगाया जा सकता है।

$$ T_{FCP} \approx RTT + \frac{S_{HTML}}{BW} + RTT + \frac{S_{final}}{BW} + T_{render} $$

यहाँ,

$RTT$ : Round Trip Time (सर्वर के साथ राउंड-ट्रिप संचार में देरी का समय)
$BW$ : नेटवर्क बैंडविड्थ (Bandwidth)

मोबाइल नेटवर्क जैसे वातावरण में जहाँ $BW$ कम है और $RTT$ बड़ा है (देरी अधिक है), Tailwind CSS का दृष्टिकोण जो $S_{final}$ को कुछ किलोबाइट्स तक कम कर सकता है, $\frac{S_{final}}{BW}$ को शून्य के करीब ले आता है, जिससे Google PageSpeed Insights आदि में शानदार स्कोर प्राप्त होता है।

7. डेवलपमेंट सर्वर को शुरू करना और हॉट रिलोड की पुष्टि करना

सभी सेटिंग्स पूरी होने के बाद, Hugo का डेवलपमेंट सर्वर शुरू करें और जांचें कि क्या Tailwind CSS सही ढंग से काम कर रहा है।

1

hugo server -D

ब्राउज़र में http://localhost:1313/ पर जाएं और जांचें कि क्या साइट दिखाई दे रही है। Markdown के कंटेंट फाइलों या Hugo के टेम्पलेट्स (layouts/ के अंतर्गत फ़ाइलें) को खोलें और क्लासेस जोड़ने का प्रयास करें।

1
2
3
4
5


<!-- परीक्षण के लिए Tailwind क्लासेस लागू करने का उदाहरण -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8 rounded-xl shadow-2xl text-center transform transition duration-500 hover:scale-105">
 <h1 class="text-4xl font-extrabold tracking-tight">Tailwind CSS + Hugo is Awesome!</h1>
 <p class="mt-4 text-lg font-medium">पुष्टि करें कि हॉट रिलोड तुरंत लागू हो गया है।</p>
</div>

फ़ाइल को सहेजते ही, आपको तुरंत हॉट रिलोड का अनुभव होगा: Hugo का शक्तिशाली फ़ाइल वॉचर और Tailwind का JIT कंपाइलर मिलकर काम करते हैं, और मिलीसेकंड में CSS फिर से बन जाता है, और ब्राउज़र अपने आप रीलोड हो जाता है।

ट्रबलशूटिंग: यदि स्टाइल लागू नहीं हो रहे हैं

यदि परिवर्तन लागू नहीं हो रहे हैं, तो कृपया निम्नलिखित बिंदुओं की जाँच करें:

tailwind.config.js में content पाथ सेटिंग यदि स्कैन करने के लिए फ़ाइल पाथ गलत हैं, तो Tailwind फ़ाइल में उपयोग किए गए क्लासेस का पता नहीं लगा पाएगा और उन्हें CSS में आउटपुट नहीं करेगा। विशेष रूप से यदि आप किसी थीम का उपयोग कर रहे हैं, तो जांचें कि थीम डायरेक्टरी का पाथ छूटा तो नहीं है।
PostCSS एरर यदि टर्मिनल के Hugo सर्वर लॉग में Error: failed to transform resource: PostCSS not found जैसा एरर आ रहा है, तो हो सकता है कि npm install सही तरीके से नहीं चला हो, या postcss-cli गायब हो।
Hugo का कैश साफ़ करना कभी-कभी Hugo के कैश के कारण पुरानी CSS रह सकती है। सर्वर को रोकें और hugo server --ignoreCache से शुरू करें, या OS की अस्थायी डायरेक्टरी (जैसे /tmp/hugo_cache/) को हटा दें।

8. प्रोडक्शन के लिए बिल्ड और अधिक उन्नत बनाना

अपनी साइट को प्रोडक्शन सर्वर (Netlify, Vercel, GitHub Pages, Cloudflare Pages आदि) पर डिप्लॉय करते समय, आपको पर्यावरण वेरिएबल सेट करके प्रोडक्शन ऑप्टिमाइज़ेशन पाइपलाइन को चलाना होगा।

1
2


# प्रोडक्शन बिल्ड कमांड का उदाहरण
NODE_ENV=production hugo --minify --environment production

--environment production फ्लैग जोड़ने से, head.html के अंदर का {{ if hugo.IsProduction }} ब्लॉक निष्पादित होता है, जो CSS को Minify करता है और Fingerprint जोड़ता है।

Typography प्लगइन का उपयोग करके Markdown की स्टाइलिंग

Hugo जैसी ब्लॉग या डॉक्यूमेंट साइटों में, आप Markdown से उत्पन्न शुद्ध HTML तत्वों (<h1>, <p>, <ul> आदि) पर सीधे क्लास नहीं जोड़ सकते। इस स्थिति में, Tailwind का आधिकारिक Typography प्लगइन बहुत उपयोगी होता है।

प्लगइन इंस्टॉल करना
1

npm install -D @tailwindcss/typography

इसे tailwind.config.js में जोड़ना

1
2
3
4
5
6


module.exports = {
 // ...
 plugins: [
 require('@tailwindcss/typography'),
 ],
}

टेम्पलेट में लागू करना लेख के टेक्स्ट को आउटपुट करने वाले कंटेनर एलिमेंट में केवल prose क्लास (और आपके इच्छित रंग या आकार का वैरिएंट) जोड़ने से, एक सुंदर डिफ़ॉल्ट स्टाइल लागू हो जाएगी।
1 2 3

<article class="prose prose-lg prose-blue mx-auto mt-10"> {{ .Content }} </article>

इससे हाथ से जटिल CSS सिलेक्टर (.article-content h2 { ... }) लिखने की आवश्यकता पूरी तरह खत्म हो जाती है, और कंपोनेंट की मोड्युलैरिटी पूरी तरह से बनी रहती है।

9. निष्कर्ष: उच्च रख-रखाव वाले फ्रंटएंड इकोसिस्टम का निर्माण

बहुत बढ़िया! अब आपके पास एक उत्तम वेब डेवलपमेंट एसेट पाइपलाइन है, जिसमें Hugo का सुपर-फ़ास्ट स्टैटिक साइट जनरेशन इंजन, Tailwind CSS की आधुनिक स्टाइलिंग क्षमताएँ, और PostCSS की एक्सटेंसिबिलिटी शामिल है।

इस आर्किटेक्चर की सबसे बड़ी खूबी यह है कि “कॉन्फ़िगरेशन केवल एक बार करना होता है”। एक बार पाइपलाइन बन जाने के बाद, डेवलपर्स को CSS फ़ाइल खोलने की आवश्यकता नहीं होती; वे केवल HTML या Markdown टेम्पलेट्स में सहज यूटिलिटी क्लासेस को लिखकर शानदार गति से जटिल UI बना सकते हैं।

इसके अलावा, आउटपुट की गई CSS का आकार हमेशा न्यूनतम रखा जाता है, जो सीधे Core Web Vitals स्कोर को बेहतर बनाने में मदद करता है, और SEO के दृष्टिकोण से भी यह बहुत फायदेमंद है।

Hugo और Tailwind CSS का संयोजन, व्यक्तिगत टेक ब्लॉग्स से लेकर बड़े कॉर्पोरेट वेबसाइट्स तक, सभी प्रोजेक्ट्स के लिए हमेशा “सर्वोत्तम विकल्पों” में से एक रहेगा। अपने आरामदायक वेब डेवलपमेंट अनुभव का आनंद लेने के लिए इस शक्तिशाली टूलचेन का लाभ ज़रूर उठाएँ!

ब्लॉग के डार्क मोड सपोर्ट में CSS डिज़ाइन के महत्वपूर्ण बिंदु

Sat, 12 Sep 2026 12:00:00 +0900

आधुनिक वेब विकास में, डार्क मोड (Dark Mode) का सपोर्ट केवल एक “सुखद सुविधा (Nice to have)” से बदलकर उपयोगकर्ता अनुभव (UX) को बेहतर बनाने के लिए एक “अनिवार्य आवश्यकता (Must have)” बन गया है। विशेष रूप से ब्लॉग या दस्तावेज़ साइटों जैसे मीडिया के लिए जहाँ लंबे समय तक पाठ पढ़ने की अपेक्षा की जाती है, डार्क मोड सपोर्ट का महत्व बहुत अधिक है क्योंकि यह उपयोगकर्ताओं की आँखों की थकान को कम करता है और डिवाइस की बैटरी खपत को बचाता है।

इस लेख में, हम एक फ्रंटएंड इंजीनियर के दृष्टिकोण से ब्लॉग के डार्क मोड सपोर्ट में आने वाली तकनीकी चुनौतियों और अत्यधिक बनाए रखने योग्य CSS डिज़ाइन के प्रमुख बिंदुओं पर बहुत गहराई से चर्चा करेंगे। हम CSS कस्टम प्रॉपर्टीज़ (CSS वेरिएबल्स) के उपयोग, FOUC (Flash of Unstyled Content) को रोकने के लिए उन्नत जावास्क्रिप्ट नियंत्रण और SSR एकीकरण, एक्सेसिबिलिटी (WCAG 2.1 AAA) सुनिश्चित करने के लिए रंग डिज़ाइन (RGB, HSL, और नवीनतम OKLCH), और Tailwind CSS का उपयोग करके व्यावहारिक कोड उदाहरणों सहित डार्क मोड कार्यान्वयन की हर चीज़ को कवर करेंगे।

1. CSS Custom Properties (CSS वेरिएबल्स) के माध्यम से थीम डिज़ाइन के मूल सिद्धांत

वर्तमान में डार्क मोड को लागू करने का सबसे मानक और शक्तिशाली तरीका CSS Custom Properties (CSS वेरिएबल्स) का उपयोग करना है। जबकि Sass जैसे CSS प्रीप्रोसेसर के चर ($color) संकलन समय (compile time) पर स्थिर रूप से हल किए जाते हैं, CSS वेरिएबल्स गतिशील रूप से हल किए जाते हैं और ब्राउज़र के रनटाइम में ओवरराइट किए जाते हैं। यह केवल जावास्क्रिप्ट से क्लास को स्विच करके तुरंत पूरे पेज की रंग योजना को बदलना संभव बनाता है।

1.1 बुनियादी कलर थीम को परिभाषित करना

सबसे पहले, लाइट मोड (डिफ़ॉल्ट) के कलर पैलेट को परिभाषित करने के लिए :root स्यूडो-क्लास का उपयोग करें। फिर, एक सामान्य डिज़ाइन पैटर्न यह है कि जब [data-theme='dark'] (या .dark क्लास) जैसा कोई एट्रिब्यूट लागू होता है, तो उन वेरिएबल्स को ओवरराइट किया जाता है।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


/* लाइट मोड (डिफ़ॉल्ट) वेरिएबल परिभाषाएँ */
:root {
 --color-bg-primary: #ffffff;
 --color-bg-secondary: #f3f4f6;
 --color-text-primary: #111827;
 --color-text-secondary: #4b5563;
 --color-accent: #3b82f6;
 --color-border: #e5e7eb;
}

/* डार्क मोड में वेरिएबल्स को ओवरराइट करना */
[data-theme='dark'] {
 --color-bg-primary: #111827;
 --color-bg-secondary: #1f2937;
 --color-text-primary: #f9fafb;
 --color-text-secondary: #9ca3af;
 --color-accent: #60a5fa;
 --color-border: #374151;
}

/* वास्तविक अनुप्रयोग */
body {
 background-color: var(--color-bg-primary);
 color: var(--color-text-primary);
 transition: background-color 0.3s ease, color 0.3s ease;
}

a {
 color: var(--color-accent);
}

इस तरह से लेआउट और टाइपोग्राफी के विनिर्देशन को रंग (थीम) के विनिर्देशन से पूरी तरह अलग करने से CSS की मेंटेनबिलिटी (रखरखाव क्षमता) में भारी सुधार होता है।

1.2 @media (prefers-color-scheme: dark) का उपयोग

जब OS स्तर पर डार्क मोड सेट होता है, तो UX के दृष्टिकोण से यह वांछनीय है कि उपयोगकर्ता के पहली बार वेबसाइट पर आते ही स्वचालित रूप से डार्क थीम लागू हो जाए। इसे @media (prefers-color-scheme: dark) नामक मीडिया क्वेरी का उपयोग करके प्राप्त किया जा सकता है।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


/* जब OS पर्यावरण सेटिंग डार्क मोड में हो तो फ़ॉलबैक */
@media (prefers-color-scheme: dark) {
 :root:not([data-theme='light']) {
 --color-bg-primary: #111827;
 --color-bg-secondary: #1f2937;
 --color-text-primary: #f9fafb;
 --color-text-secondary: #9ca3af;
 --color-accent: #60a5fa;
 --color-border: #374151;
 }
}

इस नोटेशन के साथ, जब तक उपयोगकर्ता स्पष्ट रूप से लाइट मोड (data-theme='light') नहीं चुनता, तब तक OS की डार्क मोड सेटिंग का सम्मान किया जाता है और वेरिएबल्स को ओवरराइट किया जाता है।

2. कलर स्पेस को समझना और एक्सेसिबिलिटी (WCAG 2.1 AAA)

डार्क मोड के लिए रंग डिज़ाइन करते समय, बस “बैकग्राउंड को काला करना और टेक्स्ट को सफेद करना” पर्याप्त नहीं है। यदि कंट्रास्ट बहुत अधिक है, तो यह चमक (हलेशन) पैदा कर सकता है और इसे पढ़ना कठिन बना सकता है; यदि कंट्रास्ट बहुत कम है, तो दृश्यता से समझौता किया जाता है। वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) दृश्यता सुनिश्चित करने के लिए कंट्रास्ट अनुपात को सख्ती से परिभाषित करती हैं।

2.1 WCAG कंट्रास्ट अनुपात गणना सूत्र

WCAG में कंट्रास्ट अनुपात (Contrast Ratio) $CR$ को पृष्ठभूमि रंग और अग्रभूमि रंग की सापेक्ष चमक (Relative Luminance) का उपयोग करके निम्नानुसार परिभाषित किया गया है।

$$CR = \frac{L_{lighter} + 0.05}{L_{darker} + 0.05}$$

जहाँ, $L_{lighter}$ हल्के रंग की सापेक्ष चमक है, और $L_{darker}$ गहरे रंग की सापेक्ष चमक है (मान सीमा 0.0 से 1.0 तक है)। WCAG 2.1 स्तर AAA को प्राप्त करने के लिए, सामान्य टेक्स्ट के लिए 7:1 या अधिक और बड़े टेक्स्ट के लिए 4.5:1 या अधिक के कंट्रास्ट अनुपात की आवश्यकता होती है।

सापेक्ष चमक $L$ की गणना sRGB कलर स्पेस के RGB मानों से निम्नलिखित जटिल सूत्र का उपयोग करके की जाती है।

$$L = 0.2126 \times R + 0.7152 \times G + 0.0722 \times B$$

प्रत्येक घटक ($R, G, B$) को 255 से विभाजित मूल 8-बिट मान ($R_{sRGB}$) के सामान्यीकृत मान का उपयोग करके गामा सुधार को हल करने के लिए निम्नलिखित रूपांतरण किया जाता है।

$$ R, G, B = \begin{cases} \frac{C_{sRGB}}{12.92} & \text{if } C_{sRGB} \le 0.03928 \\ \left( \frac{C_{sRGB} + 0.055}{1.055} \right)^{2.4} & \text{otherwise} \end{cases} $$

इस गणना को मैन्युअल रूप से करना मुश्किल है, लेकिन रंग डिज़ाइन टूल का उपयोग करके, आप यांत्रिक रूप से उन रंगों का चयन कर सकते हैं जो 7:1 ($CR \ge 7.0$) के कंट्रास्ट अनुपात को पूरा करते हैं।

2.2 HSL बनाम RGB बनाम OKLCH

कलर पैलेट बनाते समय, RGB या HSL मुख्य धारा हुआ करते थे। हालाँकि, “अवधारणात्मक एकरूपता (perceptual uniformity)” के मामले में इनमें एक बड़ी खामी है।

RGB: प्रकाश के यांत्रिक प्राथमिक रंग होने के कारण, मनुष्यों के लिए “हल्का (brighten)” या “गहरा (darken)” करने जैसे सहज समायोजन करना मुश्किल है।
HSL: यह ह्यु (Hue), सैचुरेशन (Saturation), और लाइटनेस (Lightness) का उपयोग करता है, लेकिन HSL की “लाइटनेस (L)” मानव आँख द्वारा देखी जाने वाली चमक से मेल नहीं खाती। उदाहरण के लिए, 50% HSL लाइटनेस वाला शुद्ध पीला और शुद्ध नीला संख्यात्मक रूप से समान रूप से चमकीले हैं, लेकिन पीला रंग मानव आँख को बहुत अधिक चमकीला दिखाई देता है।
OKLCH: यह नवीनतम कलर स्पेस है जिसे हाल ही में CSS Color Module Level 4 में पेश किया गया है। इसमें लाइटनेस (perceptual lightness), क्रोमा (saturation), और ह्यु (hue) शामिल हैं, और यह मानव दृश्य विशेषताओं (अवधारणात्मक एकरूपता) से पूरी तरह मेल खाता है।

OKLCH का उपयोग करके, आप ह्यु (Hue) बदलते समय समान अवधारणात्मक लाइटनेस बनाए रख सकते हैं, जिससे डार्क मोड के लिए कलर पैलेट जनरेशन अत्यधिक पूर्वानुमानित और सुरक्षित हो जाता है।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* OKLCH का उपयोग करके CSS वेरिएबल्स को परिभाषित करने का उदाहरण */
:root {
 /* लाइट मोड के लिए उच्च आधार लाइटनेस और कम सैचुरेशन */
 --bg-base: oklch(0.98 0.01 250);
 --text-base: oklch(0.25 0.02 250);
 --primary-brand: oklch(0.65 0.15 250);
}

[data-theme="dark"] {
 /* डार्क मोड में, केवल लाइटनेस को उलटने से अवधारणात्मक कंट्रास्ट बनाए रखना आसान हो जाता है */
 --bg-base: oklch(0.20 0.02 250);
 --text-base: oklch(0.95 0.01 250);
 --primary-brand: oklch(0.75 0.15 250); /* डार्क मोड के लिए दृश्यता सुनिश्चित करने के लिए थोड़ा हल्का */
}

इस तरह से OKLCH को अपनाकर, आप कई थीमों में लगातार कंट्रास्ट अनुपात (WCAG AAA मानक) सुनिश्चित करने के लिए आसानी से एक तर्क बना सकते हैं।

3. FOUC (Flash of Unstyled Content) की रोकथाम और SSR हाइड्रेशन

डार्क मोड का समर्थन करते समय डेवलपर्स को सबसे अधिक परेशान करने वाली समस्या स्क्रीन झिलमिलाहट (flickering) है, जिसे FOUC (Flash of Unstyled Content) कहा जाता है।

3.1 क्लाइंट-साइड JS द्वारा थीम स्विचिंग का जाल

React और Vue जैसे SPA (या SSG के साथ स्थिर साइटों) में, उपयोगकर्ता की प्राथमिकताओं को localStorage में सहेजना और थीम स्विच करने के लिए जावास्क्रिप्ट का उपयोग करके उन्हें पढ़ना आम बात है। हालाँकि, यदि यह प्रक्रिया React के useEffect में की जाती है, तो निम्नलिखित समस्याएँ उत्पन्न होती हैं।

ब्राउज़र लाइट मोड HTML/CSS रेंडर करता है।
JS बंडल लोड और निष्पादित (executed) किया जाता है।
localStorage से dark सेटिंग पढ़ी जाती है।
dark क्लास HTML में जोड़ा जाता है, और स्क्रीन अचानक डार्क हो जाती है (झिलमिलाहट)।

3.2 पूर्ण FOUC रोकथाम: कुकीज़ और SSR का उपयोग

FOUC को पूरी तरह से रोकने और हाइड्रेशन त्रुटियों से बचने का सबसे अच्छा अभ्यास है उपयोगकर्ता की थीम सेटिंग्स को document.cookie में सहेजना और सर्वर-साइड रेंडरिंग (SSR) चरण में उपयुक्त क्लास के साथ HTML वापस करना।

नीचे दिया गया अनुक्रम आरेख (sequence diagram) कुकीज़ का उपयोग करके थीम आरंभीकरण (theme initialization) के लिए आदर्श प्रवाह दिखाता है।

sequenceDiagram
participant User as "उपयोगकर्ता"
participant Browser as "ब्राउज़र OS"
participant Server as "सर्वर SSR"
participant DOM as "क्लाइंट DOM"
User->>Browser: "पेज का अनुरोध करें"
Browser->>Server: "कुकी (theme=dark) के साथ GET अनुरोध"
Server-->>Browser: "<html data-theme='dark'> के साथ HTML वापस करें"
Browser->>DOM: "प्रारंभिक HTML रेंडर करें (कोई FOUC नहीं)"
DOM->>DOM: "हाइड्रेशन स्क्रिप्ट निष्पादित करें"
alt "कुकी अनुपस्थित (पहली यात्रा)"
DOM->>Browser: "OS prefers-color-scheme जांचें"
Browser-->>DOM: "matchMedia परिणाम (जैसे dark)"
DOM->>DOM: "इनलाइन ब्लॉकिंग स्क्रिप्ट के माध्यम से data-theme='dark' सेट करें"
end

3.3 इनलाइन स्क्रिप्ट के माध्यम से रक्षा पंक्ति (उन स्थिर साइटों के लिए जो कुकीज़ का उपयोग नहीं कर सकती हैं)

उन ब्लॉगों के लिए जो केवल SSG (स्टेटिक साइट जेनरेशन) का उपयोग करते हैं और SSR नहीं कर सकते (जैसे Hugo, Gatsby, या Astro का स्टेटिक एक्सपोर्ट), <head> टैग के अंदर एक ब्लॉकिंग इनलाइन जावास्क्रिप्ट रखना अनिवार्य है जो DOM रेंडर होने से ठीक पहले क्लास जोड़ता है।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- <head> के अंत में रखें -->
<script>
 (function() {
 try {
 var localTheme = localStorage.getItem('theme');
 var osTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 var theme = localTheme || osTheme;
 document.documentElement.setAttribute('data-theme', theme);
 } catch (e) {}
 })();
</script>

चूँकि यह छोटी स्क्रिप्ट ब्राउज़र की रेंडरिंग को ब्लॉक करके तुरंत निष्पादित की जाती है, data-theme विशेषता स्क्रीन के रेंडर होने के समय तक पहले ही सेट हो जाती है, जिससे स्क्रीन झिलमिलाहट (FOUC) को पूरी तरह से रोका जा सकता है।

4. Tailwind CSS और रॉ SCSS/CSS कार्यान्वयन दृष्टिकोण

वास्तविक परियोजनाओं में डार्क मोड को एकीकृत करते समय, प्रत्येक टूल के दृष्टिकोण को समझना आवश्यक है।

4.1 Tailwind CSS में डार्क मोड

Tailwind CSS डिफ़ॉल्ट रूप से dark: संस्करण प्रदान करता है, जिससे डार्क मोड को लागू करना बहुत आसान हो जाता है। आप कॉन्फ़िगरेशन फ़ाइल (tailwind.config.js) में darkMode गुण सेट करते हैं।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// tailwind.config.js
module.exports = {
 // 'media' (OS सेटिंग पर निर्भर) या 'class' (मैन्युअल रूप से टॉगल करने योग्य)
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 /* CSS वेरिएबल्स का उपयोग करके Tailwind कलर पैलेट का विस्तार करें */
 primary: 'rgb(var(--color-primary) / <alpha-value>)',
 background: 'rgb(var(--color-background) / <alpha-value>)',
 }
 }
 }
}

HTML पक्ष पर, आपको बस निम्नानुसार क्लास जोड़ने की आवश्यकता है।

1
2
3
4


<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
 <h1 class="text-2xl font-bold">Hello World</h1>
 <p class="mt-2">Tailwind makes dark mode incredibly easy.</p>
</div>

हालाँकि, हर तत्व में dark:bg-xxx जोड़ने से घटक का आकार (component bloat) बढ़ सकता है। बड़े ब्लॉग और ऐप के लिए, एक हाइब्रिड डिज़ाइन (सिमेंटिक कलर डिज़ाइन) की सिफारिश की जाती है जो CSS वेरिएबल्स पर आधारित है और Tailwind से उन CSS वेरिएबल्स को संदर्भित करता है।

नीचे दिया गया क्लास आरेख CSS वेरिएबल इनहेरिटेंस और एप्लिकेशन लेयर्स दिखाता है।

classDiagram
class GlobalCSSVariables {
"--color-brand-500"
"--color-gray-900"
}
class SemanticVariables {
"--bg-primary"
"--text-base"
"--accent"
}
class TailwindConfig {
"theme.colors.background"
"theme.colors.primary"
}
class UIComponents {
"class='bg-background text-primary'"
}
GlobalCSSVariables <|-- SemanticVariables : ":root & .dark"
SemanticVariables <|-- TailwindConfig : "tailwind.config.js"
TailwindConfig <.. UIComponents : "उपयोगिता कक्षाएं लागू करता है"

4.2 Raw SCSS/CSS के साथ कार्यान्वयन (Mixin का उपयोग)

उन परियोजनाओं के लिए जो Tailwind का उपयोग नहीं करते हैं और अपना स्वयं का SCSS लिखते हैं, डार्क मोड शैलियों को एनकैप्सुलेट करने के लिए @mixin का उपयोग करें।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


/* SCSS Mixin परिभाषा */
@mixin dark-mode {
 /* [data-theme='dark'] विशेषता या OS सेटिंग्स दोनों का समर्थन करता है */
 [data-theme='dark'] & {
 @content;
 }
 @media (prefers-color-scheme: dark) {
 :root:not([data-theme='light']) & {
 @content;
 }
 }
}

/* उपयोग उदाहरण */
.card {
 background-color: #ffffff;
 color: #333333;
 border: 1px solid #eeeeee;

 @include dark-mode {
 background-color: #1a202c;
 color: #e2e8f0;
 border-color: #2d3748;
 }
}

यह विधि सहज है, लेकिन संकलित CSS फ़ाइल का आकार आसानी से बढ़ सकता है (क्योंकि मीडिया क्वेरी प्रत्येक चयनकर्ता में डुप्लिकेट की जाती है), इसलिए वर्तमान प्रवृत्ति CSS वेरिएबल्स (Custom Properties) के आसपास केंद्रित डिज़ाइन में स्थानांतरित होने की है।

5. चित्र (Image) और SVG डार्क मोड अनुकूलन

भले ही टेक्स्ट और बैकग्राउंड के लिए रंग डिज़ाइन पूरा हो गया हो, यदि सामग्री के रूप में रखे गए चित्र और आइकन (SVG) लाइट मोड में रहते हैं, तो वे डार्क मोड में बहुत चमकीले और अलग दिखाई देंगे। इनके लिए अनुकूलन (optimization) भी आवश्यक है।

5.1 CSS फ़िल्टर चित्र की चमक को कम करने के लिए

फ़ोटो जैसी बिटमैप छवियों को डार्क मोड में प्रदर्शित किए जाने पर वे बहुत चमकीली हो सकती हैं। CSS filter प्रॉपर्टी का उपयोग करके चित्र की चमक (brightness) और कंट्रास्ट को थोड़ा कम करने से, इसे डार्क थीम UI में स्वाभाविक रूप से मिश्रित किया जा सकता है।

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


[data-theme='dark'] img:not([src*=".svg"]) {
 /* चमक कम करें और कंट्रास्ट थोड़ा बढ़ाएं */
 filter: brightness(0.8) contrast(1.1);
 transition: filter 0.3s ease;
}

[data-theme='dark'] img:hover {
 /* होवर पर मूल चमक में वापस लौटें (यदि उपयोगकर्ता विवरण देखना चाहता है) */
 filter: brightness(1) contrast(1);
}

5.2 `<picture>` टैग के माध्यम से छवियों को स्विच करना

लोगो छवियाँ या व्याख्यात्मक आरेख (जैसे एक निश्चित सफेद पृष्ठभूमि वाले JPEG) को केवल फ़िल्टरिंग द्वारा नियंत्रित नहीं किया जा सकता है। उस स्थिति में, डार्क मोड के लिए एक अलग चित्र फ़ाइल पर स्विच करने के लिए HTML <picture> तत्व और मीडिया क्वेरीज़ का उपयोग करना सही तरीका है।

1
2
3
4
5
6


<picture>
 <!-- डार्क मोड OS सेटिंग वाले उपयोगकर्ताओं को यह दिखाएं -->
 <source srcset="/img/logo-dark.png" media="(prefers-color-scheme: dark)">
 <!-- डिफ़ॉल्ट (लाइट मोड) -->
 <img src="/img/logo-light.png" alt="साइट का लोगो">
</picture>

※हालाँकि, यह विधि localStorage आदि का उपयोग करके मैन्युअल टॉगलिंग से जुड़ी नहीं है (यह केवल OS सेटिंग्स पर निर्भर करती है)। इसलिए, यदि आपने मैन्युअल स्विचिंग लागू की है, तो आपको JS का उपयोग करके छवि के src को गतिशील रूप से फिर से लिखना होगा, या CSS क्लास का उपयोग करके display: none को टॉगल करना होगा।

5.3 SVG आइकन के लिए `currentColor` समर्थन

आइकन के लिए उपयोग किए जाने वाले इनलाइन SVG को पैरेंट एलिमेंट के टेक्स्ट रंग से लिंक करना सबसे चतुर तरीका है। SVG के fill या stroke एट्रिब्यूट के लिए currentColor निर्दिष्ट करें।

1
2
3
4


<!-- CSS color प्रॉपर्टी का मान (जैसे var(--text-primary)) स्वचालित रूप से लागू किया जाता है -->
<svg viewBox="0 0 24 24" fill="currentColor">
 <path d="M12 2L2 22h20L12 2z" />
</svg>

नतीजतन, जब डार्क मोड चालू होता है और पैरेंट एलिमेंट का टेक्स्ट रंग सफेद हो जाता है, तो SVG आइकन भी अपने आप सफेद हो जाएगा।

6. निष्कर्ष: टिकाऊ डार्क मोड डिज़ाइन की ओर

ब्लॉग या वेब एप्लिकेशन में उच्च गुणवत्ता वाले डार्क मोड को लागू करने के लिए, एक CSS डिज़ाइन आवश्यक है जो निम्नलिखित बिंदुओं को कवर करता हो:

CSS Custom Properties का लाभ उठाएं: रंग हार्डकोडिंग से बचें और अर्थपूर्ण चर नामों (उदा. --bg-primary) का उपयोग करके उन्हें अमूर्त करें।
OKLCH कलर स्पेस अपनाएं: WCAG 2.1 AAA के अनुरूप अत्यधिक सुलभ कंट्रास्ट अनुपात (7:1 या अधिक) को एक अवधारणात्मक रूप से समान कलर स्पेस का उपयोग करके तार्किक रूप से डिज़ाइन करें।
FOUC को सख्ती से रोकें: SSR और कुकीज़ को जोड़कर, या <head> के अंदर ब्लॉकिंग इनलाइन स्क्रिप्ट का उपयोग करके शुरुआती लोड पर स्क्रीन की झिलमिलाहट को पूरी तरह से खत्म करें।
मीडिया और एसेट को अनुकूलित करें: टेक्स्ट के अलावा अन्य तत्वों को डार्क थीम में मिलाने के लिए filter: brightness(), currentColor, और <picture> टैग का पूरा उपयोग करें।

यह कहा जा सकता है कि केवल “रंगों को उलटने” से परे ये सावधानीपूर्वक विचार एक आधुनिक ब्लॉग की शर्तें हैं जो उपयोगकर्ताओं द्वारा पसंद किया जाएगा और पढ़ने का एक उत्कृष्ट अनुभव (reading experience) प्रदान करेगा जो आँखों पर कम थकाने वाला है। यदि आप एक डेवलपर हैं जो डार्क मोड लागू करने वाले हैं, तो कृपया इस लेख में दिए गए डिज़ाइन पैटर्न को संदर्भ के रूप में उपयोग करें।