5. शैलियाँ और थीम

आप क्या सीखेंगे: मान स्थिर किए बिना रूप देना और लाइव में लाइट/डार्क बदलना। पूर्वापेक्षाएँ: Layouts।

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

ऐप की थीम (बीज + skin) परिभाषित करता है, एक बटन को अवस्था के अनुसार शैली देता है और एक बटन जो लाइव में लाइट↔डार्क बदलता है — पूरी UI बिना मैन्युअल restyle के साथ चलती है। जैसा है वैसा ही compile होता है।

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;
import dev.crossfly.ui.skin.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // थीम: एक seed पूरा scheme उत्पन्न करता है; skin आकार परिभाषित करता है
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);
      Skin.set(new IOSSkin());

      Button botao = new Button("Salvar");
      botao.style(new ComponentStyle()
         .backColor(Styles.primaryColor)   // थीम का PalColor (light/dark का अनुसरण करता है)
         .textColor(0xFFFFFFFF)            // स्थिर int ARGB 0xAARRGGBB
         .borderRadius(0.6f)
         .pressable());                    // प्रेस फीडबैक सक्षम करता है
      add(LAY_AUTO, botao);

      Button botaoTema = new Button("Alternar claro/escuro");
      botaoTema.onAction(c -> Styles.toggleDarkMode());   // पूरी UI को खुद फिर से स्टाइल करता है
      add(LAY_AUTO, botaoTema);
   }
}

नीचे के अंश केवल मूल भाग दिखाते हैं (जो onShow() के भीतर जाता है)। चलाने के लिए, उन्हें ऊपर के MainWindow ढाँचे में रखें।

ComponentStyle और अवस्था के अनुसार शैलियाँ

हर कॉम्पोनेंट की तीन शैलियाँ हो सकती हैं, जो प्रति frame चुनी जाती हैं: default / focused / pressed।

botao.style(new ComponentStyle()
   .backColor(Styles.primaryColor)     // थीम का PalColor (light/dark का अनुसरण करता है)
   .textColor(0xFFFFFFFF)              // या स्थिर int ARGB 0xAARRGGBB
   .borderRadius(0.6f)
   .pressable());                      // प्रेस फीडबैक सक्षम करता है

Skin और रंग योजना

Skin आकार (Material/iOS/Flutter) परिभाषित करता है; ColorScheme एक बीज-रंग से पैलेट परिभाषित करता है:

Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // एक seed → पूरा scheme
Skin.set(new IOSSkin());                               // वैश्विक विज़ुअल पहचान बदलता है

runtime में लाइट↔डार्क बदलना (UI दोबारा बनाए बिना)

setDarkMode(...) सभी windows में थीम को स्वतः पुन:लागू करता है — यदि आपकी शैलियाँ थीम का PalColor (Styles.primaryColor, आदि) उपयोग करती हैं, तो रंग स्वयं बदल जाते हैं:

Button botaoTema = new Button("Modo escuro");
botaoTema.onAction(c -> Styles.toggleDarkMode());   // पूरी UI बिना मैनुअल restyle के अनुसरण करती है

उन शैलियों के लिए जो मोड के अनुसार आकार बदलती हैं, styled(...) के साथ पंजीकृत करें (देखें लाइट/डार्क मोड)।

इस चरण में क्या बनाया जाता है

ऐप की थीम (बीज + skin) + एक बटन जो लाइव में लाइट/डार्क बदलता है।

पुनरावलोकन

ComponentStyle (default/focused/pressed); ARGB रंग या थीम का PalColor; Skin = आकार, ColorScheme = पैलेट; toggleDarkMode() सब कुछ स्वयं दोबारा सज्जित करता है।

अगले कदम

→ इनपुट संभालना

यह भी देखें

• थीम और शैलियाँ (ui) · अवधारणा: शैलियाँ और थीम