如何在Delphi开发的TMS WEB Core网站中动态加载CSS文件？

核心思路 #

TMS WEB Core本质是基于WebAssembly运行的Web应用，动态加载CSS的最优方式是直接操作DOM，通过创建<link>元素插入页面<head>。结合浏览器主题偏好检测API或用户本地存储的设置，实现页面初始化时自动加载对应主题。

具体实现步骤 #

1. 编写主题加载函数

负责移除旧主题CSS、插入新样式链接，避免样式冲突：

procedure LoadTheme(const AThemeName: string);
var
  OldLink: TJSHTMLElement;
  NewLink: TJSHTMLElement;
begin
  // 移除已存在的主题样式链接（通过标记属性定位）
  OldLink := TJSHTMLElement(document.querySelector('link[data-theme="theme"]'));
  if Assigned(OldLink) then
    OldLink.remove;

  // 创建新的样式链接元素
  NewLink := TJSHTMLElement(document.createElement('link'));
  NewLink.setAttribute('rel', 'stylesheet');
  NewLink.setAttribute('type', 'text/css');
  NewLink.setAttribute('href', AThemeName + '.css'); // 对应light.css/dark.css文件
  NewLink.setAttribute('data-theme', 'theme'); // 标记为主题链接，方便后续管理
  document.head.appendChild(NewLink);
end;

2. 检测主题偏好并自动加载

优先读取用户本地保存的主题设置，无设置则检测系统深色/浅色偏好：

procedure DetectAndLoadTheme;
var
  SavedTheme: string;
  DarkModeQuery: TJSMediaQueryList;
begin
  // 优先使用用户本地存储的主题设置
  SavedTheme := localStorage.getItem('selected-theme');
  if SavedTheme <> '' then
  begin
    LoadTheme(SavedTheme);
    Exit;
  end;

  // 检测系统默认的主题偏好
  DarkModeQuery := window.matchMedia('(prefers-color-scheme: dark)');
  LoadTheme(IfThen(DarkModeQuery.matches, 'dark', 'light'));
end;

3. 初始化时触发加载

在窗体OnCreate事件中调用检测函数，实现页面打开自动加载主题：

procedure TMainForm.WebFormCreate(Sender: TObject);
begin
  DetectAndLoadTheme;
end;

可选：添加主题切换功能

允许用户手动切换主题并保存设置到本地存储：

procedure TMainForm.btnToggleThemeClick(Sender: TObject);
var
  CurrentTheme, NewTheme: string;
begin
  CurrentTheme := localStorage.getItem('selected-theme');
  NewTheme := IfThen(CurrentTheme = 'dark', 'light', 'dark');
  
  LoadTheme(NewTheme);
  localStorage.setItem('selected-theme', NewTheme);
end;

注意事项 #

• 确保主题CSS文件（如light.css、dark.css）放在项目wwwroot目录下，TMS WEB Core会自动打包到输出目录。
• 用data-theme属性标记主题链接，可精准定位并移除旧样式，避免多主题样式叠加冲突。
• window.matchMedia API兼容所有现代浏览器，无需担心兼容性问题。

内容的提问来源于stack exchange，提问作者Shaun Roselt