FcDesigner Pro

Appearance

暗黑模式 ​

暗黑模式为您的应用提供了一种舒适的低光环境，提升用户体验。您可以通过简单的配置启用和自定义暗黑模式。

不支持Vue2版本

暗黑模式

如何启用？ ​

要启用暗黑模式，只需在 HTML 根元素上添加一个名为 dark 的类：

html
<html class="dark">
  <head></head>
  <body></body>
</html>

自定义变量 ​

直接覆盖对应的 css 变量即可

像这样，新建一个styles/dark/vars.css文件:

css
html.dark {
  /* 自定义深色背景颜色 */
  --fc-bg-color-1: #626aef;
}

在 FcDesigner 之后导入它

js
// main.ts
import FcDesigner from 'path/to/fcDesignerPro';
import './styles/dark/vars.css'

通过这些步骤，您可以启用暗黑模式，并根据需求进行样式的自定义，以适应不同的用户界面需求。

变量说明 ​

暗黑模式下，您可以通过覆盖以下 CSS 变量来自定义设计器的外观。所有变量都应在 html.dark 选择器下定义。

文字颜色变量 ​

用于控制不同重要程度的文本颜色：

css
html.dark {
    --fc-text-color-1: #e5eaf3; /* 主要文字色 - 用于标题、重要文本 */
    --fc-text-color-2: #cfd3dc; /* 次要文字色 - 用于普通文本 */
    --fc-text-color-3: #6c6e72; /* 辅助文字色 - 用于提示、占位符等 */
}

背景颜色变量 ​

用于控制不同区域的背景颜色：

css
html.dark {
    --fc-bg-color-1: #0a0a0a; /* 主要背景色 - 用于主容器背景 */
    --fc-bg-color-2: #191919; /* 次要背景色 - 用于卡片、面板背景 */
    --fc-bg-color-3: #2b2b2c; /* 辅助背景色 - 用于输入框、代码编辑器背景 */
}

线条颜色变量 ​

用于控制边框、分割线等元素的颜色：

css
html.dark {
    --fc-line-color-1: #393a3c; /* 设计区虚线 */
    --fc-line-color-2: #636466; /* 按钮边框 */
    --fc-line-color-3: #2b2b2c; /* 分割线色 */
}

主题样式颜色变量 ​

用于控制按钮、链接、选中状态等交互元素的颜色：

css
html.dark {
    --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(255, 255, 255, 0.15); /* 网格线颜色 */
}

完整示例 ​

以下是一个完整的暗黑模式变量配置示例：

css
/* styles/dark/vars.css */
html.dark {
    /* 文字颜色 */
    --fc-text-color-1: #e5eaf3;
    --fc-text-color-2: #cfd3dc;
    --fc-text-color-3: #6c6e72;

    /* 背景颜色 */
    --fc-bg-color-1: #0a0a0a;
    --fc-bg-color-2: #191919;
    --fc-bg-color-3: #2b2b2c;

    /* 线条颜色 */
    --fc-line-color-1: #393a3c;
    --fc-line-color-2: #636466;
    --fc-line-color-3: #2b2b2c;

    /* 主题样式颜色 */
    --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-grid-line-color: rgba(255, 255, 255, 0.15);

    /* 您可以根据需要覆盖其他变量 */
}

注意事项 ​

  1. 变量优先级：在 html.dark 选择器下定义的变量会覆盖默认的亮色模式变量
  2. 部分覆盖：您不需要覆盖所有变量，只需覆盖需要自定义的变量即可
  3. 颜色对比度：在暗黑模式下，请确保文字颜色与背景颜色有足够的对比度，以保证可读性
  4. 主题色兼容：如果您使用了自定义主题（如 purple、orange 等），主题相关的 CSS 变量仍然会生效，但会被 html.dark 下的变量覆盖