テーマコントローラー

TsgcHTMLThemeController / TsgcHTMLThemeBuilder — すべてのページにわたるライト、ダーク、システムテーマを管理し、カスタムブランドカラー向けのBootstrap CSS変数ブロックを生成します。

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController はクッキーまたはクエリパラメータを読み取り、有効にするBootstrapテーマを決定して、必要な初期化スクリプトを注入します。TsgcHTMLThemeBuilder はBootstrap CSS変数をブランドカラーで上書きする <style> ブロックを生成します。

コンポーネントクラス

TsgcHTMLThemeControllerTsgcHTMLThemeBuilder

役割

ライト/ダークテーマ管理 & カスタム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();

主要なプロパティとメソッド

最もよく使うメンバーです。

TsgcHTMLThemeController.CookieName

ユーザーのテーマ設定(htLight / htDark / htSystem)を保存するクッキーの名前です。

TsgcHTMLThemeController.DefaultTheme

クッキーまたはクエリパラメータが存在しない場合のフォールバックテーマです。

GetThemeScript

リクエスト(クッキーまたは ?theme= パラメータ)からアクティブなテーマを読み取り、<head> に注入するBootstrapテーマ初期化スクリプトを返します。

TsgcHTMLThemeBuilder.PrimaryColor

Bootstrapの --bs-primary CSS変数をブランドカラーで上書きします。

TsgcHTMLThemeBuilder.CustomVars

生成された <style> ブロックに追加される生のCSSカスタムプロパティ宣言で、Bootstrap またはアプリレベルの任意の変数に使用できます。

TsgcHTMLThemeBuilder.Build

:root のオーバーライドを含む <style> ブロックを返します。TsgcHTMLTemplate_Bootstrap.HeadContent に代入してください。

さらに探索する

オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。
すべての sgcHTML コンポーネント60以上のコンポーネントの完全な機能マトリックスをご覧ください。
無料トライアルをダウンロード30日間のトライアルには60.HTMLデモプロジェクトが含まれています。
価格完全なソースコード付きのシングル、チーム、サイトライセンス。

始める準備はできましたか?

無料トライアルをダウンロードして、Delphi、C++ Builder、.NETでWebUIの構築を開始しましょう。