From b0a0017811d7402f76709af7ab1b8e12334e64a5 Mon Sep 17 00:00:00 2001
From: pgayvallet <pierre.gayvallet@elastic.co>
Date: Mon, 11 Dec 2023 18:07:03 +0100
Subject: [PATCH] update euiThemeVars dynamically

---
 .../src/theme_service.ts                      |  2 ++
 packages/kbn-ui-theme/index.ts                | 10 +++++++++-
 packages/kbn-ui-theme/src/theme.ts            | 19 +++++++++++++------
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/core/theme/core-theme-browser-internal/src/theme_service.ts b/packages/core/theme/core-theme-browser-internal/src/theme_service.ts
index 07469f639188c..d410a19c08092 100644
--- a/packages/core/theme/core-theme-browser-internal/src/theme_service.ts
+++ b/packages/core/theme/core-theme-browser-internal/src/theme_service.ts
@@ -8,6 +8,7 @@
 
 import { Subject, ReplaySubject } from 'rxjs';
 import { shareReplay, takeUntil } from 'rxjs/operators';
+import { _setDarkMode } from '@kbn/ui-theme';
 import type { InjectedMetadataTheme } from '@kbn/core-injected-metadata-common-internal';
 import type { InternalInjectedMetadataSetup } from '@kbn/core-injected-metadata-browser-internal';
 import type { CoreTheme, ThemeServiceSetup, ThemeServiceStart } from '@kbn/core-theme-browser';
@@ -70,6 +71,7 @@ export class ThemeService {
       this.stylesheets.push(createStyleSheet({ href: stylesheet }));
     });
 
+    _setDarkMode(darkMode);
     this.theme$.next({ darkMode });
   }
 }
diff --git a/packages/kbn-ui-theme/index.ts b/packages/kbn-ui-theme/index.ts
index 8f178a79e64ad..1fda72ed8b3f5 100644
--- a/packages/kbn-ui-theme/index.ts
+++ b/packages/kbn-ui-theme/index.ts
@@ -8,4 +8,12 @@
 
 export type { Theme } from './src/theme';
 
-export { darkMode, euiDarkVars, euiLightVars, euiThemeVars, tag, version } from './src/theme';
+export {
+  darkMode,
+  tag,
+  version,
+  euiDarkVars,
+  euiLightVars,
+  euiThemeVars,
+  _setDarkMode,
+} from './src/theme';
diff --git a/packages/kbn-ui-theme/src/theme.ts b/packages/kbn-ui-theme/src/theme.ts
index 8fde5c63a292a..5edf6e559351f 100644
--- a/packages/kbn-ui-theme/src/theme.ts
+++ b/packages/kbn-ui-theme/src/theme.ts
@@ -17,19 +17,26 @@ export type Theme = typeof v8Light;
 
 // in the Kibana app we can rely on this global being defined, but in
 // some cases (like jest) the global is undefined
+/** @deprecated theme can be dynamic now, access is discouraged */
 export const tag: string = globals.__kbnThemeTag__ || 'v8light';
+/** @deprecated theme can be dynamic now, access is discouraged */
 export const version = 8;
+/** @deprecated theme can be dynamic now, access is discouraged */
 export const darkMode = tag.endsWith('dark');
 
 export const euiLightVars: Theme = v8Light;
 export const euiDarkVars: Theme = v8Dark;
 
+let isDarkMode = darkMode;
+export const _setDarkMode = (mode: boolean) => {
+  isDarkMode = mode;
+};
+
 /**
  * EUI Theme vars that automatically adjust to light/dark theme
  */
-export let euiThemeVars: Theme;
-if (darkMode) {
-  euiThemeVars = euiDarkVars;
-} else {
-  euiThemeVars = euiLightVars;
-}
+export const euiThemeVars: Theme = new Proxy(isDarkMode ? euiDarkVars : euiLightVars, {
+  get(accessedTarget, accessedKey, ...rest) {
+    return Reflect.get(isDarkMode ? euiDarkVars : euiLightVars, accessedKey, ...rest);
+  },
+});