Theme Controller — sgcHTML | eSeGeCe

Theme Controller

TsgcHTMLThemeController / TsgcHTMLThemeBuilder — gerenciam temas claro, escuro e do sistema em todas as páginas e geram blocos de variáveis CSS Bootstrap para cores de marca personalizadas.

Visão geral

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController seleciona um tema de página (ptDefault, ptDark ou ptDarkPro) e gera o CSS correspondente para injetar no cabeçalho da página. TsgcHTMLThemeBuilder gera um bloco <style> que substitui as variáveis CSS do Bootstrap pelas cores da sua marca.

Classes do componente

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Função

Tematização light/dark & CSS personalizado

Família

Infraestrutura & Motor

Linguagens

Delphi, C++ Builder, .NET

Início rápido

Alterne temas e injete cores personalizadas

Use TsgcHTMLThemeController para escolher um tema de página e emitir seu CSS com GetCSS. Use TsgcHTMLThemeBuilder para emitir um bloco de variáveis CSS personalizado para as cores da sua marca.

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();

Referência

Propriedades e métodos principais

Os membros usados com mais frequência.

TsgcHTMLThemeController.Theme

Seleciona o tema da página: ptDefault, ptDark ou ptDarkPro.

TsgcHTMLThemeController.CustomCSS

CSS extra anexado ao CSS de tema gerado para ajustes específicos de cada aplicação.

GetCSS / GetSharedCSS

GetCSS retorna o CSS compartilhado dos componentes mais o CSS do tema selecionado mais o seu CustomCSS, pronto para injetar no <head>. O método de classe GetSharedCSS retorna apenas o CSS compartilhado dos componentes.

TsgcHTMLThemeBuilder.PrimaryColor

Substitui a variável CSS --bs-primary do Bootstrap pela cor da sua marca.

TsgcHTMLThemeBuilder.Mode

Modo de paleta: tmLight, tmDark ou tmSystem (o modo sistema segue a preferência do SO por meio de uma media query).

TsgcHTMLThemeBuilder.GetHTML

Retorna um bloco <style> construído a partir das propriedades de cor, mais um script de sincronização com a preferência do SO quando Mode é tmSystem.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os componentes sgcHTMLNavegue pela matriz completa de 60+ componentes.	Abrir
	Baixar versão de avaliação gratuitaA versão de avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir