थीमिंग

कुछ ही कॉन्फ़िग टोकन के साथ लुक ट्यून करें, theme.css में किसी भी CSS वेरिएबल को ओवरराइड करें, या कस्टम कंपोनेंट्स के लिए Tailwind यूटिलिटीज़ तक उतरें।

Blume की थीम टोकन-संचालित है और लाइट व डार्क मोड में बिना किसी अतिरिक्त सेटअप के काम करती है। जितनी ज़रूरत हो उतना ही इस्तेमाल करें: आम मामलों के लिए कुछ कॉन्फ़िग टोकन, किसी भी डिज़ाइन टोकन को ओवरराइड करने के लिए एक theme.css, या कस्टम कंपोनेंट्स के लिए Tailwind यूटिलिटीज़।

कॉन्फ़िग टोकन

रोज़मर्रा के नॉब आपकी कॉन्फ़िग में theme के अंतर्गत रहते हैं:

theme: {
  accent: "teal",   // a named preset or any CSS color
  radius: "md",     // none | sm | md | lg
  mode: "system",   // system | light | dark
  toggle: true,     // show the light/dark toggle
  fonts: {          // self-hosted Google Fonts
    display: "inter",
    body: "inter",
    mono: "ibm-plex-mono",
  },
}

एक्सेंट

एक्सेंट रंग इंटरैक्टिव और हाइलाइट किए गए एलिमेंट्स को रंगत देता है — स्टेप मार्कर, सक्रिय टैब, बैज, कार्ड होवर, और भी बहुत कुछ। किसी नामित प्रीसेट या किसी भी CSS रंग का उपयोग करें:

theme: {
  accent: "#ff0066", // hex, oklch(), rgb()… anything CSS understands
}

नामित प्रीसेट: blue (डिफ़ॉल्ट), green, orange, pink, purple, red, और teal। हर प्रीसेट में लाइट मोड के लिए एक गहरा शेड और डार्क मोड के लिए एक हल्का शेड होता है, ताकि एक्सेंट टेक्स्ट और बटन लेबल दोनों मोड में WCAG AA कंट्रास्ट (4.5:1) को पूरा करें।

एक स्ट्रिंग दोनों कलर मोड पर लागू होती है; हर मोड के लिए अलग एक्सेंट देने के लिए एक ऑब्जेक्ट पास करें।

ऐसा मान जो न तो कोई प्रीसेट है और न ही कोई CSS रंग, जैसे "deep purple" या बिना # वाला hex मान, blume.config.ts में उसे सेट करने वाली लाइन पर BLUME_THEME_COLOR_INVALID चेतावनी देता है, क्योंकि ब्राउज़र उसका उपयोग करने वाली स्टाइल्स को अनदेखा कर देते हैं। यही जाँच action, background, और Open Graph कार्ड के seo.og.palette पर भी लागू होती है। कस्टम प्रॉपर्टीज़ (var(--brand)), color-mix(), और अन्य कलर फ़ंक्शन जैसे लिखे गए हैं वैसे ही स्वीकार किए जाते हैं।

एक्सेंट या एक्शन फ़िल पर मौजूद टेक्स्ट, जैसे बटन लेबल या स्टेप नंबर, तब तक सफ़ेद रहता है जब तक उस रंग पर सफ़ेद AA को पूरा करता है, अन्यथा वह गहरा होता है। हल्के एक्सेंट को बिना किसी अतिरिक्त कॉन्फ़िग के गहरे लेबल मिलते हैं। blume audit किसी कस्टम एक्सेंट, एक्शन, या बैकग्राउंड को इसी मानक पर जाँचता है।

रेडियस

radius कार्ड्स, कोड ब्लॉक्स, कॉलआउट्स और इनपुट्स द्वारा साझा किए जाने वाले कोने के गोलाकारपन को सेट करता है — none, sm, md (डिफ़ॉल्ट), या lg।

कलर मोड

mode प्रारंभिक कलर स्कीम सेट करता है:

• system (डिफ़ॉल्ट) — पाठक की OS प्राथमिकता का अनुसरण करता है
• light / dark — किसी एक स्कीम को डिफ़ॉल्ट बनाता है

