如何在TMS Web Core中修改ToggleButton两侧颜色实现明暗模式？

一、自定义ToggleButton的明暗模式样式 #

TMS Web Core的ToggleButton基于Web组件，可通过CSS自定义两侧（背景和滑块）的颜色。将以下CSS代码添加到项目的样式文件中，或在Form的创建事件中注入：

/* 明模式下的ToggleButton样式 */
.light-mode .ttogglebutton .ttogglebutton-background {
  background-color: #f5f5f5; /* 明模式背景色，可自行调整 */
}
.light-mode .ttogglebutton .ttogglebutton-slider {
  background-color: #ffffff; /* 明模式滑块色，可自行调整 */
}

/* 暗模式下的ToggleButton样式 */
.dark-mode .ttogglebutton .ttogglebutton-background {
  background-color: #2d2d2d; /* 暗模式背景色，可自行调整 */
}
.dark-mode .ttogglebutton .ttogglebutton-slider {
  background-color: #4a4a4a; /* 暗模式滑块色，可自行调整 */
}

如果不确定元素类名，可通过浏览器开发者工具检查ToggleButton对应的HTML元素，调整CSS选择器即可。

二、实现明暗模式切换逻辑 #

在ToggleButton的OnClick事件中编写切换逻辑，通过给页面body添加/移除模式类来切换样式：

procedure TForm1.WebToggleButton1Click(Sender: TObject);
begin
  if WebToggleButton1.State then
  begin
    // 切换至暗模式
    document.body.classList.Add('dark-mode');
    document.body.classList.Remove('light-mode');
    // 可选：保存模式到本地存储，下次打开自动恢复
    // localStorage.setItem('theme', 'dark');
  end
  else
  begin
    // 切换至明模式
    document.body.classList.Add('light-mode');
    document.body.classList.Remove('dark-mode');
    // 可选：保存模式到本地存储
    // localStorage.setItem('theme', 'light');
  end;
end;

三、初始化默认模式 #

在Form的OnCreate事件中设置初始模式，也可读取本地存储的历史设置：

procedure TForm1.WebFormCreate(Sender: TObject);
var
  SavedTheme: string;
begin
  SavedTheme := localStorage.getItem('theme');
  if SavedTheme = 'dark' then
  begin
    WebToggleButton1.State := True;
    document.body.classList.Add('dark-mode');
  end
  else
  begin
    WebToggleButton1.State := False;
    document.body.classList.Add('light-mode');
  end;
end;

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