当前位置:首页 > draw.io教程

draw.io 深色模式图表的更新提高了可读性

drawio3年前 (2023-07-06)draw.io教程9

draw.io 是极少数支持深色模式的图表编辑器之一。在浅色和深色模式之间切换时,形状、文本和连接线的颜色会自动改变。现在,图表中的所有颜色在两种模式下色调保持不变,但强度会进行调整,从而显著提高深色模式下的可读性,而不是仅仅改变色调。

在 draw.io 编辑器中切换到深色模式

点击右上角的太阳图标,然后选择“深色”切换到深色模式。或者,从 draw.io 菜单中选择“设置”>“外观”>“深色”

要切换回原来的设置,请点击月亮图标并选择“灯光”,或者从菜单中选择“设置”>“外观”>“灯光” 。

提示:如果您希望编辑器反映您的操作系统或浏览器模式,请选择“自动” 。

draw.io Desktop、我们的免费在线编辑器app.diagrams.net以及诸如非官方的 VSCode draw.io 扩展Notion draw.io Chrome 扩展等集成程序都支持深色模式

draw.io 为 Confluence CloudJira Cloud提供了深色模式,当您在 Confluence 或 Jira 中切换深色和浅色主题时,图表缩略图和 draw.io 编辑器将自动切换模式。

draw.io 中的浅色和深色

图表中的所有颜色(形状、文本、连接线和绘图画布背景颜色)在切换模式时都会改变其强度。

这样可以确保在一种模式下可读的文本和可见的连接线,在另一种模式下也同样清晰易读。

所有样式调色板颜色(在格式面板的“样式”选项卡中)和全局图表样式都会更改,以反映您正在使用的工作模式。

浅色模式调色板颜色

深色模式调色板颜色

设置浅色和深色模式的特定颜色

  1. 选择形状或连接线,然后单击格式面板“样式”选项卡中的“填充”或“线条”颜色块。要设置文本颜色,请在格式面板“文本”选项卡中选择颜色块

  2. 第一个值(默认值)对应浅色模式。您可以将其更改为新的十六进制颜色代码。
    默认情况下,当有人在深色模式下查看或编辑图表时,颜色会自动调整以保持清晰可读。

  3. 展开“高级”选项,然后输入深色模式的十六进制颜色代码。现在,当您处于深色模式时,形状或连接线将使用此定义的颜色值,而不是自动调整色调。

从深色模式导出图表

将图表导出为图像时,可以“外观”列表中选择“深色”。导出的图像中,图表将以深色背景保存。

当您将图表导出为 PDF、HTML 文件、draw.io 文件或 URL,或者导出为浅色模式图像时,图表将显示在浅色背景上,并使用浅色调色板。

现有图表中的颜色

使用深色模式时,默认所有图表均以浅色模式创建。由于这种情况最为常见,因此可以确保切换到深色模式时颜色强度变化正确,图表清晰易读。

注意:模式颜色强度变化是一个 CSS 滤镜 - 这不会改变图表数据中的颜色。

图表颜色使用不正确?

如果您在深色模式下绘制了一个图表,并设置了特定的颜色以适应深色背景,当您在最新版本的编辑器中重新打开该图表时,颜色将与您最初设置的颜色不同。

这是因为在使用深色模式时,将浅色模式颜色强度转换为深色模式的算法会应用于图表中的所有颜色。这只会影响少数用户——毕竟,很少有用户专门使用深色模式来绘制图表。

如果您想继续使用旧的深色模式和自定义图表颜色,请打开draw.io 配置(通过 draw.io 菜单选择“设置”>“配置”),添加以下属性,然后单击“应用”

{
  "enableCssDarkMode": false}


然后,重新加载标签页或重启 draw.io Desktop 以加载新配置。您之前为深色模式自定义的图表颜色现在应该会正常显示了。

更多信息,请访问我们 draw.io GitHub 存储库中的相关讨论