finos / finos/architecture-as-code

CALM Canvas VS Code extension does not play well with dark themes

Open
#3,076 0 comments 0 reactions 0 assignees View on GitHub
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):

Image

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:

Image

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.