हेडर में मौजूद एक टॉगल पाठकों को स्विच करने देता है, और उनकी पसंद विज़िट्स के बीच याद रखी जाती है। डार्क मोड <html> एलिमेंट पर data-theme="dark" एट्रिब्यूट के साथ लागू किया जाता है।

केवल एक स्कीम शिप करने के लिए, toggle: false सेट करें। हेडर से टॉगल हट जाता है, और हर पेज mode में रेंडर होता है, उन पाठकों के लिए भी जिन्होंने टॉगल हटाए जाने से पहले दूसरी स्कीम चुनी थी:

theme: {
  mode: "dark",
  toggle: false,
}

mode: "system" के साथ, toggle: false हर पाठक की OS सेटिंग का अनुसरण करता है और उन्हें उसे ओवरराइड करने का कोई तरीका नहीं देता।

फ़ॉन्ट्स

fonts तीन भूमिकाओं के लिए टाइपफ़ेस सेट करता है:

• display — शीर्षक (h1–h6)
• body — बॉडी टेक्स्ट, UI, और प्रोज़
• mono — कोड ब्लॉक और इनलाइन कोड

शीर्षकों को डिस्प्ले-स्तर की letter-spacing (-0.05em) थीम से ही मिलती है, इसलिए आप display के लिए जो भी चुनें — Inter डिफ़ॉल्ट जैसे टेक्स्ट फ़ॉन्ट सहित — शीर्षक बड़े आकार में सही दिखते हैं, फ़ॉन्ट में निर्मित tracking पर निर्भर हुए बिना।

प्रत्येक का डिफ़ॉल्ट एक चयनित Google Font है, इसलिए Blume शुरुआत से ही सुविचारित दिखता है:

theme: {
  fonts: {
    display: "inter",         // default
    body: "inter",            // default
    mono: "ibm-plex-mono",    // default
  },
}

केवल वही भूमिकाएँ सेट करें जिन्हें आप बदलना चाहते हैं — बाकी अपने डिफ़ॉल्ट पर बनी रहती हैं:

theme: {
  fonts: { display: "geist" }, // body + mono stay Inter / IBM Plex Mono
}

फ़ॉन्ट्स सेल्फ़-होस्टेड होते हैं: Blume उन्हें बिल्ड टाइम पर डाउनलोड करता है और आपकी अपनी साइट से सर्व करता है, इसलिए Google को कोई रनटाइम रिक्वेस्ट नहीं जाती और कोई लेआउट शिफ्ट नहीं होता (Astro स्वतः फ़ॉलबैक-मेट्रिक फ़ेस जनरेट करता है)।

एक सादा स्ट्रिंग नीचे दिए गए चयनित सेट में से एक Google Fonts स्लग है:

किसी भी प्रोवाइडर की फ़ैमिली

क्या आपको ऐसी फ़ैमिली चाहिए जो चयनित सेट में नहीं है — मान लीजिए, कोई जो ग़ैर-लैटिन लिपि को कवर करती हो? फ़ैमिली के सटीक नाम के साथ एक ऑब्जेक्ट पास करें। यह उसी तरह सेल्फ़-होस्टेड और ऑप्टिमाइज़ की जाती है:

theme: {
  fonts: {
    display: { name: "Noto Sans JP", weights: [400, 700] },
    body: { name: "Noto Sans JP", weights: [400, 500, 700] },
  },
}

• name — फ़ैमिली का नाम ठीक वैसे ही जैसे प्रोवाइडर उसे सूचीबद्ध करता है।
• provider — फ़ैमिली कहाँ से आती है: google (डिफ़ॉल्ट), fontsource, bunny, या fontshare।
• weights — लोड किए जाने वाले वेट, संख्याओं के रूप में या "100..900" जैसी वेरिएबल रेंज के रूप में। डिफ़ॉल्ट [400, 500, 600, 700] है।
• subsets — लोड किए जाने वाले कैरेक्टर सबसेट, प्रोवाइडर के नामों के अनुसार (latin, latin-ext, vietnamese, cyrillic, greek, …)। डिफ़ॉल्ट रूप से latin के साथ वह सब जो आपके कॉन्फ़िगर किए गए लोकेल के लिए ज़रूरी है — नीचे देखें।
• fallback — फ़ॉन्ट लोड होने के दौरान और अनुपलब्ध ग्लिफ़ के लिए दिखाया जाने वाला सिस्टम स्टैक: sans, serif, या mono। मोनो भूमिका के लिए डिफ़ॉल्ट mono है और अन्यथा sans।

