Merge pull request #844 from posit-dev/dotnomad/match-vscode-theme-mode

Match extension theme to VSCode theme mode

web/src/App.vue

@@ -17,16 +17,10 @@
 </template>
 
 <script setup lang="ts">
-
-import { useQuasar } from 'quasar';
-
 import AppHeader from 'src/components/AppHeader.vue';
 import { onBeforeUnmount } from 'vue';
 import { useEventStore } from 'src/stores/events';
 
-const $q = useQuasar();
-$q.dark.set('auto');
-
 const eventStore = useEventStore();
 
 // Have to be sure to close connection or it will be leaked on agent (if it continues to run)

web/src/components/AppHeader.vue

@@ -3,7 +3,7 @@
 <template>
   <q-header>
     <q-toolbar class="publisher-layout">
-      <AppMenu />
+      <AppMenu v-if="!vscode" />
       <q-toolbar-title>
         <PLink
           class="posit-logo-link text-white"
@@ -29,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+import { vscode } from 'src/vscode';
 import AppMenu from 'src/components/AppMenu.vue';
 import PLink from 'src/components/PLink.vue';
 import WhitePositLogo from 'src/components/icons/WhitePositLogo.vue';

web/src/main.ts

@@ -2,7 +2,7 @@
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import { Dark, Dialog, Quasar } from 'quasar';
+import { Dark, Dialog, Quasar, QuasarUIConfiguration } from 'quasar';
 
 // Import Quasar Roboto Font
 import '@quasar/extras/roboto-font/roboto-font.css';
@@ -17,13 +17,39 @@ import './style.css';
 import App from './App.vue';
 import { router } from './router';
 import eventStream from './plugins/eventStream';
+import { vscode, getVscodeTheme, onVscodeThemeChange } from './vscode';
 
 const pinia = createPinia();
 const app = createApp(App);
 
+const quasarUiConfig: QuasarUIConfiguration = { dark: 'auto' };
+if (vscode) {
+  switch (getVscodeTheme()) {
+    case 'light':
+      quasarUiConfig.dark = false;
+      break;
+    case 'dark':
+      quasarUiConfig.dark = true;
+      break;
+  }
+
+  onVscodeThemeChange((theme) => {
+    switch (theme) {
+      case 'light':
+      case 'high-contrast-light':
+        Dark.set(false);
+        break;
+      case 'dark':
+      case 'high-contrast-dark':
+        Dark.set(true);
+        break;
+    }
+  });
+}
+
 app.use(router);
 app.use(pinia);
-app.use(Quasar, { plugins: { Dark, Dialog } });
+app.use(Quasar, { config: quasarUiConfig, plugins: { Dark, Dialog } });
 app.use(eventStream);
 
 app.mount('#app');

web/src/vscode.ts

@@ -3,3 +3,47 @@
 export const vscode = typeof acquireVsCodeApi !== 'undefined' ?
   acquireVsCodeApi()
   : undefined;
+
+export type VscodeTheme =
+  'light' |
+  'dark' |
+  'high-contrast-dark' |
+  'high-contrast-light';
+
+const themeFromClassList = (classes: DOMTokenList): VscodeTheme | undefined => {
+  if (classes.contains('vscode-light')) {
+    return 'light';
+  } else if (classes.contains('vscode-dark')) {
+    return 'dark';
+  } else if (classes.contains('vscode-high-contrast')) {
+    return 'high-contrast-dark';
+  } else if (classes.contains('vscode-high-contrast-light')) {
+    return 'high-contrast-light';
+  }
+};
+
+export const getVscodeTheme = (): VscodeTheme | undefined => {
+  return themeFromClassList(document.body.classList);
+};
+
+export const onVscodeThemeChange = (callback: (theme: VscodeTheme | undefined) => void) => {
+  let lastTheme = getVscodeTheme();
+
+  const observer = new MutationObserver((mutationList) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        if (mutation.target instanceof Element) {
+          const theme = themeFromClassList(mutation.target.classList);
+          if (lastTheme !== theme) {
+            callback(theme);
+            lastTheme = theme;
+            break;
+          }
+        }
+      }
+    }
+  });
+
+  observer.observe(document.body, { attributes: true });
+  return observer;
+};