テーマコントローラー
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — すべてのページにわたるライト、ダーク、システムテーマを管理し、カスタムブランドカラー向けのBootstrap CSS変数ブロックを生成します。
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — すべてのページにわたるライト、ダーク、システムテーマを管理し、カスタムブランドカラー向けのBootstrap CSS変数ブロックを生成します。
TsgcHTMLThemeController はページテーマ（ptDefault、ptDark、または ptDarkPro）を選択し、ページのヘッドに注入する対応する CSS を生成します。TsgcHTMLThemeBuilder はBootstrap CSS変数をブランドカラーで上書きする <style> ブロックを生成します。
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（tmSystem はメディアクエリを介して OS の設定に従います）。
カラープロパティから構築された <style> ブロックを返します。Mode が tmSystem の場合は、OS 設定と同期するスクリプトも含まれます。