概述
NueForm 提供丰富的主题定制功能，让您的表单与品牌风格一致。表单的每个视觉方面都可以自定义，从颜色和字体到 Logo 和自定义 CSS。
主题属性
主题属性在表单级别设置，适用于表单中的每个问题。它们在渲染时被转换为 CSS 自定义属性（变量），因此所有组件会自动适配。
颜色属性
| 属性 | CSS 变量 | 描述 | 默认值 |
|---|---|---|---|
| 背景色 | --fc-bg | 整个表单的背景色。 | #0a0a0a |
| 文本色 | --fc-text | 问题和内容的主要文本颜色。 | #e8e8e8 |
| 主题色（强调色） | --fc-accent | 用于高亮、活动状态和问题编号的强调色。 | #6366f1 |
| 答案文本色 | --fc-answer-text | 受访者在输入框中输入文本的颜色。 | #e8e8e8 |
| 占位符颜色 | --fc-placeholder | 输入框中占位符文本的颜色。 | rgba(255,255,255,0.25) |
| 按钮颜色 | --fc-btn-bg | 主要按钮（确定、开始、提交）的背景色。如未设置则回退到主题色。 | #6366f1 |
| 按钮文本色 | --fc-btn-text | 主要按钮的文本颜色。 | #ffffff |
| 标题颜色 | --fc-title-color | 问题/活动标题的颜色。回退到文本色。 | 继承文本色 |
| 描述颜色 | --fc-description-color | 问题/活动描述的颜色。 | 文本色 55% 透明度 |
| 选项文本色 | --fc-option-color | 选项标签和活动内容的颜色。 | 继承文本色 |
| 指示器背景色 | --fc-indicator-bg | Fuse 活动中活动指示器的背景色。 | 强调色 15% 透明度 |
| 指示器文本色 | --fc-indicator-text | 活动指示器的文本颜色。 | 强调色 |
派生颜色变量
主题系统自动从您的基础颜色生成额外的 CSS 变量，用于各种组件状态：
| CSS 变量 | 描述 |
|---|---|
--fc-accent-hover | 悬停状态下的浅色强调色。 |
--fc-accent-8 到 --fc-accent-60 | 不同透明度级别的强调色（8%、10%、15%、20%、30%、40%、60%）。 |
--fc-text-2 到 --fc-text-85 | 不同透明度级别的文本色（2%、4%、5%、6%、8%、10%、12%、15%、20%、40%、55%、75%、80%、85%）。 |
--fc-input-bg | 输入框背景（文本色 5% 透明度）。 |
--fc-card-bg | 卡片背景（文本色 4% 透明度）。 |
--fc-border | 边框颜色（文本色 12% 透明度）。 |
--fc-muted | 辅助/次要文本（文本色 45% 透明度）。 |
--fc-primary | 主色（强调色的别名）。 |
--fc-btn-bg-hover | 悬停状态下的浅色按钮背景。 |
字体属性
NueForm 自动从 Google Fonts 加载字体。可以使用任何 Google Fonts 字体系列。
| 属性 | CSS 变量 | 描述 | 默认值 |
|---|---|---|---|
| 问题字体 | --fc-font-question | 问题标题的字体系列。 | Inter |
| 答案字体 | --fc-font-answer | 受访者输入文本的字体系列。 | Inter |
| 按钮字体 | --fc-font-button | 按钮标签的字体系列。 | Inter |
| 描述字体 | --fc-font-description | 问题/活动描述的字体系列。 | 继承问题字体 |
| 选项字体 | --fc-font-option | 选项标签和活动内容的字体系列。 | 继承答案字体 |
| 指示器字体 | --fc-font-indicator | 活动指示器文本的字体系列。 | 继承问题字体 |
| 问题字体大小 | --fc-font-size-question | 问题标题的字体大小。接受任何 CSS 大小值（rem、px 等）。 | 1.875rem（30px） |
字体按需从 Google Fonts 加载。系统自动生成正确的 Google Fonts CSS 导入 URL，请求每个字体系列的 300 到 700 字重。默认字体 Inter 已预加载，不需要 Google Fonts 请求。
品牌
Logo
您可以在两个位置向表单添加 Logo：
顶部 Logo：
| 设置 | 描述 | 默认值 |
|---|---|---|
| 顶部 Logo URL | 显示在表单顶部的 Logo 图片 URL。 | 无 |
| 顶部 Logo 大小 | 顶部 Logo 的大小：small、medium 或 large。 | medium |
| 顶部 Logo 对齐 | 水平对齐：left、center 或 right。 | center |
| 顶部 Logo CSS | 应用于顶部 Logo 容器 (.fc-top-logo) 的自定义 CSS。 | 无 |
品牌 Logo：
| 设置 | 描述 | 默认值 |
|---|---|---|
| 品牌 Logo URL | 品牌 Logo 的 URL，通常显示在页脚或水印区域。 | 无 |
页脚文本
| 设置 | 描述 | 默认值 |
|---|---|---|
| 品牌页脚文本 | 显示在表单页脚区域的自定义文本。 | 无 |
水印 CSS
| 设置 | 描述 | 默认值 |
|---|---|---|
| 水印 CSS | 应用于水印/左下角 Logo 元素 (.fc-watermark) 的自定义 CSS。 | 无 |
隐藏品牌标识（Pro+）
| 设置 | 描述 | 默认值 |
|---|---|---|
| 隐藏品牌标识 | 从表单中移除 NueForm 品牌标识。需要 Pro+ 计划。 | 禁用 |
隐藏 NueForm 品牌标识是 Pro+ 功能。在免费和较低层级的计划中，NueForm 水印始终显示。
品牌默认值
账户级别的品牌默认值让您可以设置适用于所有新创建表单的默认主题值。这些可以在表单级别被覆盖。
可用的品牌默认值：
- Logo URL
- 页脚文本
- 主题色
- 背景色
- 文本色
- 答案文本色
- 占位符颜色
- 按钮颜色
- 按钮文本色
- 字体系列（问题）
- 字体系列（答案）
- 字体系列（按钮）
- 问题字体大小
- 顶部 Logo URL、大小、对齐和 CSS
- 水印 CSS
问题级过渡动画
每个问题可以有自己的过渡动画，也可以为所有问题应用相同的过渡效果。可用的过渡动画：
| 过渡效果 | 描述 |
|---|---|
| 垂直滑动 + 淡入 | 问题带有淡入效果上下滑动。这是默认效果。 |
| 水平滑动 | 问题左右滑动。 |
| 对角滑动 | 问题对角线方向滑动。 |
| 弹性弹跳 | 问题带有弹性过冲效果弹入。 |
| 穿越缩放 | 问题通过视口缩放进出。 |
| 旋转进入 | 问题在进入时略微旋转。 |
您可以在问题编辑器中为单个问题设置过渡效果，或使用"应用到所有问题"选项设置统一的过渡效果。
自定义 CSS
要完全控制表单的外观，您可以编写自定义 CSS。请参阅自定义 CSS指南了解可用选择器和 CSS 变量的完整列表。
单问题样式
单个问题支持以下样式选项：
| 属性 | 描述 |
|---|---|
| 自定义类名 | 为问题容器添加 CSS 类。结合自定义 CSS 使用可为特定问题设置不同样式。 |
| 隐藏问题编号 | 从此特定问题中移除问题编号前缀。 |
| 媒体自定义类名 | 为此问题附加的媒体元素添加 CSS 类。 |
浅色与深色背景主题
NueForm 的默认主题使用深色背景 (#0a0a0a) 和浅色文本 (#e8e8e8)。派生的 CSS 变量（边框、输入框、卡片）都是相对于文本颜色计算的，因此切换到浅色主题非常简单：
- 将背景色设为浅色（例如
#ffffff）。 - 将文本色设为深色（例如
#1a1a1a）。 - 派生变量（
--fc-border、--fc-input-bg、--fc-card-bg、--fc-muted）会自动适配，因为它们基于文本色的透明度变化。
在浅色和深色主题之间切换时，请确保同时调整占位符颜色、答案文本色和按钮颜色以保持可读性和对比度。