सबसेट और लोकेल

Google, Bunny, और Fontsource हर फ़ैमिली को प्रति-लिपि सबसेट में बाँटते हैं, और केवल उन्हीं सबसेट को @font-face मिलता है जिन्हें आप लोड करते हैं। Blume यह सूची आपके i18n.locales से निकालता है: वियतनामी, पोलिश, रूसी, या ग्रीक लोकेल वाली साइट latin के साथ-साथ vietnamese, latin-ext, cyrillic, या greek लोड करती है, ताकि डायक्रिटिक्स और ग़ैर-लैटिन अक्षर सिस्टम फ़ॉलबैक के बजाय आपके चुने हुए फ़ॉन्ट में रेंडर हों। जिन साइटों में i18n ब्लॉक नहीं है, या जिनमें केवल लैटिन-1 भाषाएँ हैं, वे अकेले latin लोड करती हैं। ब्राउज़र किसी सबसेट को तभी डाउनलोड करते हैं जब कोई पेज उसके कैरेक्टर इस्तेमाल करता है, और प्रीलोड भी उसी सूची का अनुसरण करते हैं।

निकाली गई सूची को ओवरराइड करने के लिए किसी फ़ैमिली पर subsets सेट करें — मान लीजिए, ऐसी एकल-लोकेल साइट के लिए जिसके कंटेंट को फिर भी ऐसी लिपि चाहिए जिसका संकेत उसका लोकेल नहीं देता:

theme: {
  fonts: {
    body: { name: "Be Vietnam Pro", subsets: ["latin", "vietnamese"] },
  },
}

inter जैसे चयनित स्लग लोकेल से निकाली गई सूची का अनुसरण करते हैं; उन फ़ैमिलीज़ के लिए भी सबसेट तय करने हेतु ऑब्जेक्ट रूप का उपयोग करें।

लोकल फ़ॉन्ट फ़ाइलें

ऐसे फ़ॉन्ट के लिए जो आपका अपना है (या जिसे कोई प्रोवाइडर सर्व नहीं करता), किसी भूमिका को अपने प्रोजेक्ट की फ़ॉन्ट फ़ाइलों की ओर इंगित करें। हर वेरिएंट एक @font-face बन जाता है:

theme: {
  fonts: {
    display: {
      name: "Berkeley Mono",
      variants: [
        { src: "./fonts/BerkeleyMono-Regular.woff2", weight: 400 },
        { src: "./fonts/BerkeleyMono-Bold.woff2", weight: 700 },
      ],
    },
  },
}

पाथ प्रोजेक्ट रूट से रिज़ॉल्व होते हैं। weight और style (normal, italic, oblique) वैकल्पिक हैं — छोड़ देने पर Astro उन्हें फ़ॉन्ट फ़ाइल से पढ़ लेता है।

सिस्टम स्टैक पर वापस लौटना चाहते हैं? theme.css में सीधे --blume-font-* टोकन ओवरराइड करें।

डार्क-मोड रंग

accent और background एक ही नियम का पालन करते हैं: एक स्ट्रिंग दोनों कलर मोड पर लागू होती है, और एक { light, dark } ऑब्जेक्ट हर मोड को अलग-अलग सेट करता है:

theme: {
  accent: { light: "blue", dark: "teal" },
  background: {
    light: "#ffffff",
    dark: "#0a0a0a",
  },
}

हर रंग एक नामित प्रीसेट या कोई भी CSS रंग लेता है। background (और backgroundImage) के लिए किसी भी की को छोड़कर केवल एक मोड को ओवरराइड किया जा सकता है — background: { dark: "#0a0a0a" } डिफ़ॉल्ट लाइट बैकग्राउंड को बनाए रखता है।

