How do I dynamically load a CSS file in a TMS WEB Core Website using Delphi?

55 views Asked by At

What's the best way to dynamically insert CSS files into my TMS WEB Core website using Delphi?

I want to load a certain CSS file depending on the theme (dark/light). So whenever the website opens, then it needs to dynamically load the correct CSS file.

How can this be achieved?

1

There are 1 answers

2
Shaun Roselt On

The TApplication class has an InsertCSS and RemoveCSS function that can be used for this.

So as an example, let's say I want to dynamically load Bootstrap into my application with a button click, I could do this:

procedure TfrmMain.WebButton1Click(Sender: TObject);
begin
  Application.InsertCSS('MyCSS', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');
end;

You could also do this directly in the .dpr file such as:

program TestApp;

{$R *.dres}

uses
  Vcl.Forms,
  WEBLib.Forms,
  uIndex in 'uIndex.pas' {frmMain: TWebForm} {*.html};

{$R *.res}

begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  Application.CreateForm(TfrmMain, frmMain);

  Application.InsertCSS('MyCSS', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css');

  Application.Run;
end.

Running the above examples would insert the following line of code into the <head> tag on your page:

<link id="MyCSS" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">