PMM-14560: Improve theme switching synchronization

- Publish ThemeChangedEvent after CSS loads for better sync
- Subscribe to ThemeChangedEvent in SharedPreferences dropdown
- Add CSS load error handling to prevent stuck UI state
- Fix TypeScript types to use GrafanaTheme2 properly

Fixes visual lag between theme dropdown and content rendering.

Author: dmitri-saricev-3pillargloball

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -1,10 +1,11 @@
 import { css } from '@emotion/css';
 import { PureComponent } from 'react';
 import * as React from 'react';
+import type { Unsubscribable } from 'rxjs';
 
-import { FeatureState, getBuiltInThemes, ThemeRegistryItem } from '@grafana/data';
+import { FeatureState, getBuiltInThemes, ThemeRegistryItem, type GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { config, reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction, getAppEvents, ThemeChangedEvent, type BusEventWithPayload } from '@grafana/runtime';
 import { Preferences as UserPreferencesDTO } from '@grafana/schema/src/raw/preferences/x/preferences_types.gen';
 import {
   Button,
@@ -26,6 +27,7 @@ import { t, Trans } from 'app/core/internationalization';
 import { LANGUAGES, PSEUDO_LOCALE } from 'app/core/internationalization/constants';
 import { PreferencesService } from 'app/core/services/PreferencesService';
 import { changeTheme } from 'app/core/services/theme';
+
 export interface Props {
   resourceUri: string;
   disabled?: boolean;
@@ -67,6 +69,7 @@ function getLanguageOptions(): ComboboxOption[] {
 export class SharedPreferences extends PureComponent<Props, State> {
   service: PreferencesService;
   themeOptions: ComboboxOption[];
+  private themeChangedSub?: Unsubscribable;
 
   constructor(props: Props) {
     super(props);
@@ -121,6 +124,33 @@ export class SharedPreferences extends PureComponent<Props, State> {
       queryHistory: prefs.queryHistory,
       navbar: prefs.navbar,
     });
+
+    // Subscribe to theme changes to keep the dropdown in sync with the actual theme.
+    // This ensures the dropdown reflects theme changes from any source (system preferences,
+    // other UI components, etc.), not just from this component's dropdown selection.
+    const eventBus = getAppEvents();
+    if (eventBus && typeof eventBus.subscribe === 'function') {
+      this.themeChangedSub = eventBus.subscribe(ThemeChangedEvent, (evt: BusEventWithPayload<GrafanaTheme2>) => {
+        try {
+          const newTheme = evt.payload;
+          const mode = newTheme.colors.mode;
+
+          if (this.state.theme !== mode) {
+            this.setState({ theme: mode });
+          }
+        } catch (err) {
+          console.warn('[SharedPreferences] Failed to sync theme from ThemeChangedEvent:', err);
+        }
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    try {
+      this.themeChangedSub?.unsubscribe();
+    } catch (err) {
+      console.warn('[SharedPreferences] Failed to unsubscribe ThemeChangedEvent:', err);
+    }
   }
 
   onSubmitForm = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -135,7 +165,9 @@ export class SharedPreferences extends PureComponent<Props, State> {
   };
 
   onThemeChanged = (value: ComboboxOption<string>) => {
+    // Update state immediately so the form has the correct value when saving
     this.setState({ theme: value.value });
+
     reportInteraction('grafana_preferences_theme_changed', {
       toTheme: value.value,
       preferenceType: this.props.preferenceType,
@@ -144,6 +176,9 @@ export class SharedPreferences extends PureComponent<Props, State> {
     if (value.value) {
       changeTheme(value.value, true);
     }
+    // Note: setState is called twice - once here for immediate form state update,
+    // and again via ThemeChangedEvent subscription after CSS loads. This is intentional
+    // to ensure form correctness while also maintaining sync with rendered theme.
   };
 
   onTimeZoneChanged = (timezone?: string) => {

public/app/core/services/theme.ts

@@ -12,28 +12,38 @@ export async function changeTheme(themeId: string, runtimeOnly?: boolean) {
 
   const newTheme = getThemeById(themeId);
 
-  appEvents.publish(new ThemeChangedEvent(newTheme));
-
   // Add css file for new theme
   if (oldTheme.colors.mode !== newTheme.colors.mode) {
     const newCssLink = document.createElement('link');
     newCssLink.rel = 'stylesheet';
     newCssLink.href = config.bootData.assets[newTheme.colors.mode];
-    newCssLink.onload = () => {
-      // Remove old css file
+
+    // Publish ThemeChangedEvent AFTER CSS loads to ensure UI components (like theme dropdown)
+    // update synchronously with the actual rendered theme. This prevents visual lag where
+    // the dropdown updates immediately but the page content updates later.
+    const publishThemeChange = () => {
+      appEvents.publish(new ThemeChangedEvent(newTheme));
+
+      // Remove old css file only after new one is loaded to prevent flickering
       const bodyLinks = document.getElementsByTagName('link');
       for (let i = 0; i < bodyLinks.length; i++) {
         const link = bodyLinks[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();
         }
       }
     };
+
+    newCssLink.onload = publishThemeChange;
+    // Ensure event is published even if CSS fails to load (network error, ad blocker, etc.)
+    // to prevent UI from getting stuck in inconsistent state
+    newCssLink.onerror = publishThemeChange;
+
     document.head.insertBefore(newCssLink, document.head.firstChild);
+  } else {
+    // Same mode (e.g., light -> light with different variant), publish event immediately
+    appEvents.publish(new ThemeChangedEvent(newTheme));
   }
 
   if (runtimeOnly) {