Theme Controller
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(system은 미디어 쿼리를 통해 OS 설정을 따릅니다).
색상 속성으로부터 생성된 <style> 블록을 반환하며, Mode가 tmSystem일 때 OS 설정 동기화 스크립트를 추가합니다.