एक्शन रंग

action प्राथमिक कॉल-टू-एक्शन और action Tailwind यूटिलिटीज़ (bg-action, text-action) के लिए एक द्वितीयक एक्सेंट है। यह डिफ़ॉल्ट रूप से आपके accent पर सेट होता है:

theme: {
  action: "#ff0066",
}

बैकग्राउंड इमेज

backgroundImage के साथ अपने कंटेंट के पीछे एक बैकग्राउंड इमेज सेट करें — एक URL या public/ के अंतर्गत एक पाथ। रंगों की तरह, एक स्ट्रिंग दोनों मोड पर लागू होती है और एक { light, dark } ऑब्जेक्ट हर मोड की इमेज सेट करता है:

theme: {
  backgroundImage: {
    light: "/bg-light.svg",
    dark: "/bg-dark.svg",
  },
}

theme.css

किसी भी डिज़ाइन टोकन को ओवरराइड करने के लिए अपने प्रोजेक्ट रूट में एक theme.css रखें। यह कैस्केड की आख़िरी लेयर है, इसलिए यह डिफ़ॉल्ट्स और कॉन्फ़िग टोकन पर भारी पड़ती है:

:root {
  --blume-accent: oklch(0.68 0.14 180);
  --blume-radius: 0.5rem;
}

:root[data-theme="dark"] {
  --blume-background: oklch(0.16 0 0);
}

लाइट मोड के लिए टोकन :root के अंतर्गत और डार्क मोड के लिए :root[data-theme="dark"] के अंतर्गत सेट करें। कलर टोकन के अलग बिल्ट-इन डार्क मान डार्क सिलेक्टर की उच्चतर विशिष्टता पर घोषित होते हैं, इसलिए --blume-accent, --blume-background, और उनके साथियों का केवल :root में किया गया ओवरराइड सिर्फ़ लाइट मोड पर लागू होता है — जब दोनों मोड बदलने हों तो डार्क ब्लॉक भी घोषित करें।

theme.css साइट की Tailwind एंट्री में इनलाइन कर दी जाती है, इसलिए इसमें Tailwind डायरेक्टिव भी काम करते हैं। मोनोरेपो के लिए जानने योग्य डायरेक्टिव @source है: Blume यूटिलिटी क्लासेस के लिए आपके प्रोजेक्ट को स्कैन करता है, और जो पेज किसी सहोदर वर्कस्पेस पैकेज से कंपोनेंट्स इम्पोर्ट करता है, उसके लिए उस पैकेज को भी स्कैन किया जाना ज़रूरी है। उसकी ओर theme.css के सापेक्ष इंगित करें — मानक Tailwind नियम — और Blume उस पाथ को जनरेट की गई शीट में ले जाता है:

@source "../../packages/ui/src";

डिज़ाइन टोकन

चयनित सूची से बाहर का कोई फ़ॉन्ट इस्तेमाल करने के लिए, या सिस्टम स्टैक पर वापस लौटने के लिए, किसी --blume-font-* टोकन को कोई भी फ़ॉन्ट स्टैक सेट करें:

:root {
  --blume-font-body: ui-sans-serif, system-ui, sans-serif;
}

Tailwind यूटिलिटीज़

Blume की थीम आंतरिक रूप से Tailwind v4 के साथ बनी है, और आपके प्रोजेक्ट की .astro, .jsx, .mdx, .ts, और .tsx फ़ाइलें भी स्कैन की जाती हैं — इसलिए आप कस्टम कंपोनेंट्स और पेजों को यूटिलिटी क्लासेस से स्टाइल कर सकते हैं, किसी Tailwind सेटअप की ज़रूरत नहीं। हर टोकन एक यूटिलिटी के रूप में उपलब्ध है, इसलिए आपके कंपोनेंट स्वतः थीम के अनुरूप चलते हैं:

कैस्केड क्रम

स्टाइल तीन लेयर में रिज़ॉल्व होते हैं, हर लेयर पिछली को ओवरराइड करती है: