# हल्का/गहरा मोड

> UI को फिर से बनाए बिना रीयल-टाइम में थीम बदलें — setDarkMode + onRestyle/styled/restyle।

Source: https://crossfly.dev/hi/docs/ui/theming/dark-mode — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# हल्का/गहरा मोड

CrossFly हल्के और गहरे के बीच **रीयल-टाइम में और यथास्थान** बदलता है — स्क्रीन फिर से बनाए बिना। कुंजी है
`Styles.setDarkMode(...)`, उन स्टाइल्स के साथ मिलकर जो थीम से **फिर से हल हो जाते हैं**।

## पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles, ThemeMode, LabelRole

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // बेस पैलेट (लाइट/डार्क का अनुसरण करती है)
      setLayout(new VerticalLayout());

      // styled(...) हर थीम बदलाव पर स्टाइल पुनर्मूल्यांकित करता है (मोड अनुसार स्वतः re-skin)
      Label titulo = new Label("Bem-vindo")
         .styled(() -> Styles.theme().label(LabelRole.TITLE));
      add(LAY_AUTO, titulo);

      // Switch मोड बदलता है; setDarkMode खुद खुली पूरी UI को फिर से सजाता है।
      Switch alternar = new Switch("Modo escuro");
      alternar.onAction(c -> Styles.setDarkMode(alternar.isChecked()));
      add(LAY_AUTO, alternar);
   }
}
```
> नीचे दिए गए स्निपेट **सिर्फ़ मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर वाले `MainWindow` कंकाल में रखें।

## स्वचालित तरीका (अनुशंसित)
1. स्टाइल्स में **थीम के `PalColor`** का उपयोग करें (`Styles.textColor`, `cs.surface`) — वे स्वयं फिर से हल हो जाते हैं।
2. `setDarkMode(...)` कॉल करें:
```java
Styles.toggleDarkMode();              // लाइट ↔ डार्क बदलता है
Styles.setDarkMode(true);             // डार्क बाध्य करता है
boolean escuro = Styles.isDarkMode(); // वर्तमान स्थिति
```
`setDarkMode(...)` पहले से ही **सभी खुली खिड़कियों में थीम को स्वचालित रूप से फिर से लागू करता है** (आंतरिक रूप से
`restyleAll()` को ट्रिगर करता है), इसलिए `PalColor` से जुड़े स्टाइल बिना किसी अतिरिक्त कोड के रंग बदलते हैं।

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

// स्टाइल से परे तर्क के लिए (आइकन glyph बदलना, चार्ट रंग, आदि):
Label l = new Label("Status");
l.onRestyle(() -> l.style(Styles.isDarkMode() ? estiloEscuro : estiloClaro));
```

## किसी उप-वृक्ष (subtree) का मैन्युअल री-स्किन
यदि आपने थीम को गैर-वैश्विक तरीके से बदला (उदा.: केवल एक पैनल), तो पुनः लागू करने के लिए बाध्य करें:
```java
window.restyle();   // पेड़ के सभी onRestyle फिर से चलाता है और repaint करता है, बिना कॉम्पोनेंट पुनः बनाए
```

## पूरा प्रवाह
```java
Switch alternar = new Switch("Modo escuro");
alternar.onAction(c -> Styles.setDarkMode(alternar.isChecked()));  // पूरी UI साथ चलती है
```

## सर्वोत्तम अभ्यास
- स्थिर रंगों की तुलना में **थीम के `PalColor`** को प्राथमिकता दें — गहरा मोड स्वचालित हो जाता है।
- मोड के अनुसार संरचना बदलने वाले स्टाइल्स के लिए **`styled(...)`** का उपयोग करें (`onRestyle` से अधिक संक्षिप्त)।
- स्टाइल्स **बनाते** समय मोड को `Styles.isDarkMode()` / `Styles.themeMode()` से पढ़ें।

## आम गलतियाँ
- स्थिर रंग (`0xFF...`) रखना और फिर गहरे मोड के लिए स्क्रीन को हाथ से फिर से बनाना पड़ना।
- थीम बदलते समय पूरी UI को फिर से बनाना — `restyle()`/`styled(...)` का उपयोग करें और कॉम्पोनेंट्स को फिर से इस्तेमाल करें।

## यह भी देखें
- [रंग योजनाएँ](/docs/ui/theming/color-schemes) · [कॉम्पोनेंट स्टाइल करना](/docs/ui/theming/styling-components) · [Skins](/docs/ui/theming/skins)