percona · dmitri-saricev-3pillargloball · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025 · Oct 20, 2025
@@ -1,4 +1,4 @@
-import { locationService } from '@grafana/runtime';
+import { locationService, getAppEvents, ThemeChangedEvent, config } from '@grafana/runtime';
 import {
   ChangeThemeMessage,
   CrossFrameMessenger,
@@ -33,36 +33,29 @@ export const initialize = () => {
       if (!msg.payload) {
         return;
       }
-
       changeTheme(msg.payload.theme);
     },
   });
 
-  messenger.sendMessage({
-    type: 'MESSENGER_READY',
-  });
+  messenger.sendMessage({ type: 'MESSENGER_READY' });
 
   // set docked state to false
   localStorage.setItem(GRAFANA_DOCKED_MENU_OPEN_LOCAL_STORAGE_KEY, 'false');
 
   applyCustomStyles();
-
   adjustToolbar();
 
-  // sync with PMM UI theme
-  changeTheme('light');
+  // Wire Grafana theme events to Percona scheme attribute and notify parent
+  setupThemeWiring();
 
-  messenger.sendMessage({
-    type: 'GRAFANA_READY',
-  });
+  messenger.sendMessage({ type: 'GRAFANA_READY' });
 
   messenger.addListener({
     type: 'LOCATION_CHANGE',
     onMessage: ({ payload: location }: LocationChangeMessage) => {
       if (!location) {
         return;
       }
-
       locationService.replace(location);
     },
   });
@@ -71,6 +64,7 @@ export const initialize = () => {
     type: 'DOCUMENT_TITLE_CHANGE',
     payload: { title: document.title },
   });
