feat: Real-time reflection of VSCode theme appearance

packages/erd-editor-vscode-webview/package.json

@@ -29,6 +29,7 @@
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.0.4",
+    "vite": "^5.2.8"
   }
 }

packages/erd-editor-vscode-webview/src/env.d.ts

@@ -1 +1,2 @@
 /// <reference types="@types/vscode-webview" />
+/// <reference types="vite/client" />

packages/erd-editor-vscode-webview/src/index.ts

@@ -8,6 +8,7 @@ import {
 import { ReplicationStoreWorker } from '@dineug/erd-editor-replication-store-worker';
 import {
   AnyAction,
+  Appearance,
   Emitter,
   ThemeOptions,
   vscodeExportFileAction,
@@ -29,6 +30,8 @@ const replicationStoreWorker = new ReplicationStoreWorker({
 });
 const loading = document.querySelector('#loading');
 
+let appearance: Appearance | 'auto' = 'dark';
+
 const dispatch = (action: AnyAction) => {
   vscode.postMessage(action);
 };
@@ -53,12 +56,22 @@ setExportFileCallback(async (blob, options) => {
   );
 });
 
-const getSystemTheme = () =>
-  document.body.classList.contains('vscode-light') ? 'light' : 'dark';
+function getSystemTheme(): Appearance {
+  const themeKind = document.body.dataset.vscodeThemeKind;
+
+  return themeKind
+    ? themeKind === 'vscode-light'
+      ? Appearance.light
+      : Appearance.dark
+    : document.body.classList.contains('vscode-light')
+      ? Appearance.light
+      : Appearance.dark;
+}
 
 const handleChangePresetTheme = (event: Event) => {
   const e = event as CustomEvent<ThemeOptions>;
   dispatch(vscodeSaveThemeAction(e.detail));
+  appearance = e.detail.appearance;
 };
 
 bridge.on({
@@ -96,6 +109,10 @@ bridge.on({
     dispatchWorker(action);
   },
   webviewUpdateTheme: ({ payload }) => {
+    if (payload.appearance) {
+      appearance = payload.appearance;
+    }
+
     editor.setPresetTheme({
       ...payload,
       appearance:
@@ -107,6 +124,18 @@ bridge.on({
   },
 });
 
+const observer = new MutationObserver(() => {
+  if (appearance === 'auto') {
+    editor.setPresetTheme({
+      appearance: getSystemTheme(),
+    });
+  }
+});
+observer.observe(document.body, {
+  attributes: true,
+  attributeFilter: ['class', 'data-vscode-theme-kind'],
+});
+
 workerBridge.on({
   vscodeSaveValue: action => {
     dispatch(action);