finos / finos/architecture-as-code
CALM Canvas VS Code extension does not play well with dark themes
- Dominant language
- TypeScript
- Stars
- 399
- Forks
- 138
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 37
Description
## Bug Report
### Steps to Reproduce:
1. Ensure that you have CALM CLI and the CALM Canvas VS Code extension installed; also ensure that you have run AI initialisation for your coding agent of choice (I'm using Claude)
2. Ensure that you are using a dark colour theme (I am using jellyfish-x-retro)
3. Open a VS Code project containing one or more CALM architecture diagrams (or create a new diagram for an existing project using your AI agent)
4. Open the CALM diagram.
5. Right-click in the source code for the diagram and click **CALM: Open Preview** on the context menu.
6. CALM Canvas will open a preview of your diagram.
### Expected Result:
What I expect to see is a diagram preview showing all nodes, edges, labels, etc., with sufficient contrast between all of them (along with the background) that the entire diagram is readable in the context of the colour theme I've chosen to use.
For example, here's how the diagram looks in the default light theme (Light 2026):
This is entirely readable but this only works if a light theme is chosen.
### Actual Result:
What I actually see using my chosen dark theme (jellyfish-x-retro) is the following:
As you can see multiple elements of the diagram are effectively invisible because they do not honour theme colour choices. For example, edges between nodes remain black, which means they don't show up at all against a dark background. Background, foreground, and text colours of nodes should also change to match the theme but remains as they appear for the light theme.
In all instances of foreground, background, outline, fill, and text colours, these should be sourced from the user's chosen colour theme.
### Environment:
macOS Sequoia 15.7.7
Visual Studio Code 1.136.2
CALM 1.58.0
CALM Canvas 0.6.0
### Additional Context:
Let me know if I can help with any further information.
Contributor guide
Research direction
Reproduce the issue in the CALM Canvas VS Code extension using a dark theme such as jellyfish-x-retro, then inspect how the diagram preview obtains colors for edges, nodes, outlines, fills, backgrounds, and text. Done means the preview remains readable and all listed colors respond appropriately to the user's selected VS Code theme.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vscode
- Domain
- devtools, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100