allegro-checkpoint/skills/creative/excalidraw/references/dark-mode.md

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:

{
  "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:

[
  {
    "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.