Theme Controller

In één oogopslag

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController selecteert een paginathema (ptDefault, ptDark of ptDarkPro) en genereert de bijbehorende CSS om in de paginakop te injecteren. TsgcHTMLThemeBuilder genereert een <style>-blok dat Bootstrap CSS-variabelen overschrijft met uw merkkleuren.

Componentklassen

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Rol

Licht/donker thema's en aangepaste CSS

Familie

Infrastructuur & Engine

Talen

Delphi, C++ Builder, .NET

Snel starten

Wissel van thema, injecteer aangepaste kleuren

Gebruik TsgcHTMLThemeController om een paginathema te kiezen en de bijbehorende CSS uit te zenden met GetCSS. Gebruik TsgcHTMLThemeBuilder om een aangepast CSS-variabeleblok voor uw merkkleuren uit te zenden.

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

Referentie

Belangrijkste eigenschappen en methoden

De leden die u het vaakst gebruikt.

TsgcHTMLThemeController.Theme

Selecteert het paginathema: ptDefault, ptDark of ptDarkPro.

TsgcHTMLThemeController.CustomCSS

Extra CSS toegevoegd aan de gegenereerde thema-CSS voor aanpassingen per app.

GetCSS / GetSharedCSS

GetCSS retourneert de gedeelde component-CSS plus de geselecteerde thema-CSS plus uw CustomCSS, klaar om in <head> te injecteren. De klassemethode GetSharedCSS retourneert alleen de gedeelde component-CSS.

TsgcHTMLThemeBuilder.PrimaryColor

Overschrijft Bootstrap's --bs-primary CSS-variabele met uw merkkleur.

TsgcHTMLThemeBuilder.Mode

Paletmodus: tmLight, tmDark of tmSystem (systeem volgt de OS-voorkeur via een mediaquery).

TsgcHTMLThemeBuilder.GetHTML

Retourneert een <style>-blok opgebouwd uit de kleureigenschappen, plus een OS-voorkeur-synchronisatiescript wanneer Mode gelijk is aan tmSystem.

Bronnen

Blijf verkennen

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Open
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Open
	PrijzenEnkelvoudige, team- en sitelicenties met volledige broncode.	Open