Skip to content

fix(styles): improve edge visibility in dark mode#2891

Merged
davydkov merged 1 commit into
mainfrom
fix/dark-mode-edge-contrast
Apr 14, 2026
Merged

fix(styles): improve edge visibility in dark mode#2891
davydkov merged 1 commit into
mainfrom
fix/dark-mode-edge-contrast

Conversation

@ckeller42

@ckeller42 ckeller42 commented Apr 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

  • Increase edge background (pathBg) stroke opacity in dark mode for better contrast against the dark canvas
  • Light mode values are completely unchanged — no visual regression
  • The pathBg is a wider, semi-transparent stroke behind each edge that creates a subtle glow/halo effect. In dark mode, the same low opacity values used in light mode result in nearly invisible halos due to lower contrast ratios against dark backgrounds

Before / After (zoomed, dark mode)

Before (flat 0.08) After (dark: 0.25)
before after

Note: The default edge color in the example is gray (rgb(141,141,141)) which has inherently low contrast on dark backgrounds. The improvement is most visible on colored edges and during hover/selection interactions where the opacity jump is larger (0.2→0.45 on hover, 0.25→0.5 on selection).

Changes

styled-system/preset/src/recipes/edgePath.ts — pathBg slot:

State Light (unchanged) Dark (new) Multiplier
Default 0.08 0.25 ~3x
Hovered 0.2 0.45 ~2.25x
Selected 0.25 0.5 2x
Selected+Hovered 0.4 0.65 ~1.6x

Test plan

  • Verified CSS output contains correct [data-mantine-color-scheme=dark] rules
  • Verified computedStyle.strokeOpacity returns 0.25 in dark mode
  • Visual check: light mode unchanged

🤖 Generated with Claude Code

@changeset-bot

changeset-bot Bot commented Apr 14, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 5014d34

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages
Name Type
@likec4/styles Patch
@likec4/playground Patch
@likec4/core Patch
@likec4/diagram Patch
likec4 Patch
@likec4/react Patch
@likec4/vscode-preview Patch
likec4-vscode Patch
@likec4/docs-astro Patch
@likec4/style-preset Patch
@likec4/config Patch
@likec4/generators Patch
@likec4/language-server Patch
@likec4/language-services Patch
@likec4/layouts Patch
@likec4/leanix-bridge Patch
@likec4/log Patch
@likec4/lsp Patch
@likec4/mcp Patch
@likec4/tsconfig Patch
@likec4/vite-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Apr 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

Added a changeset marking a patch release for @likec4/styles and updated the edgePath recipe to use theme-aware strokeOpacity values that increase opacity in dark mode while retaining original light-mode base values.

Changes

Cohort / File(s) Summary
Changeset
.changeset/fix-dark-mode-edge-contrast.md		 New changeset file declaring a patch release for @likec4/styles describing increased edge stroke opacity for dark mode.
Dark Mode Stroke Opacity
styled-system/preset/src/recipes/edgePath.ts		 Replaced static strokeOpacity numbers with theme-aware objects ({ base: ..., _dark: ... }) for pathBg across default, hover, selected, and hovered-selected states to increase opacity in dark mode.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • davydkov
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: improving edge visibility in dark mode by increasing stroke opacity values.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed The PR description is comprehensive and well-structured, covering summary, visual comparisons, detailed changes with a comparison table, and a thorough test plan.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/dark-mode-edge-contrast

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ckeller42 @claude
fix(styles): improve edge visibility in dark mode
5014d34 
Increase pathBg stroke-opacity in dark mode for better edge contrast.
Dark backgrounds require higher opacity for perceptual parity with light mode.

Dark mode values (light mode unchanged):
- Default: 0.25 (light: 0.08)
- Hover: 0.45 (light: 0.2)
- Selected: 0.5 (light: 0.25)
- Selected+Hover: 0.65 (light: 0.4)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@ckeller42 ckeller42 force-pushed the fix/dark-mode-edge-contrast branch from adb115f to 5014d34 Compare April 14, 2026 12:26
@davydkov davydkov merged commit b5e33d1 into main Apr 14, 2026
16 checks passed
@davydkov davydkov deleted the fix/dark-mode-edge-contrast branch April 14, 2026 21:41
@likec4-ci likec4-ci Bot mentioned this pull request Apr 14, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@davydkov davydkov davydkov approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ckeller42 @davydkov