Theme Controller
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — verwalten Hell-, Dunkel- und System-Themen über alle Seiten hinweg und generieren Bootstrap-CSS-Variablenblöcke für benutzerdefinierte Markenfarben.
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — verwalten Hell-, Dunkel- und System-Themen über alle Seiten hinweg und generieren Bootstrap-CSS-Variablenblöcke für benutzerdefinierte Markenfarben.
TsgcHTMLThemeController wählt ein Seiten-Thema (ptDefault, ptDark oder ptDarkPro) und erzeugt das passende CSS, das in den Seitenkopf eingefügt wird. TsgcHTMLThemeBuilder generiert einen <style>-Block, der Bootstrap-CSS-Variablen mit Ihren Markenfarben überschreibt.
TsgcHTMLThemeController, TsgcHTMLThemeBuilder
Hell/Dunkel-Theming & benutzerdefiniertes CSS
Delphi, C++ Builder, .NET
Verwenden Sie TsgcHTMLThemeController, um ein Seiten-Thema auszuwählen und dessen CSS mit GetCSS auszugeben. Verwenden Sie TsgcHTMLThemeBuilder, um einen benutzerdefinierten CSS-Variablenblock für Ihre Markenfarben auszugeben.
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();Die am häufigsten verwendeten Members.
Wählt das Seiten-Thema: ptDefault, ptDark oder ptDarkPro.
Zusätzliches CSS, das dem generierten Thema-CSS für app-spezifische Anpassungen angehängt wird.
GetCSS gibt das gemeinsame Komponenten-CSS plus das ausgewählte Thema-CSS plus Ihr CustomCSS zurück, bereit zum Einfügen in <head>. Die Klassenmethode GetSharedCSS gibt nur das gemeinsame Komponenten-CSS zurück.
Überschreibt Bootstraps --bs-primary-CSS-Variable mit Ihrer Markenfarbe.
Paletten-Modus: tmLight, tmDark oder tmSystem (System folgt der Betriebssystem-Einstellung über eine Media Query).
Gibt einen <style>-Block zurück, der aus den Farbeigenschaften erstellt wird, plus ein Skript zur Synchronisierung der Betriebssystem-Einstellung, wenn Mode auf tmSystem gesetzt ist.
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuche die vollständige Feature-Matrix mit 60+ Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseEinzel-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |