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

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.

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

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

…css-classes Implement colorMode css classes

Copilot

Pull request overview

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

Comments suppressed due to low confidence (1)

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx:63

DiagramEditor uses props.ref with useImperativeHandle, but ref is not passed as a normal prop to function components unless the component is wrapped with React.forwardRef. As-is, the imperative handle will never be exposed to consumers. Convert DiagramEditor to forwardRef (remove ref from DiagramEditorProps) and use the forwarded ref in useImperativeHandle.

  // Allow imperatively controlling the Editor
  React.useImperativeHandle(
    props.ref,
    () => ({
      doSomething: () => {

💡 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 10 out of 10 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>

lornakelly · 2026-04-22T14:40:55Z

+    background-color: #141414;
+}
+
+@media (prefers-color-scheme: dark) {


More of an FYI but because we will be introducing tailwind in a later PR we will need to replace this to tailwind style. I will change this when I am merging tailwind work. For your own info, worth looking up how tailwind implements dark and light styles - no need to change this PR though

lornakelly · 2026-04-22T14:42:49Z

+  const locale = "en";
+  const isReadOnly = true;

+  test("Renders react flow Diagram component", () => {


the pattern we are using for tests is it not test if you can change for consistency

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

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

Comment thread packages/serverless-workflow-diagram-editor/test-results/.last-run.json Outdated

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

kumaradityaraj and others added 3 commits April 22, 2026 14:21

Adding dark mode types

da2d653

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

Implement colorMode css classes

ed452a2

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

Merge pull request #3 from fantonangeli/issue-92-implement-colorMode-…

d22de32

…css-classes Implement colorMode css classes

Copilot AI review requested due to automatic review settings April 22, 2026 11:28

Copilot started reviewing on behalf of kumaradityaraj April 22, 2026 11:29 View session

Copilot AI reviewed Apr 22, 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/diagram-editor/DiagramEditor.tsx

Comment thread packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

Test cases added

6481cbd

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

kumaradityaraj requested a review from fantonangeli April 22, 2026 12:56

Syncing upstream and resolving merge conflicts

64867d3

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

Copilot AI review requested due to automatic review settings April 22, 2026 13:33

Copilot started reviewing on behalf of kumaradityaraj April 22, 2026 13:33 View session

Copilot AI reviewed Apr 22, 2026

View reviewed changes

Copilot suggestion

f932d00

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

lornakelly reviewed Apr 22, 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!

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!

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!

Uh oh!

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lornakelly Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lornakelly commented Apr 15, 2026 •

edited

Loading

lornakelly Apr 22, 2026 •

edited

Loading