主题控制器 — sgcHTML | eSeGeCe

主题控制器

TsgcHTMLThemeController / TsgcHTMLThemeBuilder — 管理所有页面的明亮、暗黑和系统主题,并为自定义品牌颜色生成 Bootstrap CSS 变量块。

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController 选择页面主题(ptDefaultptDarkptDarkPro),并生成相应的 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();

关键属性和方法

最常用的成员。

TsgcHTMLThemeController.Theme

选择页面主题:ptDefaultptDarkptDarkPro

TsgcHTMLThemeController.CustomCSS

追加到生成的主题 CSS 之后的额外 CSS,用于应用级微调。

GetCSS / GetSharedCSS

GetCSS 返回共享组件 CSS 加上所选主题 CSS 再加上您的 CustomCSS,可直接注入到 <head> 中。类方法 GetSharedCSS 仅返回共享组件 CSS。

TsgcHTMLThemeBuilder.PrimaryColor

用您的品牌颜色覆盖 Bootstrap 的 --bs-primary CSS 变量。

TsgcHTMLThemeBuilder.Mode

配色模式:tmLighttmDarktmSystem(系统模式通过媒体查询跟随操作系统偏好)。

TsgcHTMLThemeBuilder.GetHTML

返回一个根据颜色属性构建的 <style> 块;当 ModetmSystem 时,还会附加一个跟随操作系统偏好的同步脚本。

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 60+ 组件的完整功能矩阵。
下载免费试用版30 天试用版包含 60.HTML 演示项目。
价格包含完整源代码的单用户、团队和站点许可证。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web UI。