support dark mode (#95)

andrew-centml · Andrew Tham · web-flow · commit ffd6a31f55bd · 2024-12-05T15:19:57.000-05:00
Co-authored-by: Andrew Tham &lt;andrewtham@Andrews-MacBook-Pro.local&gt;
diff --git a/deepview-explore/react-ui/package.json b/deepview-explore/react-ui/package.json
@@ -17,7 +17,7 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@centml/deepview-ui": "^0.1.5",
+		"@centml/deepview-ui": "^0.1.7",
 		"@centml/ui": "^1.8.9",
 		"@testing-library/react": "^14.2.2",
 		"@types/node": "^20.12.2",
diff --git a/deepview-explore/react-ui/src/layout/Layout.tsx b/deepview-explore/react-ui/src/layout/Layout.tsx
@@ -6,7 +6,7 @@ const Layout = ({ children }: PropsWithChildren) => {
 	return (
 		<div className="flex h-screen flex-col">
 			<Header />
-			<div className="flex grow flex-col bg-gray-100 px-4">
+			<div className="flex grow flex-col bg-gray-100 px-4 dark:bg-neutral-900">
 				<TabGroup
 					items={[
 						{
diff --git a/deepview-explore/src/skyline_session.ts b/deepview-explore/src/skyline_session.ts
@@ -401,12 +401,13 @@ export class SkylineSession {
         const scriptUri = this.webviewPanel.webview.asWebviewUri(scriptPathOnDisk);
         const stylePathOnDisk = vscode.Uri.file(path.join(buildPath, 'build', mainStyle));
         const styleUri = this.webviewPanel.webview.asWebviewUri(stylePathOnDisk);
+        const themeClass = vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark ? 'dark' : 'light';
 
 		// Use a nonce to whitelist which scripts can be run
 		const nonce = crypto.randomBytes(16).toString('base64');
 
 		return `<!DOCTYPE html>
-			<html lang="en">
+			<html lang="en" class="${themeClass}">
 			<head>
 				<meta charset="utf-8">
 				<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const Layout = ({ children }: PropsWithChildren) => {`
`6`	`6`	`return (`
`7`	`7`	`<div className="flex h-screen flex-col">`
`8`	`8`	`<Header />`
`9`		`- <div className="flex grow flex-col bg-gray-100 px-4">`
	`9`	`+ <div className="flex grow flex-col bg-gray-100 px-4 dark:bg-neutral-900">`
`10`	`10`	`<TabGroup`
`11`	`11`	`items={[`
`12`	`12`	`{`