diff --git a/packages/vscode/src/plugins/prisma-studio/commands/launch/getColorScheme.ts b/packages/vscode/src/plugins/prisma-studio/commands/launch/getColorScheme.ts
new file mode 100644
index 0000000000..693069191e
--- /dev/null
+++ b/packages/vscode/src/plugins/prisma-studio/commands/launch/getColorScheme.ts
@@ -0,0 +1,16 @@
+import { ColorThemeKind, window } from 'vscode'
+
+export function getColorScheme(): string {
+ const currentThemeKind = window.activeColorTheme.kind
+ let colorScheme = 'light'
+ switch (currentThemeKind) {
+ case ColorThemeKind.Dark:
+ colorScheme = 'dark'
+ case ColorThemeKind.Light:
+ colorScheme = 'light'
+ case ColorThemeKind.HighContrast:
+ colorScheme = 'dark'
+ }
+
+ return colorScheme
+}
diff --git a/packages/vscode/src/plugins/prisma-studio/commands/launch/getStudioPageHtml.ts b/packages/vscode/src/plugins/prisma-studio/commands/launch/getStudioPageHtml.ts
index 61ee01accf..95bc7c747d 100644
--- a/packages/vscode/src/plugins/prisma-studio/commands/launch/getStudioPageHtml.ts
+++ b/packages/vscode/src/plugins/prisma-studio/commands/launch/getStudioPageHtml.ts
@@ -1,8 +1,8 @@
-export function getAppRootHtml(args: { serverUrl: string }): string {
- const { serverUrl } = args
+export function getAppRootHtml(args: { serverUrl: string; colorScheme: string }): string {
+ const { serverUrl, colorScheme } = args
return `
-
+
diff --git a/packages/vscode/src/plugins/prisma-studio/commands/launch/startStudioServer.ts b/packages/vscode/src/plugins/prisma-studio/commands/launch/startStudioServer.ts
index afa6fc333f..a085c54a5a 100644
--- a/packages/vscode/src/plugins/prisma-studio/commands/launch/startStudioServer.ts
+++ b/packages/vscode/src/plugins/prisma-studio/commands/launch/startStudioServer.ts
@@ -1,5 +1,6 @@
import { ExtensionContext, Uri } from 'vscode'
import { getAppRootHtml } from './getStudioPageHtml'
+import { getColorScheme } from './getColorScheme'
import { Hono } from 'hono'
import path from 'path'
import { readFile } from 'fs/promises'
@@ -40,9 +41,12 @@ export async function startStudioServer(args: { dbUrl: string; context: Extensio
return c.json([null, results])
})
+ // colorScheme
+ const colorScheme = getColorScheme()
+
// gives access and renders the main studio page
app.get('/', (c) => {
- return c.html(getAppRootHtml({ serverUrl }))
+ return c.html(getAppRootHtml({ serverUrl, colorScheme }))
})
// gives access to client side rendering resources