feat(webcomponent): add color-scheme attribute by dkapitan · Pull Request #2955 · likec4/likec4

dkapitan · 2026-05-14T15:46:38Z

Summary

Add color-scheme as an observed attribute on the <likec4-view> web component, allowing users to force light or dark color scheme explicitly.

Problem

The <likec4-view> web component only exposes view-id, browser, and dynamic-variant as attributes. The underlying React LikeC4View component supports a colorScheme prop, but it's not wired through the web component. This means users embedding diagrams in light-themed pages (e.g. Quarto books) get dark backgrounds with no way to override.

Solution

Added color-scheme to observedAttributes
Added colorScheme to the Zod props schema as an optional literal ['light', 'dark']
Parse and pass color-scheme attribute through to the React component
Updated documentation table

Usage

<likec4-view view-id="index" color-scheme="light"></likec4-view>

When omitted, behavior is unchanged (follows system preference).

Fixes #2954

Add 'color-scheme' as an observed attribute on the <likec4-view> web component, allowing users to force 'light' or 'dark' color scheme. Without this attribute, the component follows the system/browser preference. Fixes likec4#2954

changeset-bot · 2026-05-14T15:46:44Z

🦋 Changeset detected

Latest commit: 61dd92d

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

This PR includes changesets to release 22 packages

Name	Type
@likec4/spa	Patch
likec4	Patch
likec4-vscode	Patch
@likec4/docs-astro	Patch
@likec4/playground	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/diagram	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/react	Patch
@likec4/tsconfig	Patch
@likec4/vite-plugin	Patch
@likec4/vscode-preview	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 · 2026-05-14T15:50:29Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 50afb855-7bca-4d85-90f2-a512c4275234

📥 Commits

Reviewing files that changed from the base of the PR and between 351cb3c and 3726fb4.

📒 Files selected for processing (1)

.changeset/webcomponent-color-scheme.md

✅ Files skipped from review due to trivial changes (1)

.changeset/webcomponent-color-scheme.md

📝 Walkthrough

Walkthrough

This PR exposes a new color-scheme web component attribute that maps to the React colorScheme prop ('light' | 'dark'), adds it to observed attributes and props parsing, and documents the attribute in the webcomponent reference.

Changes

Color-scheme Web Component Support

Layer / File(s)	Summary
Color-scheme attribute implementation and documentation `packages/likec4-spa/codegen/webcomponent.tsx`, `apps/docs/src/content/docs/tooling/Code generation/webcomponent.mdx`, `.changeset/webcomponent-color-scheme.md`	`propsSchema` now includes an optional `colorScheme` field (`'light' \| 'dark'`). `LikeC4View.observedAttributes` is extended to include `color-scheme`, `getProps()` reads and forwards the attribute to the React component, documentation table updated, and a changeset added.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

davydkov

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a color-scheme attribute to the web component.
Description check	✅ Passed	The description is comprehensive and follows the template structure, covering summary, problem, solution, and usage with a linked issue reference.
Linked Issues check	✅ Passed	The PR fully implements the requirements from issue `#2954`: color-scheme attribute added to observedAttributes, colorScheme added to schema, and parsing implemented.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the color-scheme attribute feature: web component, documentation, and changeset are all in scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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.}

davydkov

Great! Thank you!

davydkov

@dkapitan please add changeset file, it is needed for generated release notes (you can ask changeset-generator agent)

feat(webcomponent): add color-scheme attribute

351cb3c

Add 'color-scheme' as an observed attribute on the <likec4-view> web component, allowing users to force 'light' or 'dark' color scheme. Without this attribute, the component follows the system/browser preference. Fixes likec4#2954

davydkov approved these changes May 16, 2026

View reviewed changes

dkapitan added 2 commits May 16, 2026 17:58

chore: add changeset for color-scheme attribute

3726fb4

Merge branch 'main' into feat/webcomponent-color-scheme

61dd92d

davydkov approved these changes May 18, 2026

View reviewed changes

davydkov enabled auto-merge (squash) May 18, 2026 07:06

davydkov merged commit 699f44c into likec4:main May 18, 2026
14 checks passed

likec4-ci Bot mentioned this pull request May 18, 2026

release: v1.57.0 #2937

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(webcomponent): add color-scheme attribute#2955

feat(webcomponent): add color-scheme attribute#2955
davydkov merged 3 commits into
likec4:mainfrom
dkapitan:feat/webcomponent-color-scheme

dkapitan commented May 14, 2026

Uh oh!

changeset-bot Bot commented May 14, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 14, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

davydkov left a comment

Uh oh!

davydkov left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

dkapitan commented May 14, 2026

Summary

Problem

Solution

Usage

Uh oh!

changeset-bot Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

davydkov left a comment

Choose a reason for hiding this comment

Uh oh!

davydkov left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented May 14, 2026 •

edited

Loading

coderabbitai Bot commented May 14, 2026 •

edited

Loading