Merge pull request #833 from Lemoncode/feature/vscode-theming

Feature/vscode-theming

Author: nasdan

apps/web/src/core/vscode/use-vscode-sync.hook.ts

@@ -1,6 +1,7 @@
 import { useHeadlessRenderComplete } from './use-headless-render-complete.hook';
 import { useVSCodeAutoSave } from './use-vscode-auto-save.hook';
 import { useVSCodeFileLoad } from './use-vscode-file-load.hook';
+import { useVSCodeTheme } from './use-vscode-theme.hook';
 
 /**
  * Wires the full VS Code webview bridge. Each inner hook no-ops when not
@@ -10,4 +11,5 @@ export function useVSCodeSync(): void {
   const hasReceivedFileRef = useVSCodeFileLoad();
   useVSCodeAutoSave(hasReceivedFileRef);
   useHeadlessRenderComplete(hasReceivedFileRef);
+  useVSCodeTheme();
 }

apps/web/src/core/vscode/use-vscode-theme.hook.ts

@@ -0,0 +1,35 @@
+import { isVSCodeEnv } from '#common/utils/env.utils';
+import { onMessage } from '#common/utils/vscode-bridge.utils';
+import {
+  HOST_MESSAGE_TYPE,
+  type ThemePayload,
+} from '@lemoncode/quickmock-bridge-protocol';
+import { useEffect } from 'react';
+
+const CSS_VAR_MAP: Record<keyof ThemePayload, readonly string[]> = {
+  background: ['--primary-100', '--primary-200'],
+  backgroundSecondary: ['--pure-white'],
+  foreground: ['--primary-700'],
+};
+
+const applyTheme = (theme: ThemePayload): void => {
+  const root = document.documentElement;
+  for (const [key, cssVars] of Object.entries(CSS_VAR_MAP)) {
+    const value = theme[key as keyof ThemePayload];
+    if (!value) continue;
+    for (const cssVar of cssVars) {
+      root.style.setProperty(cssVar, value);
+    }
+  }
+  if (theme.background)
+    document.body.style.setProperty('background-color', theme.background);
+  if (theme.foreground)
+    document.body.style.setProperty('color', theme.foreground);
+};
+
+export const useVSCodeTheme = (): void => {
+  useEffect(() => {
+    if (!isVSCodeEnv()) return;
+    return onMessage(HOST_MESSAGE_TYPE.THEME, applyTheme);
+  }, []);
+};

apps/web/src/scenes/main.module.css

@@ -1,7 +1,7 @@
 .leftTools {
   position: relative;
   z-index: 2;
-  background-color: white;
+  background-color: var(--pure-white);
   grid-area: leftTools;
   border-right: 1px solid black;
   display: inline-flex;
@@ -12,7 +12,7 @@
 .rightTools {
   position: relative;
   z-index: 2;
-  background-color: white;
+  background-color: var(--pure-white);
   grid-area: rightTools;
   border-left: 1px solid black;
 }

apps/web/src/scenes/main.scene.tsx

@@ -1,7 +1,7 @@
 import { MainLayout } from '#layout/main.layout';
 import classes from './main.module.css';
 
-import { isHeadlessEnv } from '#common/utils/env.utils.ts';
+import { isHeadlessEnv, isVSCodeEnv } from '#common/utils/env.utils';
 import { useInteractionModeContext } from '#core/providers';
 import {
   BasicShapesGalleryPod,
@@ -81,9 +81,11 @@ export const MainScene = () => {
           <PropertiesPod />
         </div>
       )}
-      <div className={classes.footer}>
-        <FooterPod />
-      </div>
+      {!isVSCodeEnv() && (
+        <div className={classes.footer}>
+          <FooterPod />
+        </div>
+      )}
     </MainLayout>
   );
 };

packages/bridge-protocol/src/constant.ts

@@ -2,6 +2,7 @@ export const HOST_MESSAGE_TYPE = {
   LOAD: 'qm:load',
   SAVED: 'qm:saved',
   LOAD_FILE: 'LOAD_FILE',
+  THEME: 'qm:theme',
 } as const;
 
 export const APP_MESSAGE_TYPE = {

packages/bridge-protocol/src/model.ts

@@ -12,13 +12,20 @@ export interface LoadFilePayload {
   fileName: string;
 }
 
+export interface ThemePayload {
+  background: string;
+  backgroundSecondary: string;
+  foreground: string;
+}
+
 export type HostMessage =
   | {
       type: typeof HOST_MESSAGE_TYPE.LOAD;
       payload: { content: string; fileName: string };
     }
   | { type: typeof HOST_MESSAGE_TYPE.SAVED }
-  | { type: typeof HOST_MESSAGE_TYPE.LOAD_FILE; payload: LoadFilePayload };
+  | { type: typeof HOST_MESSAGE_TYPE.LOAD_FILE; payload: LoadFilePayload }
+  | { type: typeof HOST_MESSAGE_TYPE.THEME; payload: ThemePayload };
 
 export type AppMessage =
   | { type: typeof APP_MESSAGE_TYPE.READY }

packages/vscode-extension/src/webview/main.ts

@@ -1,4 +1,5 @@
 import { setupBridge } from './bridge';
+import { setupThemeSync } from './theme';
 
 const appUrl = document.body.dataset.appUrl;
 if (!appUrl) {
@@ -18,3 +19,4 @@ iframe.title = 'QuickMock Application';
 document.body.appendChild(iframe);
 
 setupBridge(iframe, appOrigin);
+setupThemeSync(iframe, appOrigin);

packages/vscode-extension/src/webview/theme.ts

@@ -0,0 +1,53 @@
+import {
+  APP_MESSAGE_TYPE,
+  HOST_MESSAGE_TYPE,
+  type ThemePayload,
+} from '@lemoncode/quickmock-bridge-protocol';
+
+const readVar = (style: CSSStyleDeclaration, name: string): string =>
+  style.getPropertyValue(name).trim();
+
+export const extractTheme = (): ThemePayload => {
+  const style = getComputedStyle(document.documentElement);
+  return {
+    background: readVar(style, '--vscode-editor-background'),
+    backgroundSecondary: readVar(style, '--vscode-sideBar-background'),
+    foreground: readVar(style, '--vscode-editor-foreground'),
+  };
+};
+
+const IFRAME_READY_TYPES: ReadonlySet<string> = new Set([
+  APP_MESSAGE_TYPE.WEBVIEW_READY,
+  APP_MESSAGE_TYPE.READY,
+]);
+
+export const setupThemeSync = (
+  iframe: HTMLIFrameElement,
+  appOrigin: string
+): void => {
+  const sendTheme = (): void => {
+    iframe.contentWindow?.postMessage(
+      { type: HOST_MESSAGE_TYPE.THEME, payload: extractTheme() },
+      appOrigin
+    );
+  };
+
+  const onIframeReady = (event: MessageEvent): void => {
+    if (event.origin !== appOrigin) return;
+    const type = (event.data as { type?: string } | undefined)?.type;
+    if (type && IFRAME_READY_TYPES.has(type)) sendTheme();
+  };
+  window.addEventListener('message', onIframeReady);
+
+  let rafId = 0;
+  const sendThemeDebounced = (): void => {
+    cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(sendTheme);
+  };
+
+  const observer = new MutationObserver(sendThemeDebounced);
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['class', 'style'],
+  });
+};