主题控制器
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — 管理所有页面的明亮、暗黑和系统主题,并为自定义品牌颜色生成 Bootstrap CSS 变量块。
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — 管理所有页面的明亮、暗黑和系统主题,并为自定义品牌颜色生成 Bootstrap CSS 变量块。
TsgcHTMLThemeController 选择页面主题(ptDefault、ptDark 或 ptDarkPro),并生成相应的 CSS 以注入到页面头部。TsgcHTMLThemeBuilder 生成一个 <style> 块,用您的品牌颜色覆盖 Bootstrap CSS 变量。
TsgcHTMLThemeController, TsgcHTMLThemeBuilder
明/暗主题切换 & 自定义 CSS
Delphi, C++ Builder, .NET
使用 TsgcHTMLThemeController 选择页面主题,并用 GetCSS 输出其 CSS。使用 TsgcHTMLThemeBuilder 为您的品牌颜色输出自定义 CSS 变量块。
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();
最常用的成员。
选择页面主题:ptDefault、ptDark 或 ptDarkPro。
追加到生成的主题 CSS 之后的额外 CSS,用于应用级微调。
GetCSS 返回共享组件 CSS 加上所选主题 CSS 再加上您的 CustomCSS,可直接注入到 <head> 中。类方法 GetSharedCSS 仅返回共享组件 CSS。
用您的品牌颜色覆盖 Bootstrap 的 --bs-primary CSS 变量。
配色模式:tmLight、tmDark 或 tmSystem(系统模式通过媒体查询跟随操作系统偏好)。
返回一个根据颜色属性构建的 <style> 块;当 Mode 为 tmSystem 时,还会附加一个跟随操作系统偏好的同步脚本。