#1947 Test Harness should support Light and Dark Mode. (#1948)

Signed-off-by: srikant <[email protected]>
elyra-ai · May 21, 2024 · 08d1c3b · 08d1c3b
1 parent d1c7dad
commit 08d1c3b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/canvas_modules/harness/assets/styles/harness.scss b/canvas_modules/harness/assets/styles/harness.scss
@@ -23,9 +23,16 @@ $theme: $g10; // The light (gray 10) theme
 // $theme: $g90; // The dark theme
 
 :root {
-	@include theme();
+	@include theme($g10);
 }
 
+[data-carbon-theme="g90"] {
+	@include theme($g90);
+}
+
+[data-carbon-theme="g10"] {
+	@include theme($g10);
+}
 // Common variables for App.scss and sidepanel.scss
 $harness-header-height: 50px;
 $harness-sidepanel-width: 320px;

diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js
@@ -87,7 +87,7 @@ import { Add, Api_1 as Api, Chat, ChatOff, ColorPalette, Download, Edit, FlowDat
 	Help, OpenPanelFilledBottom, Play, Scale, Settings, SelectWindow,
 	StopFilledAlt, Subtract, TextScale, TouchInteraction } from "@carbon/react/icons";
 
-import { InlineLoading, Checkbox, Button, OverflowMenu, OverflowMenuItem } from "@carbon/react";
+import { InlineLoading, Checkbox, Button, OverflowMenu, OverflowMenuItem, Toggle } from "@carbon/react";
 
 import {
 	SIDE_PANEL_CANVAS,
@@ -148,6 +148,7 @@ import FormsService from "./services/FormsService";
 
 import ExpressionInfo from "./constants/json/functionlist.json";
 
+
 class App extends React.Component {
 	constructor(props) {
 		super(props);
@@ -259,6 +260,7 @@ class App extends React.Component {
 			displayAdditionalComponents: false,
 			heading: false,
 			light: true,
+			lightTheme: false,
 			showRequiredIndicator: true,
 			showAlertsTab: true,
 			enableResize: true,
@@ -2395,6 +2397,15 @@ class App extends React.Component {
 		);
 	}
 
+	handleThemeChange() {
+		document.documentElement.setAttribute("data-carbon-theme", this.state.lightTheme ? "g10" : "g90");
+
+		this.setState((prevState) => ({
+			...prevState,
+			lightTheme: !prevState.lightTheme,
+		}));
+	}
+
 	render() {
 		this.canvasController.log("-------------------------------");
 		this.canvasController.log("Test Harness render");
@@ -2409,6 +2420,7 @@ class App extends React.Component {
 		const consoleLabel = "console";
 		const downloadFlowLabel = "Download pipeline flow";
 		const downloadPaletteLabel = "Download palette";
+		const switchTheme = "Switch Theme";
 		const apiLabel = "Common Canvas API";
 		const docsLabel = "Elyra Canvas Docs";
 		const commonPropertiesModalLabel = "Common Properties";
@@ -2441,6 +2453,17 @@ class App extends React.Component {
 					<li className="harness-navbar-li harness-pipeline-breadcrumbs-container">
 						{breadcrumbs}
 					</li>
+					<li className="harness-navbar-li" data-tooltip-id="toolbar-tooltip" data-tooltip-content={switchTheme}>
+						<Toggle
+							id="harness-toggle-theme"
+							size="sm"
+							labelA="Light"
+							labelB="Dark"
+							toggled={this.state.lightTheme}
+							onToggle={this.handleThemeChange.bind(this)}
+							className="toggle-theme"
+						/>
+					</li>
 					<li id="harness-action-bar-sidepanel-properties" className="harness-navbar-li harness-nav-divider harness-action-bar-sidepanel"
 						data-tooltip-id="toolbar-tooltip" data-tooltip-content={commonPropertiesModalLabel}
 					>

diff --git a/canvas_modules/harness/src/styles/App.scss b/canvas_modules/harness/src/styles/App.scss
@@ -113,7 +113,7 @@ $harness-navbar-icon-width: 48px;
 	display: block;
 	align-items: center;
 
-	a {
+	a, .toggle-theme {
 		display: block;
 		text-align: center;
 		padding: 14px;
@@ -130,6 +130,10 @@ $harness-navbar-icon-width: 48px;
 			color: $icon_primary;
 		}
 	}
+
+	.toggle-theme {
+		width: 65px;
+	}
 }
 
 .harness-action-bar-sidepanel {