用途:为单一代码库支撑多个品牌店铺前台,实现换肤、深色模式与白标多租户主题覆盖。
主要能力:按平台选择方案。Shopify 用主题编辑器配色方案,并编辑 config/settings_schema.json 与 assets/base.css 添加自定义 CSS 变量;WooCommerce 用 WordPress 5.9+ 区块主题的 theme.json 设计令牌,经典主题在“外观→自定义→额外 CSS”中定义变量;BigCommerce 在 Storefront→My Themes→Customize 配置,Cornerstone 通过 config.json 与 SCSS 变量暴露颜色、字体、间距;自定义/无头方案采用全局→语义→组件三层 CSS 自定义属性,可由 JSON 经 Style Dictionary 编译。
使用方式:组件只消费语义令牌(如 --color-brand-primary),不硬编码颜色;深色模式用 prefers-color-scheme 与 data-theme 覆盖,并在 head 内同步脚本防止闪烁;多租户白标在服务端注入租户 CSS 覆盖,且需对令牌值做净化,仅允许十六进制颜色、px/rem/em/% 长度与字体名,防止 CSS 注入。
适用场景:多品牌平台、深色模式、全局换色、设计系统交接。
限制:各平台具体配置步骤与代码示例以原文为准;未提供收费、价格与效果数据。