主题色

设计器内置了五种主题色供用户选择，您可以通过 theme 配置项轻松切换主题。

不支持Vue2版本

type Theme = 'purple' | 'orange' | 'pink' | 'green' | 'default';

• default: 默认主题
• purple: 紫色主题
• orange: 橙色主题
• pink: 粉色主题
• green: 绿色主题

如何使用？

要应用主题色，您只需在设计器组件中设置 theme 属性。例如，若要使用粉色主题，可以按以下方式配置

<fc-designer ref="designer" theme="pink" height="100vh"/>

示例

以下是一个完整的示例，展示如何在设计器中使用不同的主题色：

<template>
    <div>
        <h1>选择设计器主题</h1>
        <fc-designer ref="designer" :theme="currentTheme" height="100vh"/>
        <button @click="setTheme('purple')">紫色主题</button>
        <button @click="setTheme('orange')">橙色主题</button>
        <button @click="setTheme('pink')">粉色主题</button>
        <button @click="setTheme('green')">绿色主题</button>
        <button @click="setTheme('default')">默认主题</button>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const currentTheme = ref('default');
function setTheme(theme) {
    currentTheme.value = theme;
}
</script>

在这个示例中，用户可以通过按钮选择不同的主题色。每次点击按钮时，currentTheme 的值会更新，从而动态改变设计器的主题色。这种灵活性使得设计器能够更好地适应用户的喜好。

CSS 变量

设计器使用 CSS 变量（CSS Custom Properties）来实现主题定制和样式控制。通过修改这些 CSS 变量，您可以轻松自定义设计器的外观，而无需修改源代码。

文字颜色变量

设计器提供了三个层级的文字颜色变量，用于不同重要程度的文本显示：

--fc-text-color-1: #262626; /* 主要文字色 - 用于标题、重要文本 */
--fc-text-color-2: #666666; /* 次要文字色 - 用于普通文本 */
--fc-text-color-3: #aaaaaa; /* 辅助文字色 - 用于提示、占位符等 */

背景颜色变量

背景颜色同样分为三个层级，用于不同区域的背景：

--fc-bg-color-1: #ffffff; /* 主要背景色 - 用于主容器背景 */
--fc-bg-color-2: #f5f5f5; /* 次要背景色 - 用于卡片、面板背景 */
--fc-bg-color-3: #ececec; /* 辅助背景色 - 用于输入框、代码编辑器背景 */

线条颜色变量

线条颜色用于边框、分割线等元素：

--fc-line-color-1: #dddddd; /* 设计区虚线 */
--fc-line-color-2: #d9d9d9; /* 按钮边框 */
--fc-line-color-3: #ececec; /* 分割线色 */

主题样式颜色变量

主题样式颜色是设计器的核心颜色变量，控制按钮、链接、选中状态等交互元素的颜色：

--fc-style-color-1: #2e73ff; /* 主色 - 用于按钮、链接、选中状态 */
--fc-style-bg-color-1: rgba(46, 115, 255, 0.05); /* 主色背景色 - 用于悬停、选中背景 */
--fc-style-hover-color: rgba(46, 115, 255, 0.5); /* 悬停颜色 */

--fc-style-color-2: #00c050; /* 次要主色 - 用于成功状态 */
--fc-style-bg-color-2: rgba(0, 192, 80, 0.05); /* 次要背景色 */

--fc-style-color-3: #ff2e2e; /* 警告色 - 用于错误、警告状态 */
--fc-style-bg-color-3: rgba(255, 46, 46, 0.05); /* 警告背景色 */

--fc-style-color-4: #4efdb7; /* 扩展颜色 */
--fc-style-bg-color-4: rgba(78, 253, 183, 0.05); /* 扩展背景色 */

--fc-grid-line-color: rgba(0, 0, 0, 0.05); /* 网格线颜色 */

如何自定义 CSS 变量

您可以通过以下方式自定义这些 CSS 变量：

方法一：全局覆盖

在您的全局样式文件中覆盖 CSS 变量：

:root {
    --fc-style-color-1: #your-color;
    --fc-text-color-1: #your-text-color;
    /* 其他变量... */
}

方法二：针对设计器组件

如果您只想修改设计器组件的样式，可以在设计器容器上设置：

<template>
    <div class="custom-designer">
        <fc-designer ref="designer" height="100vh"/>
    </div>
</template>

<style>
.custom-designer {
    --fc-style-color-1: #your-color;
    --fc-text-color-1: #your-text-color;
}
</style>

方法三：暗色模式支持

设计器支持暗色模式，您可以通过 html.dark 选择器为暗色模式定义不同的变量值：

html.dark {
    --fc-text-color-1: #e5eaf3;
    --fc-bg-color-1: #0a0a0a;
    /* 其他暗色模式变量... */
}

主题相关的 CSS 变量

当使用不同的主题时，设计器会自动应用相应的 CSS 变量。例如，使用 purple 主题时：

.fd-theme-purple {
    --fc-style-color-1: #884CFF;
    --fc-style-bg-color-1: rgba(136, 76, 255, 0.05);
    --el-color-primary: #884CFF;
    /* 其他紫色主题变量... */
}

完整变量列表

设计器还支持 Element Plus 的颜色变量，用于与 Element Plus 组件库保持一致：

--el-color-primary: #2e73ff; /* Element Plus 主色 */
--el-color-primary-light-3: #6699ff;
--el-color-primary-light-5: #99bbff;
--el-color-primary-light-7: #ccdfff;
--el-color-primary-light-8: #e0ebff;
--el-color-primary-light-9: #ccdfff;
--el-color-primary-dark-2: #265fcc;

通过自定义这些 CSS 变量，您可以完全控制设计器的视觉样式，实现与您的品牌或应用风格完美匹配的定制化界面。