fix: check theme by body className

Author: gera2ld

src/app.ts

@@ -75,9 +75,7 @@ const handlers = {
     }
     style.textContent = data || '';
   },
-  setTheme(dark: boolean) {
-    document.documentElement.classList[dark ? 'add' : 'remove']('markmap-dark');
-  },
+  checkTheme,
   downloadSvg(path: string) {
     const content = new XMLSerializer().serializeToString(mm.svg.node());
     vscode.postMessage({ type: 'downloadSvg', data: { content, path } });
@@ -132,12 +130,22 @@ toolbar.setItems([
 ]);
 const highlightEl = document.createElement('div');
 highlightEl.className = 'markmap-highlight-area';
+checkTheme();
+
 setTimeout(() => {
   toolbar.attach(mm);
   document.body.append(toolbar.el);
   checkHighlight();
 });
 
+function checkTheme() {
+  // https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content
+  const isDark = ['vscode-dark', 'vscode-high-contrast'].some((cls) =>
+    document.body.classList.contains(cls),
+  );
+  document.documentElement.classList[isDark ? 'add' : 'remove']('markmap-dark');
+}
+
 function createButton(text: string) {
   const el = document.createElement('div');
   el.className = 'btn-text';

src/extension.ts

@@ -3,7 +3,6 @@ import { JSItem, type CSSItem } from 'markmap-common';
 import { fillTemplate } from 'markmap-render';
 import { type IMarkmapJSONOptions } from 'markmap-view';
 import {
-  ColorThemeKind,
   CustomTextEditorProvider,
   ExtensionContext,
   Position,
@@ -150,12 +149,8 @@ class MarkmapEditor implements CustomTextEditorProvider {
       });
     };
     const updateTheme = () => {
-      const dark = [ColorThemeKind.Dark, ColorThemeKind.HighContrast].includes(
-        vscodeWindow.activeColorTheme.kind,
-      );
       webviewPanel.webview.postMessage({
-        type: 'setTheme',
-        data: dark,
+        type: 'checkTheme',
       });
     };
     const update = () => {