# 自定义订阅表单小组件

默认情况下，订阅表单小组件使用适用于大多数页面的中性样式。添加[嵌入代码](/zh/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site)后，您可以通过在 pushwoosh-subscribe-widget 元素上设置 CSS 自定义属性，使其与您网站的视觉形象相匹配。下表中的值将替换默认值。

<Aside type="caution" icon="setting" title="需要开发人员协助">
您可能需要开发团队的协助，才能在您的网站上应用这些小组件样式更改。
</Aside>

## 自定义颜色

| 变量 | 描述 | 默认值 |
| --- | --- | --- |
| `--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)` |

## 示例

<Tabs>
<TabItem label="CSS">

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

</TabItem>
<TabItem label="Style attribute">

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

</TabItem>
</Tabs>