update euiThemeVars dynamically

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 });
   }
 }

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';

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);
+  },
+});