Theme Controller — sgcHTML | eSeGeCe

Theme Controller

TsgcHTMLThemeController / TsgcHTMLThemeBuilder — gérez les thèmes clair, sombre et système sur toutes les pages et générez des blocs de variables CSS Bootstrap pour les couleurs de marque personnalisées.

En un coup d'œil

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController sélectionne un thème de page (ptDefault, ptDark ou ptDarkPro) et génère le CSS correspondant à injecter dans l'en-tête de la page. TsgcHTMLThemeBuilder génère un bloc <style> qui remplace les variables CSS Bootstrap par les couleurs de votre marque.

Classes du composant

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Rôle

Thèmes clair/sombre & CSS personnalisé

Famille

Infrastructure & Moteur

Langages

Delphi, C++ Builder, .NET

Démarrage rapide

Changer de thème, injecter des couleurs personnalisées

Utilisez TsgcHTMLThemeController pour choisir un thème de page et émettre son CSS avec GetCSS. Utilisez TsgcHTMLThemeBuilder pour émettre un bloc de variables CSS personnalisées pour les couleurs de votre marque.

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

Référence

Propriétés et méthodes clés

Les membres les plus fréquemment utilisés.

TsgcHTMLThemeController.Theme

Sélectionne le thème de la page : ptDefault, ptDark ou ptDarkPro.

TsgcHTMLThemeController.CustomCSS

CSS supplémentaire ajouté au CSS de thème généré pour des ajustements propres à l'application.

GetCSS / GetSharedCSS

GetCSS retourne le CSS partagé des composants, plus le CSS du thème sélectionné, plus votre CustomCSS, prêt à injecter dans <head>. La méthode de classe GetSharedCSS retourne uniquement le CSS partagé des composants.

TsgcHTMLThemeBuilder.PrimaryColor

Remplace la variable CSS Bootstrap --bs-primary par la couleur de votre marque.

TsgcHTMLThemeBuilder.Mode

Mode de palette : tmLight, tmDark ou tmSystem (le mode système suit la préférence du système d'exploitation via une media query).

TsgcHTMLThemeBuilder.GetHTML

Retourne un bloc <style> construit à partir des propriétés de couleur, plus un script de synchronisation avec la préférence du système d'exploitation lorsque Mode vaut tmSystem.

Ressources

Continuer à explorer

	Aide en ligneRéférence API complète et guide d'utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète de 60+ composants.	Ouvrir
	Télécharger l'essai gratuitL'essai de 30 jours inclut les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir