@@ -14,10 +14,12 @@ desktop app edition, and an unofficial plugin for VSCode and VSCodium.
14
14
exporting to .svg format. However, it seems necessary to export in order to
15
15
support dark mode in GitHub.
16
16
17
- This screen capture shows the correct save-as option in the desktop tool
18
- for macOS.
17
+ These screen captures show the correct save-as option in the desktop tools
18
+ for macOS and Linux .
19
19
20
- ![ ] ( Screen_DiagramsDotNetDesktop_SaveAsEditiable-SVG.png )
20
+ ![ ] ( Screen_DiagramsDotNetDesktop-macOS_SaveAsEditiable-SVG.png )
21
+
22
+ ![ ] ( Screen_DiagramsDotNetDesktop-Linux_SaveAsEditiable-SVG.png )
21
23
22
24
- Make diagrams that support dark mode by removing these declarations from the
23
25
style of individual graphic elements.
@@ -28,8 +30,12 @@ desktop app edition, and an unofficial plugin for VSCode and VSCodium.
28
30
Or you can set them to ` default ` . See also this SO question and answer.
29
31
[ https://stackoverflow.com/questions/75950638/automatic-fill-colour-but-opposite-to-theme-in-diagrams-net-aka-draw-io ] ( https://stackoverflow.com/questions/75950638/automatic-fill-colour-but-opposite-to-theme-in-diagrams-net-aka-draw-io )
30
32
31
- - Use the typeface ` Verdana ` for all fonts. That typeface is included in the
32
- tool by default and shouldn't require downloading or embedding.
33
+ - Use the typeface ` Helvetica ` for all text in diagrams. That typeface is
34
+ included in both the desktop tool and the plugin by default and shouldn't
35
+ require downloading or embedding.
36
+
37
+ The standalone tool, at least for Linux, doesn't support
38
+ [ Google Fonts] ( https://fonts.google.com/ ) , although the plugin does.
33
39
34
40
# How to add images with dark mode support
35
41
Check these notes for how to add images to the Markdown so that GitHub renders
@@ -39,7 +45,12 @@ them correctly in dark mode.
39
45
40
46
Dark mode export is only available if the tool is running in dark mode.
41
47
42
- ![ ] ( Screen_DiagramsDotNetDesktop_ExportAs-SVG-DarkMode.png )
48
+ These screen captures show the required export parameters as they might
49
+ appear in the desktop tools for macOS and Linux.
50
+
51
+ ![ ] ( Screen_DiagramsDotNetDesktop-macOS_ExportAs-SVG-DarkMode.png )
52
+
53
+ ![ ] ( Screen_DiagramsDotNetDesktop-Linux_ExportAs-SVG-DarkMode.png )
43
54
44
55
See also this article on their website.
45
56
[ https://www.drawio.com/blog/dark-mode-diagram-editor ] ( https://www.drawio.com/blog/dark-mode-diagram-editor )
@@ -65,11 +76,11 @@ them correctly in dark mode.
65
76
66
77
Note that the ` source ` and ` img ` tags don't have to be self-closing; there's
67
78
no oblique before the tag close like this ` /> ` . That's because they are
68
- HTML void elements. For discussion of that type of element, see for example
79
+ HTML void elements. For a discussion of that type of element, see for
80
+ example
69
81
[ developer.mozilla.org/.../Void_element] ( https://developer.mozilla.org/en-US/docs/Glossary/Void_element ) .
70
82
71
- See
72
- https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to
83
+ See [ docs.github.com/...writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to] ( https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to )
73
84
for official instructions.
74
85
75
86
- You can make GitHub load in light or dark mode in Chrome for macOS by
0 commit comments