テーマコントローラー
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — すべてのページにわたるライト、ダーク、システムテーマを管理し、カスタムブランドカラー向けのBootstrap CSS変数ブロックを生成します。
TsgcHTMLThemeController / TsgcHTMLThemeBuilder — すべてのページにわたるライト、ダーク、システムテーマを管理し、カスタムブランドカラー向けのBootstrap CSS変数ブロックを生成します。
TsgcHTMLThemeController はクッキーまたはクエリパラメータを読み取り、有効にするBootstrapテーマを決定して、必要な初期化スクリプトを注入します。TsgcHTMLThemeBuilder はBootstrap CSS変数をブランドカラーで上書きする <style> ブロックを生成します。
TsgcHTMLThemeController、TsgcHTMLThemeBuilder
ライト/ダークテーマ管理 & カスタムCSS
Delphi、C++ Builder、.NET
TsgcHTMLThemeController を使用してクッキーまたはクエリパラメータを読み取り、正しいBootstrapテーマ属性を適用します。TsgcHTMLThemeBuilder を使用してブランドカラー用のカスタムCSS変数ブロックを出力します。
uses
sgcHTML_ThemeController;
// Detect theme from request cookie:
var
oTheme: TsgcHTMLThemeController;
begin
oTheme := TsgcHTMLThemeController.Create(nil);
try
oTheme.CookieName := 'app_theme';
oTheme.DefaultTheme := htSystem;
// Inject into the Bootstrap template:
oTemplate.HeadContent :=
oTemplate.HeadContent + oTheme.GetThemeScript(ARequest);
finally
oTheme.Free;
end;
end;
// Generate brand CSS variables:
var
oBuilder: TsgcHTMLThemeBuilder;
begin
oBuilder := TsgcHTMLThemeBuilder.Create(nil);
try
oBuilder.PrimaryColor := '#7C3AED';
oBuilder.SecondaryColor := '#1E293B';
oTemplate.HeadContent :=
oTemplate.HeadContent + oBuilder.Build;
finally
oBuilder.Free;
end;
end;
TsgcHTMLThemeController *oTheme = new TsgcHTMLThemeController(NULL);
try
{
oTheme->CookieName = "app_theme";
oTheme->DefaultTheme = htSystem;
oTemplate->HeadContent += oTheme->GetThemeScript(ARequest);
}
__finally { delete oTheme; }
TsgcHTMLThemeBuilder *oBuilder = new TsgcHTMLThemeBuilder(NULL);
try
{
oBuilder->PrimaryColor = "#7C3AED";
oTemplate->HeadContent += oBuilder->Build();
}
__finally { delete oBuilder; }
var themeCtrl = new TsgcHTMLThemeController();
themeCtrl.CookieName = "app_theme";
themeCtrl.DefaultTheme = TsgcHTMLTheme.htSystem;
template.HeadContent += themeCtrl.GetThemeScript(request);
var themeBuilder = new TsgcHTMLThemeBuilder();
themeBuilder.PrimaryColor = "#7C3AED";
template.HeadContent += themeBuilder.Build();
最もよく使うメンバーです。
ユーザーのテーマ設定(htLight / htDark / htSystem)を保存するクッキーの名前です。
クッキーまたはクエリパラメータが存在しない場合のフォールバックテーマです。
リクエスト(クッキーまたは ?theme= パラメータ)からアクティブなテーマを読み取り、<head> に注入するBootstrapテーマ初期化スクリプトを返します。
Bootstrapの --bs-primary CSS変数をブランドカラーで上書きします。
生成された <style> ブロックに追加される生のCSSカスタムプロパティ宣言で、Bootstrap またはアプリレベルの任意の変数に使用できます。
:root のオーバーライドを含む <style> ブロックを返します。TsgcHTMLTemplate_Bootstrap.HeadContent に代入してください。