69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
# Excalidraw Dark Mode Diagrams
|
|
|
|
To create a dark-themed diagram, use a massive dark background rectangle as the **first element** in the array. Make it large enough to cover any viewport:
|
|
|
|
```json
|
|
{
|
|
"type": "rectangle", "id": "darkbg",
|
|
"x": -4000, "y": -3000, "width": 10000, "height": 7500,
|
|
"backgroundColor": "#1e1e2e", "fillStyle": "solid",
|
|
"strokeColor": "transparent", "strokeWidth": 0
|
|
}
|
|
```
|
|
|
|
Then use the following color palettes for elements on the dark background.
|
|
|
|
## Text Colors (on dark)
|
|
|
|
| Color | Hex | Use |
|
|
|-------|-----|-----|
|
|
| White | `#e5e5e5` | Primary text, titles |
|
|
| Muted | `#a0a0a0` | Secondary text, annotations |
|
|
| NEVER | `#555` or darker | Invisible on dark bg! |
|
|
|
|
## Shape Fills (on dark)
|
|
|
|
| Color | Hex | Good For |
|
|
|-------|-----|----------|
|
|
| Dark Blue | `#1e3a5f` | Primary nodes |
|
|
| Dark Green | `#1a4d2e` | Success, output |
|
|
| Dark Purple | `#2d1b69` | Processing, special |
|
|
| Dark Orange | `#5c3d1a` | Warning, pending |
|
|
| Dark Red | `#5c1a1a` | Error, critical |
|
|
| Dark Teal | `#1a4d4d` | Storage, data |
|
|
|
|
## Stroke and Arrow Colors (on dark)
|
|
|
|
Use the standard Primary Colors from the main color palette -- they're bright enough on dark backgrounds:
|
|
- Blue `#4a9eed`, Amber `#f59e0b`, Green `#22c55e`, Red `#ef4444`, Purple `#8b5cf6`
|
|
|
|
For subtle shape borders, use `#555555`.
|
|
|
|
## Example: Dark mode labeled rectangle
|
|
|
|
Use container binding (NOT the `"label"` property, which doesn't work). On dark backgrounds, set text `strokeColor` to `"#e5e5e5"` so it's visible:
|
|
|
|
```json
|
|
[
|
|
{
|
|
"type": "rectangle", "id": "r1",
|
|
"x": 100, "y": 100, "width": 200, "height": 80,
|
|
"backgroundColor": "#1e3a5f", "fillStyle": "solid",
|
|
"strokeColor": "#4a9eed", "strokeWidth": 2,
|
|
"roundness": { "type": 3 },
|
|
"boundElements": [{ "id": "t_r1", "type": "text" }]
|
|
},
|
|
{
|
|
"type": "text", "id": "t_r1",
|
|
"x": 105, "y": 120, "width": 190, "height": 25,
|
|
"text": "Dark Node", "fontSize": 20, "fontFamily": 1,
|
|
"strokeColor": "#e5e5e5",
|
|
"textAlign": "center", "verticalAlign": "middle",
|
|
"containerId": "r1", "originalText": "Dark Node", "autoResize": true
|
|
}
|
|
]
|
|
```
|
|
|
|
Note: For standalone text elements on dark backgrounds, always set `"strokeColor": "#e5e5e5"` explicitly. The default `#1e1e1e` is invisible on dark.
|
|
|