用途：定制 SGDS（Singapore Government Design System）应用的整体视觉主题，包括产品品牌色、日/夜模式和字体。核心手段是覆盖 SGDS 的 CSS token，而非改动组件标记。
主要能力：一是产品品牌色定制，默认产品色为紫色，通过覆盖 --sgds-product-primary-100 至 900 的完整色阶，可一次性重设所有使用主色的 UI 元素；由于语义 token（--sgds-primary-）引用这些原始 token，改动会自动向下传递。二是 GovTech 品牌色，GovTech 产品应使用 themes/gt/ 下的预设色板（blue、cyan、magenta、pink、purple、red），每个产品只能选一种，不允许混用多个色板。各 GT 文件在 :root 中定义 --gt-color-100 至 900，需在自定义 CSS 中映射到 --sgds-product-primary-。三是日夜模式，日间为默认模式，只需导入 themes/day.css；夜间为可选，需同时导入 themes/night.css 并在 <html> 上添加 sgds-night-theme 类，可通过 JavaScript 切换。夜间样式将同一语义 token 重定义于 :root.sgds-night-theme 作用域下，切换类名即可整体换肤。四是字体，默认使用 Inter，通过覆盖 --sgds-font-family-brand 更换字体。
使用方式：自定义 CSS 必须导入在 themes/day.css 之后，否则覆盖会被覆盖掉；GT 色板文件须位于 day.css 之后、自定义映射 CSS 之前，以确保 --gt-color-* 变量已定义。示例导入顺序：@import "@govtechsg/sgds-web-component/themes/day.css"; @import "@govtechsg/sgds-web-component/themes/gt/blue.css"; @import "./yourCustomCss.css"; 夜间模式另加 themes/night.css，并在 <html> 上加 sgds-night-theme 类。JS 切换：document.documentElement.classList.toggle("sgds-night-theme");
适用场景：需要为 SGDS 应用统一换肤、接入 GovTech 指定配色、支持深色模式或更换品牌字体的前端项目。
限制：品牌色覆盖应针对原始 token（--sgds-product-primary-{100–900}），不要直接覆盖单个语义 token；夜间模式必须同时满足导入和类名两个条件，只做其一无效；日间模式无需额外类名；自定义字体需自行通过 <link> 或 @font-face 加载，SGDS 不会自动加载；自定义覆盖作用于 :root，因此同时影响日间和夜间模式。完整导入顺序可参考 sgds-getting-started。