[ui-shared-deps/theme] implement auto-switching theme vars module

packages/kbn-ui-shared-deps/entry.js

@@ -61,5 +61,8 @@ if (window.__kbnThemeVersion__ === 'v7') {
   ElasticEuiDarkTheme = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
 }
 
+import * as Theme from './theme.ts';
+export { Theme };
+
 // massive deps that we should really get rid of or reduce in size substantially
 export const ElasticsearchBrowser = require('elasticsearch-browser/elasticsearch.js');

packages/kbn-ui-shared-deps/index.js

@@ -44,6 +44,7 @@ exports.externals = {
   'react-router-dom': '__kbnSharedDeps__.ReactRouterDom',
   'styled-components': '__kbnSharedDeps__.StyledComponents',
   '@kbn/monaco': '__kbnSharedDeps__.KbnMonaco',
+  '@kbn/ui-shared-deps/theme': '__kbnSharedDeps__.Theme',
   // this is how plugins/consumers from npm load monaco
   'monaco-editor/esm/vs/editor/editor.api': '__kbnSharedDeps__.MonacoBarePluginApi',
 
@@ -59,8 +60,8 @@ exports.externals = {
   '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
   '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
   '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
-  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.ElasticEuiLightTheme',
-  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.ElasticEuiDarkTheme',
+  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.Theme.euiLightVars',
+  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.Theme.euiDarkVars',
 
   /**
    * massive deps that we should really get rid of or reduce in size substantially

packages/kbn-ui-shared-deps/theme.ts

@@ -0,0 +1,40 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import Theme from '@elastic/eui/dist/eui_theme_light.json';
+
+export let euiLightVars: typeof Theme;
+export let euiDarkVars: typeof Theme;
+if ((window as any).__kbnThemeVersion__ === 'v7') {
+  euiLightVars = require('@elastic/eui/dist/eui_theme_light.json');
+  euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json');
+} else {
+  euiLightVars = require('@elastic/eui/dist/eui_theme_amsterdam_light.json');
+  euiDarkVars = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
+}
+
+/**
+ * EUI Theme vars that automatically adjust to light/dark theme
+ */
+export let euiThemeVars: typeof Theme;
+if ((window as any).__kbnDarkTheme__) {
+  euiThemeVars = euiDarkVars;
+} else {
+  euiThemeVars = euiLightVars;
+}

packages/kbn-ui-shared-deps/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["index.d.ts", "./monaco"]
+  "include": [
+    "index.d.ts",
+    "./theme_vars"
+  ]
 }

packages/kbn-ui-shared-deps/webpack.config.js

@@ -78,6 +78,17 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
+      {
+        include: [require.resolve('./theme.ts')],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
+            },
+          },
+        ],
+      },
     ],
   },
 

x-pack/plugins/apm/public/plugin.ts

@@ -6,6 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { lazy } from 'react';
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
 import { ConfigSchema } from '.';
 import { ObservabilityPluginSetup } from '../../observability/public';
 import {
@@ -42,7 +43,6 @@ import {
   fetchLandingPageData,
   hasData,
 } from './services/rest/observability_dashboard';
-import { getTheme } from './utils/get_theme';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
@@ -79,13 +79,10 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
     pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry);
 
     if (plugins.observability) {
-      const theme = getTheme({
-        isDarkMode: core.uiSettings.get('theme:darkMode'),
-      });
       plugins.observability.dashboard.register({
         appName: 'apm',
         fetchData: async (params) => {
-          return fetchLandingPageData(params, { theme });
+          return fetchLandingPageData(params, { theme: euiThemeVars });
         },
         hasData,
       });