# स्टाइल और थीम

> दिखावट का मॉडल — Skin संरचना है, Theme मोड-वार अर्थपूर्ण भूमिकाएँ हैं — और runtime पर थीम बदलना।

Source: https://crossfly.dev/hi/docs/concepts/styling-and-theming-model — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# स्टाइल और थीम

CrossFly में दिखावट स्वयं फ्रेमवर्क की एक स्मृति-सहायक में सिमट जाती है:

> **Skin = संरचना / रेंडरर · Theme = मोड-वार अर्थपूर्ण भूमिकाएँ।**

तीन अलग-अलग ज़िम्मेदारियाँ मिलकर काम करती हैं।

## 1. अवस्था-वार स्टाइल (default / focused / pressed)
हर `Component` के **तीन तक स्टाइल** हो सकते हैं और फ्रेमवर्क अंतःक्रिया के अनुसार हर frame में सही वाला चुनता है।
इसीलिए एक बटन दबाए जाने पर बिना आपके कुछ एनिमेट किए "धँस" जाता है।
```java
comp.style(normal).focusedStyle(focado).pressedStyle(apertado);
```

## 2. `Skin` — आकृति की फ़ैक्ट्री
`Skin` **संरचना** को परिभाषित करता है: कोने की त्रिज्याएँ, बॉर्डर की मोटाई, अंतराल, डिफ़ॉल्ट आइकन। `MaterialSkin`,
`IOSSkin`, `FlutterSkin` मौजूद हैं। एक कस्टम `Skin` **आकृति/अंतराल** को अधिरोहित करता है — रंग कभी नहीं। वैश्विक
`Skin` बदलना सभी कंपोनेंट को फिर से पहनाता है।

## 3. `Theme` + `ColorScheme` — अर्थपूर्ण भूमिकाएँ
**रंग** भूमिकाओं (PRIMARY, SURFACE, ON_SURFACE, ERROR, TITLE, HINT…) से आते हैं जो वर्तमान **हल्के/गहरे मोड** के
लिए हल किए जाते हैं, एक **बीज-रंग** से उत्पन्न `ColorScheme` से (Material You)।
```java
Styles.theme(0xFF6750A4, ThemeMode.DARK);   // एक कॉल सब कुछ को थीम देती है, dark mode में
```

## सबसे शक्तिशाली बिंदु: runtime पर UI को पुनः बनाए बिना थीम बदलना
यहाँ वह सूक्ष्मता है जो हल्के/गहरे मोड को मामूली बना देती है:

- स्टाइल के रंग "जमे हुए" मान नहीं हैं — वे **`PalColor`** हैं, पैलेट के **जीवंत** संदर्भ।
- एक **वैश्विक स्टाइल-संस्करण गणक** है (`styleVersion`)। जब कोई नई स्कीम लागू की जाती है / मोड बदला जाता है,
  फ्रेमवर्क **संस्करण बढ़ाता है** और सभी खुली विंडो में थीम फिर से लागू करता है — `PalColor` पर आधारित हर स्टाइल
  **अगले frame में अपने रंग फिर से हल कर लेता है**। कोई कंपोनेंट नष्ट होकर पुनः नहीं बनाया जाता।

इसके पूरक के रूप में, वे कंपोनेंट जिनका स्टाइल मोड-वार **आकृति बदलता** है, स्वयं को पुनः-स्टाइल करने का तरीका
पंजीकृत करते हैं (`onRestyle`/`styled`) और `restyle()` उप-वृक्ष को यथास्थान पुनः लागू करता है:
```java
Label titulo = new Label("Bem-vindo").styled(() -> Styles.theme().label(LabelRole.TITLE));
// ...मोड बदलने पर, framework इस provider का पुनर्मूल्यांकन करता है और Label को फिर से बनाए बिना पुनः स्टाइल करता है।
Styles.toggleDarkMode();
```

## यह आर्किटेक्चर क्यों
- **आकृति (Skin) को रंग (Theme) से अलग करना** आपको दृश्य पहचान और पैलेट को स्वतंत्र रूप से बदलने देता है — और
  Skin को छुए बिना हल्के/गहरे में ढालने देता है।
- **`PalColor` + संस्करण** "थीम बदलना" को "वृक्ष को पुनर्निर्माण करना" से "अगले frame में रंग फिर से हल करना" में
  बदल देता है — सस्ता और बिना झिलमिलाहट के।

## यह भी देखें
- लागू करें: [थीम और स्टाइल](/docs/ui/theming) · [हल्का/गहरा मोड](/docs/ui/theming/dark-mode)
- आगे: [जीवनचक्र](/docs/concepts/lifecycle)