+
   documentTitleObserver.listen((title) => {
     messenger.sendMessage({
       type: 'DOCUMENT_TITLE_CHANGE',
@@ -108,10 +102,63 @@ export const initialize = () => {
       messenger.sendMessage({
         id: msg.id,
         type: msg.type,
-        payload: {
-          url: url,
-        },
+        payload: { url },
       });
     },
   });
 };
+
+/**
+ * Wires Grafana theme changes (ThemeChangedEvent) to Percona CSS scheme.
+ * Ensures <html> has the attribute our CSS reads and informs the parent frame.
+ */
+function setupThemeWiring() {
+  // Resolve parent origin robustly (dev vs prod)
+  const getParentOrigin = (): string => {
+    try {
+      const u = new URL(document.referrer);
+      return `${u.protocol}//${u.host}`;
+    } catch {
+      return '*';
+    }
+  };
+
+  const isDev =
+    location.hostname === 'localhost' ||
+    location.hostname === '127.0.0.1' ||
+    /^\d+\.\d+\.\d+\.\d+$/.test(location.hostname);
+
+  const targetOrigin = isDev ? '*' : getParentOrigin();
+
+  // Helper to apply our scheme attribute and notify parent
+  const apply = (incoming: 'light' | 'dark' | string) => {
+    // normalize to 'light' | 'dark'
+    const mode: 'light' | 'dark' = String(incoming).toLowerCase() === 'dark' ? 'dark' : 'light';
+
+    const html = document.documentElement;
+    const scheme = mode === 'dark' ? 'percona-dark' : 'percona-light';
+
+    // Set attributes our CSS reads
+    html.setAttribute('data-md-color-scheme', scheme);
+    html.setAttribute('data-theme', mode);
+    (html.style as CSSStyleDeclaration & { colorScheme: string }).colorScheme = mode;
+    // Notify outer PMM UI (new nav) to sync immediately
+    try {
+      const target = window.top && window.top !== window ? window.top : window.parent || window;
+      target?.postMessage({ type: 'grafana.theme.changed', payload: { mode } }, targetOrigin);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn('[pmm-compat] failed to post grafana.theme.changed:', err);
+    }
+  };
+
+  // Initial apply from current Grafana theme config
+  const initialMode = (config?.theme2?.colors?.mode === 'dark' ? 'dark' : 'light') as 'light' | 'dark';
+  apply(initialMode);
+
+  // React to Grafana theme changes (Preferences change/changeTheme())
+  getAppEvents().subscribe(ThemeChangedEvent, (evt: any) => {
+    const next = evt?.payload?.colors?.mode ?? (evt?.payload?.isDark ? 'dark' : 'light') ?? 'light';
+    apply(next);
+  });
+}
@@ -1,15 +1,62 @@
+// pmm-compat/src/providers/ThemeProvider.tsx
+// ------------------------------------------------------
+// Grafana-side theme provider + bridge:
+// 1) Mirrors Grafana theme into ThemeContext (for plugins).
+// 2) Applies canonical DOM attributes inside the iframe.
+// 3) Notifies host UI via postMessage so host can re-theme instantly.
+// ------------------------------------------------------
+
+import React, { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { ThemeContext } from '@grafana/data';
 import { config, getAppEvents, ThemeChangedEvent } from '@grafana/runtime';
-import React, { FC, PropsWithChildren, useEffect, useState } from 'react';
+
+type Mode = 'light' | 'dark';
 
 export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
   const [theme, setTheme] = useState(config.theme2);
+  const lastSentModeRef = useRef<Mode>(config.theme2.isDark ? 'dark' : 'light');
 
   useEffect(() => {
-    getAppEvents().subscribe(ThemeChangedEvent, (event) => {
+    // Apply DOM attributes for the current theme on mount.
+    applyIframeDomTheme(lastSentModeRef.current);
+    // Also notify host once on mount (defensive; host may already be in sync).
+    postModeToHost(lastSentModeRef.current);
+
+    const sub = getAppEvents().subscribe(ThemeChangedEvent, (event) => {
       setTheme(event.payload);
+      const mode: Mode = event?.payload?.isDark ? 'dark' : 'light';
+
+      // Update iframe DOM and notify the host UI.
+      applyIframeDomTheme(mode);
+
+      // De-duplicate messages to avoid noisy bridges.
+      if (lastSentModeRef.current !== mode) {
+        lastSentModeRef.current = mode;
+        postModeToHost(mode);
+      }
     });
+
+    // Unsubscribe on unmount (pmm-compat may be hot-reloaded in dev).
+    return () => sub.unsubscribe();
   }, []);
 
   return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 };
+
+// ----- helpers (iframe context) -----
+
+function applyIframeDomTheme(mode: Mode): void {
+  // Update DOM attributes used by CSS variables / tokens inside Grafana iframe.
+  const html = document.documentElement;
+  const scheme = mode === 'dark' ? 'percona-dark' : 'percona-light';
+  html.setAttribute('data-md-color-scheme', scheme);
+  html.setAttribute('data-theme', mode);
+  html.style.colorScheme = mode;
+}
+
+function postModeToHost(mode: Mode): void {
+  // Inform the parent (host) window. We intentionally use "*" here because
+  // host and iframe share origin in PMM, but in dev/proxy setups origin may differ.
+  // Host side should still validate origin.
+  window.parent?.postMessage({ type: 'grafana.theme.changed', payload: { mode } }, '*');
+}
@@ -2,16 +2,14 @@ import { getThemeById } from '@grafana/data';
 import { config, getAppEvents, ThemeChangedEvent } from '@grafana/runtime';
 
 /**
- * Changes theme to the provided one
- *
+ * Changes theme to the provided one.
  * Based on public/app/core/services/theme.ts in Grafana
- * @param themeId
  */
 export const changeTheme = async (themeId: 'light' | 'dark'): Promise<void> => {
   const oldTheme = config.theme2;
-
   const newTheme = getThemeById(themeId);
 
+  // Publish Grafana ThemeChangedEvent
   getAppEvents().publish(new ThemeChangedEvent(newTheme));
 
   // Add css file for new theme
@@ -20,19 +18,154 @@ export const changeTheme = async (themeId: 'light' | 'dark'): Promise<void> => {
     newCssLink.rel = 'stylesheet';
     newCssLink.href = config.bootData.assets[newTheme.colors.mode];
     newCssLink.onload = () => {
-      // Remove old css file
-      const bodyLinks = document.getElementsByTagName('link');
-      for (let i = 0; i < bodyLinks.length; i++) {
-        const link = bodyLinks[i];
-
+      // Remove old css file after the new one has loaded to avoid flicker
+      const links = document.getElementsByTagName('link');
+      for (let i = 0; i < links.length; i++) {
+        const link = links[i];
         if (link.href && link.href.includes(`build/grafana.${oldTheme.colors.mode}`)) {
-          // Remove existing link once the new css has loaded to avoid flickering
-          // If we add new css at the same time we remove current one the page will be rendered without css
-          // As the new css file is loading
           link.remove();
         }
       }
     };
     document.head.insertBefore(newCssLink, document.head.firstChild);
   }
 };
+
+/* ---------------------------
+ * Right → left theme wiring
+ * --------------------------*/
+
+// Normalize and apply <html> attributes so CSS-based nav updates immediately
+function applyHtmlTheme(modeRaw: unknown) {
+  const mode: 'light' | 'dark' = String(modeRaw).toLowerCase() === 'dark' ? 'dark' : 'light';
+  const html = document.documentElement;
+  const scheme = mode === 'dark' ? 'percona-dark' : 'percona-light';
+
+  if (html.getAttribute('data-theme') !== mode) {
+    html.setAttribute('data-theme', mode);
+  }
+  if (html.getAttribute('data-md-color-scheme') !== scheme) {
+    html.setAttribute('data-md-color-scheme', scheme);
+  }
+  (html.style as CSSStyleDeclaration).colorScheme = mode;
+
+  return mode;
+}
+
+const isIp = (h: string) => /^\d+\.\d+\.\d+\.\d+$/.test(h);
+const isDevHost = (h: string) => h === 'localhost' || h === '127.0.0.1' || isIp(h);
+
+const parseOrigin = (u: string | URL | null | undefined): string | null => {
+  try {
+    const url = typeof u === 'string' ? new URL(u) : u instanceof URL ? u : null;
+    return url ? `${url.protocol}//${url.host}` : null;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Resolve initial target origin (may be '*' in dev).
+ * - Dev: start with '*' to support split hosts/ports (vite + docker).
+ * - Prod: concrete origin (document.referrer → window.location.origin).
+ */
+function resolveInitialTargetOrigin(): string {
+  const loc = new URL(window.location.href);
+  if (isDevHost(loc.hostname)) {
+    return '*';
+  }
+  const ref = parseOrigin(document.referrer);
+  return ref ?? `${loc.protocol}//${loc.host}`;
+}
+
+/** Safely obtain a Window to post to (top if cross-framed, otherwise parent/self). */
+function resolveTargetWindow(): Window | null {
+  try {
+    if (window.top && window.top !== window) {
+      return window.top;
+    }
+    if (window.parent) {
+      return window.parent;
+    }
+  } catch (err) {
+    console.warn('[pmm-compat] Failed to send handshake:', err);
+  }
+  return window;
+}
+
+/** Runtime-locked origin (handshake will tighten '*' in dev). */
+const targetOriginRef = { current: resolveInitialTargetOrigin() };
+let lastSentMode: 'light' | 'dark' | null = null;
+
+/** Send helper that always uses the current locked origin. */
+function sendToParent(msg: unknown) {
+  const w = resolveTargetWindow();
+  if (!w) {
+    return;
+  }
+  w.postMessage(msg, targetOriginRef.current);
+}
+
+/** Dev-only handshake: lock '*' to the real origin after the first ACK. */
+(function setupOriginHandshake() {
+  const isDev = isDevHost(new URL(window.location.href).hostname);
+  if (!isDev || targetOriginRef.current !== '*') {
+    return;
+  }
+
+  // Ask parent for its origin once
+  try {
+    sendToParent({ type: 'pmm.handshake' });
+  } catch {
+    // ignore
+  }
+
+  const onAck = (e: MessageEvent<{ type?: string }>) => {
+    if (e?.data?.type !== 'pmm.handshake.ack') {
+      return;
+    }
+    // Lock to the explicit origin provided by the parent
+    targetOriginRef.current = e.origin || targetOriginRef.current;
+    window.removeEventListener('message', onAck);
+  };
+  window.addEventListener('message', onAck);
+})();
+
+// Initial apply from current Grafana theme and notify parent once
+(function initThemeBridge() {
+  const initial: 'light' | 'dark' = config?.theme2?.colors?.mode === 'dark' ? 'dark' : 'light';
+  const mode = applyHtmlTheme(initial);
+  try {
+    if (lastSentMode !== mode) {
+      sendToParent({ type: 'grafana.theme.changed', payload: { mode } });
+      lastSentMode = mode;
+    }
+  } catch (err) {
+    console.warn('[pmm-compat] failed to post initial grafana.theme.changed:', err);
+  }
+})();
+
+// React to Grafana ThemeChangedEvent (Preferences change/changeTheme())
+getAppEvents().subscribe(ThemeChangedEvent, (evt: unknown) => {
+  try {
+    // Type guard for expected payload structure
+    if (typeof evt === 'object' && evt !== null && 'payload' in evt) {
+      const payload = (evt as { payload?: unknown }).payload;
+      const next =
+        typeof payload === 'object' && payload !== null && 'colors' in payload
+          ? (payload as { colors?: { mode?: string }; isDark?: boolean }).colors?.mode ??
+            ((payload as { isDark?: boolean }).isDark ? 'dark' : 'light') ??
+            'light'
+          : 'light';
+
+      const mode = applyHtmlTheme(next);
+
+      if (lastSentMode !== mode) {
+        sendToParent({ type: 'grafana.theme.changed', payload: { mode } });
+        lastSentMode = mode;
+      }
+    }
+  } catch (err) {
+    console.warn('[pmm-compat] Failed to handle ThemeChangedEvent/postMessage:', err);
+  }
+});