# रंग योजनाएँ

> ColorScheme — एक बीज-रंग से पूरे ऐप की पैलेट उत्पन्न करें (Material 3)।

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

# रंग योजनाएँ (`ColorScheme`)

एक `ColorScheme` Material 3 से प्रेरित एक **सिमेंटिक पैलेट** है: **एक बीज-रंग** से,
फ़्रेमवर्क सभी सुसंगत रंग (primary, surface, error, outline…) प्रकाश **और** अंधकार दोनों के लिए उत्पन्न करता है।

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

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles, ComponentStyle, ThemeMode
import dev.crossfly.ui.color.*;   // ColorScheme

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      // एक सीड-रंग से पूरी पैलेट (Material 3), डार्क मोड
      Styles.setColorScheme(0xFF6750A4, ThemeMode.DARK);

      setLayout(new VerticalLayout());

      // वैश्विक पैलेट पढ़ता है और सिमेंटिक भूमिकाओं द्वारा कार्ड स्टाइल करता है
      ColorScheme cs = Styles.colorScheme();
      Label card = new Label("Cartão temático");
      card.style(new ComponentStyle()
         .backColor(cs.surface)             // थीम की पृष्ठभूमि
         .textColor(cs.onSurface)           // थीम का टेक्स्ट
         .borderColor(cs.outline.color())   // हल्की बॉर्डर (int ARGB)
         .borderRadius(0.6f)
         .ingap(Gap.ofFont(0.8f)));
      add(LAY_AUTO, card);

      Button primario = new Button("Ação principal");
      primario.style(Styles.button()
         .backColor(cs.primary)             // primary भूमिका → मुख्य बटन
         .textColor(cs.onPrimary));
      add(LAY_AUTO, primario);
   }
}
```
> नीचे दिए गए स्निपेट **केवल मुख्य भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गए `MainWindow` ढाँचे में रखें।

## एक पंक्ति में लागू करना
```java
// एक सीड से पूरी पैलेट (लाइट)
Styles.setColorScheme(0xFF0173ED);

// वही पहचान, डार्क मोड
Styles.setColorScheme(0xFF6750A4, ThemeMode.DARK);
```
इसके बाद, **`Skin` के माध्यम से बनाए गए सभी कॉम्पोनेंट** उस पैलेट का स्वचालित रूप से उपयोग करते हैं।

## `ColorScheme` बनाने के तरीके
```java
ColorScheme.fromSeed(0xFF6750A4);              // 1 सीड → लाइट पैलेट
ColorScheme.fromSeed(0xFF6750A4, true);        // 1 सीड → डार्क पैलेट
ColorScheme.light(0xFF0066CC, 0xFF00AA44, 0xFFFF9900); // 3 ब्रांड रंग (primary/secondary/tertiary)
ColorScheme.materialPurple(false);             // तैयार presets
ColorScheme.iosBlue(false); ColorScheme.flutterTeal(false);
ColorScheme.forestGreen(false); ColorScheme.deepOrange(false); ColorScheme.oceanBlue(false);
```

## सिमेंटिक भूमिकाएँ (इरादे से उपयोग करें, रंग से नहीं)
| भूमिका | उपयोग करें |
|---|---|
| `primary` / `onPrimary` | मुख्य बटन, सक्रिय संकेतक / उन पर टेक्स्ट |
| `primaryContainer` / `onPrimaryContainer` | चयनित कार्ड, सक्रिय चिप्स |
| `secondary` / `tertiary` | द्वितीयक क्रियाएँ / हाइलाइट |
| `surface` / `onSurface` | स्क्रीन और कार्ड की पृष्ठभूमि / मुख्य टेक्स्ट |
| `surfaceVariant` / `onSurfaceVariant` | सूक्ष्म पृष्ठभूमि / उपशीर्षक, संकेत, अक्षम |
| `outline` / `outlineVariant` | बॉर्डर, विभाजक / सूक्ष्म बॉर्डर |
| `error` / `onError` | मान्यता, विनाशकारी क्रियाएँ / त्रुटि पर टेक्स्ट |

```java
ColorScheme cs = Styles.colorScheme();
card.style(new ComponentStyle()
   .backColor(cs.surface)          // थीम की पृष्ठभूमि
   .textColor(cs.onSurface)        // थीम का टेक्स्ट
   .borderColor(cs.outline.color()));
```

## पैलेट का वैरिएंट बदलना
```java
ColorScheme claro = ColorScheme.fromSeed(0xFF6750A4);
ColorScheme escuro = claro.toDark();        // वही पहचान, गहरे टोन
ColorScheme oposto = claro.toggleDarkLight();
```

## अच्छे तौर-तरीके
- बीज को बूटस्ट्रैप में **एक बार** परिभाषित करें; स्क्रीनों में, भूमिकाओं का उपयोग करें (`cs.primary`, `cs.surface`)।
- रंग को **इरादे** से चुनें (विनाशकारी के लिए `error`), RGB मान से नहीं।
- स्थैतिक आरंभीकरण के दौरान, `setColorSchemeSilent(...)` को प्राथमिकता दें (पुनःस्थापन ट्रिगर नहीं करता)।

## आम गलतियाँ
- `ColorScheme` की भूमिकाओं का उपयोग करने के बजाय UI में निश्चित `0xFF...` फैलाना (डार्क मोड तोड़ता है)।
- हर स्क्रीन पर `ColorScheme` को पुनः बनाना — यह ग्लोबल है; `Styles.colorScheme()` से पढ़ें।

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