自定义订阅表单小组件

默认情况下，订阅表单小组件使用适用于大多数页面的中性样式。添加嵌入代码后，您可以通过在 pushwoosh-subscribe-widget 元素上设置 CSS 自定义属性，使其与您网站的视觉形象相匹配。下表中的值将替换默认值。

自定义颜色

变量	描述	默认值
`--esw-primary-color`	按钮、链接和强调元素的主颜色	`#0E72E5`
`--esw-primary-hover`	主元素悬停颜色	`#1A85FF`
`--esw-text-color`	主文本颜色	`#4B5057`
`--esw-text-secondary`	次要文本（占位符、说明文字）	`#969CA3`
`--esw-background`	小组件背景	`#FFFFFF`
`--esw-surface-color`	表面颜色（悬停、次要背景）	`#F7F9FA`
`--esw-border-color`	边框颜色	`#DCE1E5`
`--esw-border-color-focus`	聚焦状态下的边框颜色	`#0E72E5`
`--esw-error-color`	错误颜色	`#E52E59`
`--esw-success-color`	成功颜色	`#479900`
`--esw-success-bg`	成功消息背景	`#F7F9FA`

排版

变量	描述	默认值
`--esw-font-family`	字体族	`Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
`--esw-font-size-base`	基础字体大小	`14px`
`--esw-font-size-title`	标题字体大小	`18px`
`--esw-font-size-label`	字段标签字体大小	`12px`
`--esw-font-size-small`	小号文本（错误、注释）	`12px`
`--esw-font-weight-regular`	常规字重	`400`
`--esw-font-weight-medium`	中等字重	`500`
`--esw-font-weight-bold`	粗体字重	`700`
`--esw-line-height-base`	基础行高	`1.4`
`--esw-line-height-title`	标题行高	`1.2`

尺寸和间距

变量	描述	默认值
`--esw-input-height`	输入字段高度	`36px`
`--esw-button-height`	按钮高度	`36px`
`--esw-spacing-xs`	特小间距	`4px`
`--esw-spacing-sm`	小间距	`8px`
`--esw-spacing-md`	中间距	`16px`
`--esw-spacing-lg`	大间距	`24px`
`--esw-popup-width`	模态框宽度	`380px`
`--esw-popup-max-width`	模态框最大宽度	`90vw`

外观

变量	描述	默认值
`--esw-border-radius`	元素的圆角半径	`4px`
`--esw-border-radius-popup`	模态框圆角半径	`8px`
`--esw-shadow-popup`	模态框盒阴影	`0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)`

pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}

<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>