diff --git a/CHANGELOG.md b/CHANGELOG.md
index a39f46ac29b5e..9ab1ad3f7c43f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,8 @@
 - [terminal] removed deprecated `activateTerminal` method in favor of `open`. [#10529](https://github.com/eclipse-theia/theia/pull/10529)
 - [core] removed deprecated `activeChanged` signal emitter in favor of `onDidChangeActiveWidget` [#10515](https://github.com/eclipse-theia/theia/pull/10515)
 - [core] removed deprecated `currentChanged` signal emitter in favor of `onDidChangeCurrentWidget` [#10515](https://github.com/eclipse-theia/theia/pull/10515)
+- [plugin] changed return type of `WebviewThemeDataProvider.getActiveTheme()` to `Theme` instead of `WebviewThemeType` [#10493](https://github.com/eclipse-theia/theia/pull/10493)
+- [plugin] renamed `WebviewThemeData.activeTheme` to `activeThemeType` [#10493](https://github.com/eclipse-theia/theia/pull/10493)
 
 ## v1.20.0 - 11/25/2021
 
diff --git a/packages/plugin-ext/src/main/browser/webview/pre/main.js b/packages/plugin-ext/src/main/browser/webview/pre/main.js
index dd63123307008..37ab3a65bdad7 100644
--- a/packages/plugin-ext/src/main/browser/webview/pre/main.js
+++ b/packages/plugin-ext/src/main/browser/webview/pre/main.js
@@ -204,7 +204,9 @@
 
             if (body) {
                 body.classList.remove('vscode-light', 'vscode-dark', 'vscode-high-contrast');
-                body.classList.add(initData.activeTheme);
+                body.classList.add(initData.activeThemeType);
+                body.setAttribute('data-vscode-theme-kind', initData.activeThemeType);
+                body.setAttribute('data-vscode-theme-name', initData.activeThemeName);
             }
 
             if (initData.styles) {
@@ -409,7 +411,8 @@
 
             host.onMessage('styles', (_event, data) => {
                 initData.styles = data.styles;
-                initData.activeTheme = data.activeTheme;
+                initData.activeThemeType = data.activeThemeType;
+                initData.activeThemeName = data.activeThemeName;
 
                 const target = getActiveFrame();
                 if (!target) {
diff --git a/packages/plugin-ext/src/main/browser/webview/webview-theme-data-provider.ts b/packages/plugin-ext/src/main/browser/webview/webview-theme-data-provider.ts
index 394b1d5291740..0f311485dc216 100644
--- a/packages/plugin-ext/src/main/browser/webview/webview-theme-data-provider.ts
+++ b/packages/plugin-ext/src/main/browser/webview/webview-theme-data-provider.ts
@@ -22,13 +22,14 @@
 import { inject, postConstruct, injectable } from '@theia/core/shared/inversify';
 import { Emitter } from '@theia/core/lib/common/event';
 import { EditorPreferences, EditorConfiguration } from '@theia/editor/lib/browser/editor-preferences';
-import { ThemeService } from '@theia/core/lib/browser/theming';
+import { Theme, ThemeService } from '@theia/core/lib/browser/theming';
 import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
 import { ColorApplicationContribution } from '@theia/core/lib/browser/color-application-contribution';
 
 export type WebviewThemeType = 'vscode-light' | 'vscode-dark' | 'vscode-high-contrast';
 export interface WebviewThemeData {
-    readonly activeTheme: WebviewThemeType;
+    readonly activeThemeName: string;
+    readonly activeThemeType: WebviewThemeType;
     readonly styles: { readonly [key: string]: string | number; };
 }
 
@@ -104,11 +105,18 @@ export class WebviewThemeDataProvider {
         }
 
         const activeTheme = this.getActiveTheme();
-        return { styles, activeTheme };
+        return {
+            styles,
+            activeThemeName: activeTheme.label,
+            activeThemeType: this.getThemeType(activeTheme)
+        };
+    }
+
+    protected getActiveTheme(): Theme {
+        return ThemeService.get().getCurrentTheme();
     }
 
-    protected getActiveTheme(): WebviewThemeType {
-        const theme = ThemeService.get().getCurrentTheme();
+    protected getThemeType(theme: Theme): WebviewThemeType {
         switch (theme.type) {
             case 'light': return 'vscode-light';
             case 'dark': return 'vscode-dark';
diff --git a/packages/plugin-ext/src/main/browser/webview/webview.ts b/packages/plugin-ext/src/main/browser/webview/webview.ts
index e516fa7ef3f58..1ee940e5bc342 100644
--- a/packages/plugin-ext/src/main/browser/webview/webview.ts
+++ b/packages/plugin-ext/src/main/browser/webview/webview.ts
@@ -420,8 +420,8 @@ export class WebviewWidget extends BaseWidget implements StatefulWidget {
     }
 
     protected style(): void {
-        const { styles, activeTheme } = this.themeDataProvider.getThemeData();
-        this.doSend('styles', { styles, activeTheme });
+        const { styles, activeThemeType, activeThemeName } = this.themeDataProvider.getThemeData();
+        this.doSend('styles', { styles, activeThemeType, activeThemeName });
     }
 
     protected openLink(link: URI): void {