[DO NOT MERGE] Testing multi theme support

package.json

@@ -116,6 +116,8 @@
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
     "@elastic/eui": "95.9.0",
+    "@elastic/eui-theme-barcelona": "file:./elastic-eui-theme-barcelona.v0.0.1.tgz",
+    "@elastic/eui-theme-rainbow": "file:./elastic-eui-theme-rainbow.v0.0.1.tgz",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/core/injected-metadata/core-injected-metadata-common-internal/src/types.ts

@@ -42,6 +42,7 @@ export interface InjectedMetadataExternalUrlPolicy {
 export interface InjectedMetadataTheme {
   darkMode: DarkModeValue;
   version: ThemeVersion;
+  name: string;
   stylesheetPaths: {
     default: string[];
     dark: string[];

packages/core/rendering/core-rendering-server-internal/src/rendering_service.tsx

@@ -45,6 +45,7 @@ import {
 import { filterUiPlugins } from './filter_ui_plugins';
 import { getApmConfig } from './get_apm_config';
 import type { InternalRenderingRequestHandlerContext } from './internal_types';
+import { parseThemeNameValue } from '@kbn/core-ui-settings-common/src/theme_name';
 
 type RenderOptions =
   | RenderingSetupDeps
@@ -198,6 +199,8 @@ export class RenderingService {
       darkMode = getSettingValue<DarkModeValue>('theme:darkMode', settings, parseDarkModeValue);
     }
 
+    const themeName = getSettingValue<string>('theme:name', settings, parseThemeNameValue);
+
     const themeStylesheetPaths = (mode: boolean) =>
       getThemeStylesheetPaths({
         darkMode: mode,
@@ -260,6 +263,7 @@ export class RenderingService {
         theme: {
           darkMode,
           version: themeVersion,
+          name: themeName,
           stylesheetPaths: {
             default: themeStylesheetPaths(false),
             dark: themeStylesheetPaths(true),

packages/core/theme/core-theme-browser-internal/src/theme_service.ts

@@ -30,14 +30,18 @@ export class ThemeService {
     const themeMetadata = injectedMetadata.getTheme();
     this.themeMetadata = themeMetadata;
 
-    let theme: CoreTheme;
+    let darkMode: boolean;
     if (themeMetadata.darkMode === 'system' && browsersSupportsSystemTheme()) {
-      theme = { darkMode: systemThemeIsDark() };
+      darkMode = systemThemeIsDark();
     } else {
-      const darkMode = themeMetadata.darkMode === 'system' ? false : themeMetadata.darkMode;
-      theme = { darkMode };
+      darkMode = themeMetadata.darkMode === 'system' ? false : themeMetadata.darkMode;
     }
 
+    const theme: CoreTheme = {
+      darkMode,
+      name: themeMetadata.name,
+    };
+
     this.applyTheme(theme);
 
     this.contract = {

packages/core/theme/core-theme-browser/src/types.ts

@@ -17,6 +17,9 @@ import { Observable } from 'rxjs';
 export interface CoreTheme {
   /** is dark mode enabled or not */
   readonly darkMode: boolean;
+
+  /** name of the active theme */
+  readonly name: string;
 }
 
 /**

packages/core/ui-settings/core-ui-settings-common/index.ts

@@ -17,5 +17,6 @@ export type {
   GetUiSettingsContext,
 } from './src/ui_settings';
 export { type DarkModeValue, parseDarkModeValue } from './src/dark_mode';
+export { type ThemeNameValue, parseThemeNameValue } from './src/theme_name';
 
 export { TIMEZONE_OPTIONS } from './src/timezones';

packages/core/ui-settings/core-ui-settings-common/src/theme_name.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export type ThemeNameValue = 'amsterdam' | 'barcelona' | string;
+
+export const parseThemeNameValue = (rawValue: unknown): ThemeNameValue => {
+  if (rawValue === 'amsterdam' || rawValue === 'barcelona' || rawValue === 'rainbow') {
+    return rawValue;
+  }
+
+  return 'amsterdam';
+};

packages/core/ui-settings/core-ui-settings-server-internal/src/settings/theme.ts

@@ -89,5 +89,31 @@ export const getThemeSettings = (
       readonly: true,
       schema: schema.literal('v8'),
     },
+    'theme:name': {
+      name: i18n.translate('core.ui_settings.params.themeNameTitle', {
+        defaultMessage: 'Theme name',
+      }),
+      value: 'amsterdam',
+      requiresPageReload: true,
+      schema: schema.oneOf([
+        schema.literal('amsterdam'),
+        schema.literal('barcelona'),
+        // Accept any string for theming experiments
+        schema.string(),
+      ]),
+      type: 'select',
+      options: ['amsterdam', 'barcelona', 'rainbow'],
+      optionLabels: {
+        amsterdam: i18n.translate('core.ui_settings.params.themeName.options.amsterdam', {
+          defaultMessage: 'Amsterdam',
+        }),
+        barcelona: i18n.translate('core.ui_settings.params.themeName.options.barcelona', {
+          defaultMessage: 'Barcelona',
+        }),
+        rainbow: i18n.translate('core.ui_settings.params.themeName.options.rainbow', {
+          defaultMessage: 'Rainbow',
+        }),
+      },
+    },
   };
 };

packages/react/kibana_context/common/index.ts

@@ -9,13 +9,16 @@
 
 export { getColorMode } from './color_mode';
 export type { KibanaTheme, ThemeServiceStart } from './types';
+export { getKibanaThemeByName, getKibanaDefaultTheme } from './theme';
 
 import type { KibanaTheme } from './types';
+import { DEFAULT_KIBANA_THEME_NAME } from './theme';
 
 /**
  * The default `KibanaTheme` for use in Storybook, Jest, or initialization.  At
  * runtime, the theme should always be provided by the `ThemeService`.
  */
 export const defaultTheme: KibanaTheme = {
   darkMode: false,
+  name: DEFAULT_KIBANA_THEME_NAME,
 };

packages/react/kibana_context/common/theme.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { type EuiThemeSystem } from '@elastic/eui';
+import { EuiThemeAmsterdam } from '@elastic/eui';
+import { EuiThemeBarcelona } from '@elastic/eui-theme-barcelona';
+import { EuiThemeRainbow } from '@elastic/eui-theme-rainbow';
+import { ThemeNameValue } from '@kbn/core-ui-settings-common';
+
+export interface ThemeDescriptor {
+  euiTheme: EuiThemeSystem;
+}
+
+export const KIBANA_THEMES: Record<ThemeNameValue, ThemeDescriptor> = {
+  amsterdam: {
+    euiTheme: EuiThemeAmsterdam,
+  },
+  barcelona: {
+    euiTheme: EuiThemeBarcelona,
+  },
+  rainbow: {
+    euiTheme: EuiThemeRainbow,
+  }
+};
+
+export const DEFAULT_KIBANA_THEME_NAME: ThemeNameValue = 'amsterdam';
+
+export const getKibanaDefaultTheme = () => KIBANA_THEMES[DEFAULT_KIBANA_THEME_NAME];
+
+export const getKibanaThemeByName = (name: ThemeNameValue) => KIBANA_THEMES[name];

packages/react/kibana_context/common/tsconfig.json

@@ -13,5 +13,7 @@
   "exclude": [
     "target/**/*"
   ],
-  "kbn_references": []
+  "kbn_references": [
+    "@kbn/core-ui-settings-common",
+  ]
 }

packages/react/kibana_context/common/types.ts

@@ -8,6 +8,7 @@
  */
 
 import { Observable } from 'rxjs';
+import { ThemeNameValue } from '@kbn/core-ui-settings-common';
 
 // To avoid a circular dependency with the deprecation of `CoreThemeProvider`,
 // we need to define the theme type here.
@@ -20,6 +21,8 @@ import { Observable } from 'rxjs';
 export interface KibanaTheme {
   /** is dark mode enabled or not */
   readonly darkMode: boolean;
+
+  readonly name: ThemeNameValue;
 }
 
 // To avoid a circular dependency with the deprecation of `CoreThemeProvider`,

packages/react/kibana_context/root/eui_provider.tsx

@@ -13,7 +13,7 @@ import createCache from '@emotion/cache';
 
 import { EuiProvider, EuiProviderProps, euiStylisPrefixer } from '@elastic/eui';
 import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
-import { getColorMode, defaultTheme } from '@kbn/react-kibana-context-common';
+import { getColorMode, defaultTheme, getKibanaThemeByName } from '@kbn/react-kibana-context-common';
 import { ThemeServiceStart } from '@kbn/react-kibana-context-common';
 
 /**
@@ -64,8 +64,16 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   modify,
   children,
 }) => {
-  const theme = useObservable(theme$, defaultTheme);
-  const themeColorMode = useMemo(() => getColorMode(theme), [theme]);
+  const kibanaTheme = useObservable(theme$, defaultTheme);
+  const themeColorMode = useMemo(() => getColorMode(kibanaTheme), [kibanaTheme]);
+  const euiTheme = useMemo(() => {
+    const theme = getKibanaThemeByName(kibanaTheme.name);
+    if (!theme) {
+      return undefined;
+    }
+
+    return theme.euiTheme;
+  }, [kibanaTheme]);
 
   // In some cases-- like in Storybook or testing-- we want to explicitly override the
   // colorMode provided by the `theme`.
@@ -76,7 +84,14 @@ export const KibanaEuiProvider: FC<PropsWithChildren<KibanaEuiProviderProps>> =
   const globalStyles = globalStylesProp === false ? false : undefined;
 
   return (
-    <EuiProvider {...{ cache, modify, colorMode, globalStyles, utilityClasses: globalStyles }}>
+    <EuiProvider
+      theme={euiTheme}
+      cache={cache}
+      modify={modify}
+      colorMode={colorMode}
+      globalStyles={globalStyles}
+      utilityClasses={globalStyles}
+    >
       {children}
     </EuiProvider>
   );

yarn.lock

@@ -1741,6 +1741,14 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
+"@elastic/eui-theme-barcelona@file:./elastic-eui-theme-barcelona.v0.0.1.tgz":
+  version "0.0.1"
+  resolved "file:./elastic-eui-theme-barcelona.v0.0.1.tgz#62d9cac00bd598c0837b2a9d1e96e7b1f363964c"
+
+"@elastic/eui-theme-rainbow@file:./elastic-eui-theme-rainbow.v0.0.1.tgz":
+  version "1.0.0"
+  resolved "file:./elastic-eui-theme-rainbow.v0.0.1.tgz#49e5fe0d4c91277768ceb2eacf397de92831c564"
+
 "@elastic/eui@95.9.0":
   version "95.9.0"
   resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-95.9.0.tgz#23fbafd7613fb6b41b4925ec4977a0c1e075b455"