Theme Controller

De un vistazo

TsgcHTMLThemeController & TsgcHTMLThemeBuilder

TsgcHTMLThemeController selecciona un tema de página (ptDefault, ptDark o ptDarkPro) y genera el CSS correspondiente para inyectar en el encabezado de la página. TsgcHTMLThemeBuilder genera un bloque <style> que anula las variables CSS de Bootstrap con los colores de tu marca.

Clases del componente

TsgcHTMLThemeController, TsgcHTMLThemeBuilder

Rol

Temas claro/oscuro y CSS personalizado

Familia

Infraestructura y motor

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Cambiar temas, inyectar colores personalizados

Usa TsgcHTMLThemeController para elegir un tema de página y emitir su CSS con GetCSS. Usa TsgcHTMLThemeBuilder para emitir un bloque de variables CSS personalizado para los colores de tu 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();

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

TsgcHTMLThemeController.Theme

Selecciona el tema de la página: ptDefault, ptDark o ptDarkPro.

TsgcHTMLThemeController.CustomCSS

CSS adicional que se añade al CSS del tema generado para ajustes específicos de cada aplicación.

GetCSS / GetSharedCSS

GetCSS devuelve el CSS compartido del componente más el CSS del tema seleccionado más tu CustomCSS, listo para inyectar en <head>. El método de clase GetSharedCSS devuelve solo el CSS compartido del componente.

TsgcHTMLThemeBuilder.PrimaryColor

Anula la variable CSS --bs-primary de Bootstrap con el color de tu marca.

TsgcHTMLThemeBuilder.Mode

Modo de paleta: tmLight, tmDark o tmSystem (el sistema sigue la preferencia del sistema operativo mediante una media query).

TsgcHTMLThemeBuilder.GetHTML

Devuelve un bloque <style> construido a partir de las propiedades de color, más un script de sincronización con la preferencia del sistema operativo cuando Mode es tmSystem.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir