System default dark mode by kumaradityaraj · Pull Request #92 · serverlessworkflow/editor

kumaradityaraj · 2026-04-15T08:59:20Z

Closes Add support for dark and light theme

This feature implements dark mode by using system current status.

Screen.Recording.2026-04-15.at.2.27.00.PM.mov

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

lornakelly · 2026-04-15T12:37:45Z

@kumaradityaraj Thanks for the PR. Looks like this only handles the first part of ticket for system default but the second part needs to be done "implement an attribute in the component to override this behaviour and force a specific theme"

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Implements theme switching for the diagram editor by wiring React Flow’s colorMode to a new state (defaulting to system), and removes the previous hardcoded diagram background styling.

Changes:

Add colorMode="system" support to @xyflow/react ReactFlow via component state.
Add a UI <select> to manually switch between dark, light, and system.
Remove .diagram-background styling from the diagram CSS; add a test-run artifact file.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Adds `colorMode` state, passes it to `ReactFlow`, and introduces a theme dropdown UI.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Removes background styling previously applied via `.diagram-background`.
packages/serverless-workflow-diagram-editor/test-results/.last-run.json	Adds last test run result artifact.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

kumaradityaraj · 2026-04-16T07:25:24Z

@fantonangeli implement an attribute in the component to override this behaviour and force a specific theme by this you mean adding a side button for selecting modes or is it something copilot is suggesting here

fantonangeli · 2026-04-17T09:15:29Z

@kumaradityaraj I was thinking about:

adding a property here:
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx:29
received from:
packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx:26
and finally passing it to Reactflow like you already did here:
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx:96

fantonangeli · 2026-04-17T09:04:33Z

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Use sand flow background

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-21T12:48:30Z

+@media (prefers-color-scheme: dark) {
+    .diagram-background{ 
+        --xy-background-pattern-color: inherit;
+        background-color: inherit;
+    }
+}


The dark-mode styling here is driven solely by @media (prefers-color-scheme: dark), which means the new colorMode prop cannot force dark mode when the system is light (and vice-versa). To support the intended override behavior, base these styles on an explicit class/data-attribute that reflects the resolved colorMode (and only fall back to prefers-color-scheme when colorMode === "system").

@fantonangeli I think it is true to some extent because with the current implementation this feature is breaking if we are playng with the attribute of storybook. Can you suggest something here?

Copilot · 2026-04-21T12:48:30Z

+.headingContent {
+  color: #000000;
+  background-color: #F8F8F8;
+  margin: 0;
+  padding: 1%;
+}
+
+@media (prefers-color-scheme: dark) {
+  .headingContent {
+    color: #F8F8F8;
+    background-color: #141414;
+    margin: 0;
+    padding: 1%;
+  }
+}


This heading theme is controlled only via prefers-color-scheme, so colorMode="dark" won’t work when the system theme is light (and colorMode="light" won’t work when the system theme is dark). If DiagramEditor is meant to allow overriding the system theme, tie these rules to a class/data-attribute set from the resolved colorMode, and use prefers-color-scheme only for the system case.

Copilot · 2026-04-21T12:48:30Z

  test("Renders react flow Diagram component", async () => {
    const locale = "en";
    const isReadOnly = true;

-    render(<DiagramEditor content={BASIC_VALID_WORKFLOW_YAML} locale={locale} isReadOnly={isReadOnly} />);
+    render(
+      <DiagramEditor content={BASIC_VALID_WORKFLOW_YAML} locale={locale} isReadOnly={isReadOnly} />,
+    );


The PR introduces a new public colorMode prop, but there are no tests asserting that it’s forwarded/applied (e.g., forcing dark/light regardless of system settings). Since this is user-visible behavior, add unit coverage that renders DiagramEditor with colorMode set and verifies the expected theme signal is applied (class/data-attribute or @xyflow/react prop).

system default dark mode

6947c24

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 15, 2026 08:59

Copilot started reviewing on behalf of kumaradityaraj April 15, 2026 08:59 View session

kumaradityaraj requested review from fantonangeli, handreyrc and lornakelly and removed request for Copilot and handreyrc April 15, 2026 09:02

lornakelly reviewed Apr 15, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx Outdated

Adding user preference button

5679112

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 15, 2026 13:04

Copilot started reviewing on behalf of kumaradityaraj April 15, 2026 13:04 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

fantonangeli suggested changes Apr 17, 2026

View reviewed changes

kumaradityaraj added 2 commits April 17, 2026 14:52

merging upstream

9a4be94

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Making dark mode simple and modifying content

6f309f2

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings April 21, 2026 07:26

Copilot started reviewing on behalf of kumaradityaraj April 21, 2026 07:26 View session

adding liscense

3a2fbac

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Copilot AI reviewed Apr 21, 2026

View reviewed changes

kumaradityaraj and others added 3 commits April 21, 2026 13:12

Copilot suggestions

156b110

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

Use sand flow background

9bffee2

Signed-off-by: fantonangeli <fabrizio.antonangeli@gmail.com>

Merge pull request #2 from fantonangeli/issue-92-use-sand-background

7323820

Use sand flow background

Copilot AI review requested due to automatic review settings April 21, 2026 09:56

Copilot started reviewing on behalf of kumaradityaraj April 21, 2026 09:57 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx

Adding attribute

634f266

Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com>

kumaradityaraj requested a review from Copilot April 21, 2026 12:42

Copilot started reviewing on behalf of kumaradityaraj April 21, 2026 12:42 View session

Copilot AI reviewed Apr 21, 2026

View reviewed changes

Conversation

kumaradityaraj commented Apr 15, 2026

Uh oh!

lornakelly commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kumaradityaraj commented Apr 16, 2026

Uh oh!

fantonangeli commented Apr 17, 2026

Uh oh!

Uh oh!

fantonangeli Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

kumaradityaraj Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lornakelly commented Apr 15, 2026 •

edited

Loading