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

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

पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

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 ढाँचे में रखें।

एक पंक्ति में लागू करना

// एक सीड से पूरी पैलेट (लाइट)
Styles.setColorScheme(0xFF0173ED);

// वही पहचान, डार्क मोड
Styles.setColorScheme(0xFF6750A4, ThemeMode.DARK);

इसके बाद, Skin के माध्यम से बनाए गए सभी कॉम्पोनेंट उस पैलेट का स्वचालित रूप से उपयोग करते हैं।

ColorScheme बनाने के तरीके

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);

सिमेंटिक भूमिकाएँ (इरादे से उपयोग करें, रंग से नहीं)

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

पैलेट का वैरिएंट बदलना

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() से पढ़ें।

यह भी देखें

• लाइट/डार्क मोड · कॉम्पोनेंट स्टाइल करना · Skins