Theme Controller — sgcHTML | eSeGeCe

Theme Controller

TsgcHTMLThemeController / TsgcHTMLThemeBuilder — gestisce i temi light, dark e di sistema su tutte le pagine e genera blocchi di variabili CSS Bootstrap per i colori del brand personalizzati.

In sintesi

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController seleziona un tema di pagina (ptDefault, ptDark o ptDarkPro) e genera il CSS corrispondente da inserire nell'head della pagina. TsgcHTMLThemeBuilder genera un blocco <style> che sovrascrive le variabili CSS di Bootstrap con i colori del tuo brand.

Classi del componente

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Ruolo

Tematizzazione light/dark & CSS personalizzato

Famiglia

Infrastruttura & Engine

Linguaggi

Delphi, C++ Builder, .NET

Avvio rapido

Cambia tema, inserisci colori personalizzati

Usa TsgcHTMLThemeController per scegliere un tema di pagina ed emettere il suo CSS con GetCSS. Usa TsgcHTMLThemeBuilder per emettere un blocco di variabili CSS personalizzato per i colori del tuo brand.

uses
  sgcHTML_Component, sgcHTML_ThemeBuilder, sgcHTML_Template_Bootstrap;

// 1) Pick a page theme and inject its CSS into the head:
var
  oTheme: TsgcHTMLThemeController;
begin
  oTheme := TsgcHTMLThemeController.Create(nil);
  try
    oTheme.Theme     := ptDark;   // ptDefault / ptDark / ptDarkPro
    oTheme.CustomCSS := '.navbar{border-bottom:2px solid #7C3AED;}';
    // GetCSS = shared component CSS + theme CSS + your CustomCSS:
    oTemplate.ThemeCSS := oTheme.GetCSS;
  finally
    oTheme.Free;
  end;
end;

// 2) Override Bootstrap CSS variables with your brand colours:
var
  oBuilder: TsgcHTMLThemeBuilder;
begin
  oBuilder := TsgcHTMLThemeBuilder.Create(nil);
  try
    oBuilder.PrimaryColor   := '#7C3AED';
    oBuilder.SecondaryColor := '#1E293B';
    // GetHTML returns a <style> block (+ sync script for tmSystem):
    oTemplate.CustomHead := oTemplate.CustomHead + oBuilder.GetHTML;
  finally
    oBuilder.Free;
  end;
end;

TsgcHTMLThemeController *oTheme = new TsgcHTMLThemeController(NULL);
try
{
  oTheme->Theme    = ptDark;   // ptDefault / ptDark / ptDarkPro
  oTheme->CustomCSS = ".navbar{border-bottom:2px solid #7C3AED;}";
  oTemplate->ThemeCSS = oTheme->GetCSS();
}
__finally { delete oTheme; }

TsgcHTMLThemeBuilder *oBuilder = new TsgcHTMLThemeBuilder(NULL);
try
{
  oBuilder->PrimaryColor   = "#7C3AED";
  oBuilder->SecondaryColor = "#1E293B";
  oTemplate->CustomHead = oTemplate->CustomHead + oBuilder->GetHTML();
}
__finally { delete oBuilder; }

var themeCtrl = new TsgcHTMLThemeController();
themeCtrl.Theme     = TsgcHTMLPageTheme.ptDark;   // ptDefault / ptDark / ptDarkPro
themeCtrl.CustomCSS = ".navbar{border-bottom:2px solid #7C3AED;}";
template.ThemeCSS = themeCtrl.GetCSS();

var themeBuilder = new TsgcHTMLThemeBuilder();
themeBuilder.PrimaryColor   = "#7C3AED";
themeBuilder.SecondaryColor = "#1E293B";
template.CustomHead += themeBuilder.GetHTML();

Riferimento

Proprietà e metodi principali

I membri utilizzati più frequentemente.

TsgcHTMLThemeController.Theme

Seleziona il tema di pagina: ptDefault, ptDark o ptDarkPro.

TsgcHTMLThemeController.CustomCSS

CSS aggiuntivo accodato al CSS del tema generato per ritocchi specifici dell'app.

GetCSS / GetSharedCSS

GetCSS restituisce il CSS condiviso dei componenti più il CSS del tema selezionato più il tuo CustomCSS, pronto da inserire in <head>. Il metodo di classe GetSharedCSS restituisce solo il CSS condiviso dei componenti.

TsgcHTMLThemeBuilder.PrimaryColor

Sovrascrive la variabile CSS --bs-primary di Bootstrap con il colore del tuo brand.

TsgcHTMLThemeBuilder.Mode

Modalità della palette: tmLight, tmDark o tmSystem (il sistema segue la preferenza del sistema operativo tramite una media query).

TsgcHTMLThemeBuilder.GetHTML

Restituisce un blocco <style> costruito dalle proprietà dei colori, più uno script di sincronizzazione con la preferenza del sistema operativo quando Mode è tmSystem.

Risorse

Continua ad esplorare

	Guida in lineaRiferimento API completo e guida all'uso per questo componente.	Apri
	Tutti i componenti sgcHTMLSfoglia la matrice completa di 60+ componenti.	Apri
	Scarica la versione di prova gratuitaLa versione di prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri