FcDesigner Pro

Appearance

暗黑模式 ​

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

暗黑模式

如何启用？ ​

要启用暗黑模式，只需在 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
 --fc-text-color-1      /*主要文字色*/
 --fc-text-color-2      /*次要文字色*/
 --fc-text-color-3      /*辅助文字色*/
 --fc-bg-color-1        /*主要背景色*/
 --fc-bg-color-2        /*次要背景色*/
 --fc-bg-color-3        /*辅助背景色*/
 --fc-line-color-1      /*设计区虚线色*/
 --fc-line-color-2      /*按钮边框色*/
 --fc-line-color-3      /*分割线色*/
 --fc-style-color-1     /*主色*/
 --fc-style-bg-color-1  /*主色背景色*/