Theme Controller
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — manage light, dark and system themes across all pages and generate Bootstrap CSS variable blocks for custom brand colours.
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — manage light, dark and system themes across all pages and generate Bootstrap CSS variable blocks for custom brand colours.
TsgcHTMLThemeController selects a page theme (ptDefault, ptDark or ptDarkPro) and generates the matching CSS to inject into the page head. TsgcHTMLThemeBuilder generates a <style> block that overrides Bootstrap CSS variables with your brand colours.
TsgcHTMLThemeController, TsgcHTMLThemeBuilder
Light/dark theming & custom CSS
Delphi, C++ Builder, .NET
Use TsgcHTMLThemeController to pick a page theme and emit its CSS with GetCSS. Use TsgcHTMLThemeBuilder to emit a custom CSS variable block for your brand colours.
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();The members you reach for most often.
Selects the page theme: ptDefault, ptDark or ptDarkPro.
Extra CSS appended to the generated theme CSS for per-app tweaks.
GetCSS returns the shared component CSS plus the selected theme CSS plus your CustomCSS, ready to inject into <head>. The class method GetSharedCSS returns just the shared component CSS.
Overrides Bootstrap's --bs-primary CSS variable with your brand colour.
Palette mode: tmLight, tmDark or tmSystem (system follows the OS preference via a media query).
Returns a <style> block built from the colour properties, plus an OS-preference sync script when Mode is tmSystem.
| Online HelpFull API reference and usage guide for this component. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |