定制样式#

本页以 Halo 商城版 2.27 内置模板的样式为基线。

#添加样式覆盖文件

在主题中创建 templates/shop/modules/custom-styles.html。内置商城页面会在基础资源之后引用它，因此只调整外观时，无需复制所有页面：

<style>
  :root {
    --shop-color-primary: #2563eb;
    --shop-color-primary-content: #fff;
    --shop-color-primary-light: #eff6ff;
    --shop-color-accent: #1d4ed8;
    --shop-container-max: 72rem;
    --shop-border-radius: 10px;
    --shop-sticky-offset: 88px;
  }
</style>

也可以在该文件中引入独立 CSS，路径遵循主题静态资源规则：

<link rel="stylesheet" th:href="@{/assets/css/shop.css}" />

如果你覆盖了完整页面，需要在自定义页面中保留 shop/modules/custom-styles 的引用，或者从自己的样式入口引入这些规则。

#常用变量

完整变量见匹配版本源码中的 ui/src/styles/_vars.scss，模块样式位于 ui/src/styles/。

#避免样式冲突

商城组件没有 Shadow DOM 隔离。主题中针对 button、input、table、img 的全局规则会影响商城，应在实际页面检查。

需要精确覆盖时，使用 .shop-entry 或商城组件标签限定范围。例如：

.shop-entry .shop-product-card__image img {
  object-fit: contain;
}

结构类名会随模板版本变化，升级时需要复查。不要依赖生成的 Svelte 类名，也不要给所有按钮或输入框增加全站覆盖规则。

#暗色模式与窄屏

内置变量以浅色为基线。支持暗色模式的主题应在自己的暗色选择器下同时调整背景、文字、灰阶、边框和状态色；只改变背景可能导致文字或表单不可读。

针对固定头部调整 --shop-sticky-offset，并在窄屏检查：商品图库、规格按钮、购物车数量输入、地址表单、支付二维码、订单金额和长卡密均可正常查看。避免通过固定宽度限制整个结算区域。