System default dark mode

packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.css

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.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%;
+  }
+}

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

@@ -19,6 +19,9 @@ import { Diagram, DiagramRef } from "../react-flow/diagram/Diagram";
 import { DiagramEditorContextProvider } from "../store/DiagramEditorContextProvider";
 import { I18nProvider, useI18n, detectLocale } from "@serverlessworkflow/i18n";
 import { dictionaries } from "../i18n/locales";
+import "./DiagramEditor.css";
+import { ColorMode } from "../types/colorMode";
+
 /**
  * DiagramEditor component API
  */
@@ -31,6 +34,7 @@ export type DiagramEditorProps = {
   isReadOnly: boolean;
   locale: string;
   ref?: React.Ref<DiagramEditorRef>;
+  colorMode?: ColorMode;
 };
 
 const Content = () => {
@@ -50,6 +54,7 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
     const supportedLocales = Object.keys(dictionaries);
     return props.locale ?? detectLocale(supportedLocales);
   }, [props.locale]);
+  const colorMode = props.colorMode ?? "system";
 
   // Allow imperatively controlling the Editor
   React.useImperativeHandle(
@@ -64,10 +69,16 @@ export const DiagramEditor = (props: DiagramEditorProps) => {
 
   return (
     <>
-      <DiagramEditorContextProvider content={props.content} isReadOnly={props.isReadOnly} locale={locale}>
+      <DiagramEditorContextProvider
+        content={props.content}
+        isReadOnly={props.isReadOnly}
+        locale={locale}
+      >
         <I18nProvider locale={locale} dictionaries={dictionaries}>
-          <Content />
-          <Diagram ref={diagramRef} divRef={diagramDivRef} />
+          <div className="headingContent">
+            <Content />
+          </div>
+          <Diagram ref={diagramRef} divRef={diagramDivRef} colorMode={colorMode} />
         </I18nProvider>
       </DiagramEditorContextProvider>
     </>

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

@@ -23,3 +23,10 @@
     --xy-background-pattern-color: #ccc;
     background-color: #E5E4E2;
 }
+
+@media (prefers-color-scheme: dark) {
+    .diagram-background{ 
+        --xy-background-pattern-color: inherit;
+        background-color: inherit;
+    }
+}

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

@@ -18,8 +18,13 @@ import * as React from "react";
 import * as RF from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import "./Diagram.css";
+import { ColorMode } from "../../types/colorMode";
 
-const FIT_VIEW_OPTIONS: RF.FitViewOptions = { maxZoom: 1, minZoom: 0.1, duration: 400 };
+const FIT_VIEW_OPTIONS: RF.FitViewOptions = {
+  maxZoom: 1,
+  minZoom: 0.1,
+  duration: 400,
+};
 
 // TODO: Nodes and Edges are hardcoded for now to generate a renderable basic workflow
 // It shall be replaced by the actual implementation based on graph structure
@@ -48,9 +53,10 @@ export type DiagramRef = {
 export type DiagramProps = {
   divRef?: React.RefObject<HTMLDivElement | null>;
   ref?: React.Ref<DiagramRef>;
+  colorMode?: ColorMode;
 };
 
-export const Diagram = ({ divRef, ref }: DiagramProps) => {
+export const Diagram = ({ divRef, ref, colorMode = "system" }: DiagramProps) => {
   const [minimapVisible, setMinimapVisible] = React.useState(false);
   const [nodes, setNodes] = React.useState<RF.Node[]>(initialNodes);
   const [edges, setEdges] = React.useState<RF.Edge[]>(initialEdges);
@@ -89,6 +95,7 @@ export const Diagram = ({ divRef, ref }: DiagramProps) => {
         preventScrolling={true}
         selectionOnDrag={true}
         fitView
+        colorMode={colorMode}
       >
         {minimapVisible && <RF.MiniMap pannable zoomable position={"top-right"} />}
 

packages/serverless-workflow-diagram-editor/src/types/colorMode.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021-Present The Serverless Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type ColorMode = "light" | "dark" | "system";

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.stories.ts

@@ -38,5 +38,6 @@ export const Component: Story = {
     isReadOnly: true,
     locale: "en",
     content: "", // TODO: Replace with a sample workflow YAML once diagram renders from model
+    colorMode: "system",
   },
 };

packages/serverless-workflow-diagram-editor/stories/DiagramEditor.tsx

@@ -23,7 +23,12 @@ import {
 export const DiagramEditor = ({ ...props }: DiagramEditorProps) => {
   return (
     <div style={{ height: "100vh" }}>
-      <Component content={props.content} isReadOnly={props.isReadOnly} locale={props.locale} />
+      <Component
+        content={props.content}
+        isReadOnly={props.isReadOnly}
+        locale={props.locale}
+        colorMode={props.colorMode}
+      />
     </div>
   );
 };

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.story.test.tsx

@@ -32,7 +32,9 @@ describe("Story - DiagramEditor component", () => {
     const locale = "en";
     const isReadOnly = true;
 
-    render(<Component content={BASIC_VALID_WORKFLOW_YAML} locale={locale} isReadOnly={isReadOnly} />);
+    render(
+      <Component content={BASIC_VALID_WORKFLOW_YAML} locale={locale} isReadOnly={isReadOnly} />,
+    );
 
     const reactFlowContainer = screen.getByTestId("diagram-container");
 

packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx

@@ -28,7 +28,9 @@ describe("DiagramEditor Component", () => {
     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} />,
+    );
 
     const reactFlowContainer = screen.getByTestId("diagram-container");