Per User Dark Mode Preference

.github/CODEOWNERS

@@ -285,6 +285,9 @@ packages/core/usage-data/core-usage-data-base-server-internal @elastic/kibana-co
 packages/core/usage-data/core-usage-data-server @elastic/kibana-core
 packages/core/usage-data/core-usage-data-server-internal @elastic/kibana-core
 packages/core/usage-data/core-usage-data-server-mocks @elastic/kibana-core
+packages/core/user-settings/core-user-settings-server @elastic/platform-security
+packages/core/user-settings/core-user-settings-server-internal @elastic/platform-security
+packages/core/user-settings/core-user-settings-server-mocks @elastic/platform-security
 x-pack/plugins/cross_cluster_replication @elastic/platform-deployment-management
 packages/kbn-crypto @elastic/kibana-security
 packages/kbn-crypto-browser @elastic/kibana-core

package.json

@@ -330,6 +330,9 @@
     "@kbn/core-usage-data-base-server-internal": "link:packages/core/usage-data/core-usage-data-base-server-internal",
     "@kbn/core-usage-data-server": "link:packages/core/usage-data/core-usage-data-server",
     "@kbn/core-usage-data-server-internal": "link:packages/core/usage-data/core-usage-data-server-internal",
+    "@kbn/core-user-settings-server": "link:packages/core/user-settings/core-user-settings-server",
+    "@kbn/core-user-settings-server-internal": "link:packages/core/user-settings/core-user-settings-server-internal",
+    "@kbn/core-user-settings-server-mocks": "link:packages/core/user-settings/core-user-settings-server-mocks",
     "@kbn/cross-cluster-replication-plugin": "link:x-pack/plugins/cross_cluster_replication",
     "@kbn/crypto": "link:packages/kbn-crypto",
     "@kbn/crypto-browser": "link:packages/kbn-crypto-browser",

packages/core/lifecycle/core-lifecycle-server-internal/src/internal_core_setup.ts

@@ -25,6 +25,7 @@ import type { InternalStatusServiceSetup } from '@kbn/core-status-server-interna
 import type { InternalUiSettingsServiceSetup } from '@kbn/core-ui-settings-server-internal';
 import type { InternalCoreUsageDataSetup } from '@kbn/core-usage-data-base-server-internal';
 import type { InternalCustomBrandingSetup } from '@kbn/core-custom-branding-server-internal';
+import type { InternalUserSettingsServiceSetup } from '@kbn/core-user-settings-server-internal';
 
 /** @internal */
 export interface InternalCoreSetup {
@@ -47,4 +48,5 @@ export interface InternalCoreSetup {
   deprecations: InternalDeprecationsServiceSetup;
   coreUsageData: InternalCoreUsageDataSetup;
   customBranding: InternalCustomBrandingSetup;
+  userSettings: InternalUserSettingsServiceSetup;
 }

packages/core/lifecycle/core-lifecycle-server-internal/tsconfig.json

@@ -32,7 +32,8 @@
     "@kbn/core-usage-data-base-server-internal",
     "@kbn/core-usage-data-server",
     "@kbn/core-custom-branding-server-internal",
-    "@kbn/core-custom-branding-server"
+    "@kbn/core-custom-branding-server",
+    "@kbn/core-user-settings-server-internal"
   ],
   "exclude": [
     "target/**/*",

packages/core/lifecycle/core-lifecycle-server-mocks/src/core_setup.mock.ts

@@ -26,6 +26,7 @@ import { executionContextServiceMock } from '@kbn/core-execution-context-server-
 import { coreUsageDataServiceMock } from '@kbn/core-usage-data-server-mocks';
 import { customBrandingServiceMock } from '@kbn/core-custom-branding-server-mocks';
 import { createCoreStartMock } from './core_start.mock';
+import { userSettingsServiceMock } from '@kbn/core-user-settings-server-mocks';
 
 type CoreSetupMockType = MockedKeys<CoreSetup> & {
   elasticsearch: ReturnType<typeof elasticsearchServiceMock.createSetup>;
@@ -53,6 +54,7 @@ export function createCoreSetupMock({
     analytics: analyticsServiceMock.createAnalyticsServiceSetup(),
     capabilities: capabilitiesServiceMock.createSetupContract(),
     customBranding: customBrandingServiceMock.createSetupContract(),
+    userSettings: userSettingsServiceMock.createSetupContract(),
     docLinks: docLinksServiceMock.createSetupContract(),
     elasticsearch: elasticsearchServiceMock.createSetup(),
     http: httpMock,

packages/core/lifecycle/core-lifecycle-server-mocks/src/internal_core_setup.mock.ts

@@ -25,6 +25,7 @@ import { statusServiceMock } from '@kbn/core-status-server-mocks';
 import { uiSettingsServiceMock } from '@kbn/core-ui-settings-server-mocks';
 import { coreUsageDataServiceMock } from '@kbn/core-usage-data-server-mocks';
 import { customBrandingServiceMock } from '@kbn/core-custom-branding-server-mocks';
+import { userSettingsServiceMock } from '@kbn/core-user-settings-server-mocks';
 
 export function createInternalCoreSetupMock() {
   const setupDeps = {
@@ -47,6 +48,7 @@ export function createInternalCoreSetupMock() {
     executionContext: executionContextServiceMock.createInternalSetupContract(),
     coreUsageData: coreUsageDataServiceMock.createSetupContract(),
     customBranding: customBrandingServiceMock.createSetupContract(),
+    userSettings: userSettingsServiceMock.createSetupContract(),
   };
   return setupDeps;
 }

packages/core/lifecycle/core-lifecycle-server-mocks/tsconfig.json

@@ -34,6 +34,7 @@
     "@kbn/core-http-request-handler-context-server",
     "@kbn/core-logging-server-mocks",
     "@kbn/core-custom-branding-server-mocks",
+    "@kbn/core-user-settings-server-mocks",
   ],
   "exclude": [
     "target/**/*",

packages/core/lifecycle/core-lifecycle-server/src/core_setup.ts

@@ -23,6 +23,7 @@ import { StatusServiceSetup } from '@kbn/core-status-server';
 import { UiSettingsServiceSetup } from '@kbn/core-ui-settings-server';
 import { CoreUsageDataSetup } from '@kbn/core-usage-data-server';
 import { CustomBrandingSetup } from '@kbn/core-custom-branding-server';
+import { UserSettingsServiceSetup } from '@kbn/core-user-settings-server';
 import { CoreStart } from './core_start';
 
 /**
@@ -64,6 +65,8 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
   status: StatusServiceSetup;
   /** {@link UiSettingsServiceSetup} */
   uiSettings: UiSettingsServiceSetup;
+  /** {@link UserSettingsServiceSetup} */
+  userSettings: UserSettingsServiceSetup;
   /** {@link DeprecationsServiceSetup} */
   deprecations: DeprecationsServiceSetup;
   /** {@link StartServicesAccessor} */

packages/core/lifecycle/core-lifecycle-server/tsconfig.json

@@ -28,7 +28,8 @@
     "@kbn/core-status-server",
     "@kbn/core-ui-settings-server",
     "@kbn/core-usage-data-server",
-    "@kbn/core-custom-branding-server"
+    "@kbn/core-custom-branding-server",
+    "@kbn/core-user-settings-server"
   ],
   "exclude": [
     "target/**/*",

packages/core/plugins/core-plugins-server-internal/src/plugin_context.ts

@@ -14,6 +14,7 @@ import type { IContextProvider, IRouterWithVersion } from '@kbn/core-http-server
 import { PluginInitializerContext, PluginManifest } from '@kbn/core-plugins-server';
 import { CorePreboot, CoreSetup, CoreStart } from '@kbn/core-lifecycle-server';
 import type { RequestHandlerContext } from '@kbn/core-http-request-handler-context-server';
+import type { UserProfileSettingsClientContract } from '@kbn/core-user-settings-server-internal';
 import { PluginWrapper } from './plugin';
 import {
   PluginsServicePrebootSetupDeps,
@@ -259,6 +260,10 @@ export function createPluginSetupContext<TPlugin, TPluginDependencies>(
       register: deps.uiSettings.register,
       registerGlobal: deps.uiSettings.registerGlobal,
     },
+    userSettings: {
+      setUserProfileSettings: (client: UserProfileSettingsClientContract) =>
+        deps.userSettings.setUserProfileSettings(client),
+    },
     getStartServices: () => plugin.startDependencies,
     deprecations: deps.deprecations.getRegistry(plugin.name),
     coreUsageData: {

packages/core/plugins/core-plugins-server-internal/tsconfig.json

@@ -38,6 +38,7 @@
     "@kbn/core-node-server-internal",
     "@kbn/core-plugins-base-server-internal",
     "@kbn/repo-packages",
+    "@kbn/core-user-settings-server-internal",
   ],
   "exclude": [
     "target/**/*",

packages/core/rendering/core-rendering-server-internal/src/rendering_service.test.ts

@@ -184,6 +184,108 @@ function renderTestCases(
   });
 }
 
+function renderDarkModeTestCases(
+  getRender: () => Promise<
+    [
+      InternalRenderingServicePreboot['render'] | InternalRenderingServiceSetup['render'],
+      typeof mockRenderingPrebootDeps | typeof mockRenderingSetupDeps
+    ]
+  >
+) {
+  describe('render() Dark Mode tests', () => {
+    let uiSettings: {
+      client: ReturnType<typeof uiSettingsServiceMock.createClient>;
+      globalClient: ReturnType<typeof uiSettingsServiceMock.createClient>;
+    };
+
+    beforeEach(async () => {
+      uiSettings = {
+        client: uiSettingsServiceMock.createClient(),
+        globalClient: uiSettingsServiceMock.createClient(),
+      };
+      uiSettings.client.getRegistered.mockReturnValue({
+        registered: { name: 'title' },
+      });
+    });
+
+    describe('Dark Mode', () => {
+      it('User settings should override the space setting', async () => {
+        mockRenderingSetupDeps.userSettings.getUserSettingDarkMode.mockReturnValueOnce(
+          Promise.resolve('dark')
+        );
+
+        getSettingValueMock.mockImplementation((settingName: string) => {
+          if (settingName === 'theme:darkMode') {
+            return false;
+          }
+          return settingName;
+        });
+
+        const settings = { 'theme:darkMode': { userValue: false } };
+        uiSettings.client.getUserProvided.mockResolvedValue(settings);
+
+        const [render] = await getRender();
+        await render(createKibanaRequest(), uiSettings);
+
+        expect(getStylesheetPathsMock).toHaveBeenCalledWith({
+          darkMode: true,
+          themeVersion: 'v8',
+          basePath: '/mock-server-basepath',
+          buildNum: expect.any(Number),
+        });
+      });
+
+      it('Space setting should if UsersSettings is undefined', async () => {
+        mockRenderingSetupDeps.userSettings.getUserSettingDarkMode.mockReturnValueOnce(
+          Promise.resolve(undefined)
+        );
+        getSettingValueMock.mockImplementation((settingName: string) => {
+          if (settingName === 'theme:darkMode') {
+            return false;
+          }
+          return settingName;
+        });
+
+        const settings = { 'theme:darkMode': { userValue: false } };
+        uiSettings.client.getUserProvided.mockResolvedValue(settings);
+        const [render] = await getRender();
+        await render(createKibanaRequest(), uiSettings);
+
+        expect(getStylesheetPathsMock).toHaveBeenCalledWith({
+          darkMode: false,
+          themeVersion: 'v8',
+          basePath: '/mock-server-basepath',
+          buildNum: expect.any(Number),
+        });
+      });
+
+      it('Space setting should if User Setting is `empty`', async () => {
+        mockRenderingSetupDeps.userSettings.getUserSettingDarkMode.mockReturnValueOnce(
+          Promise.resolve('')
+        );
+        getSettingValueMock.mockImplementation((settingName: string) => {
+          if (settingName === 'theme:darkMode') {
+            return true;
+          }
+          return settingName;
+        });
+
+        const settings = { 'theme:darkMode': { userValue: true } };
+        uiSettings.client.getUserProvided.mockResolvedValue(settings);
+        const [render] = await getRender();
+        await render(createKibanaRequest(), uiSettings);
+
+        expect(getStylesheetPathsMock).toHaveBeenCalledWith({
+          darkMode: true,
+          themeVersion: 'v8',
+          basePath: '/mock-server-basepath',
+          buildNum: expect.any(Number),
+        });
+      });
+    });
+  });
+}
+
 describe('RenderingService', () => {
   let service: RenderingService;
 
@@ -231,5 +333,9 @@ describe('RenderingService', () => {
       await service.preboot(mockRenderingPrebootDeps);
       return [(await service.setup(mockRenderingSetupDeps)).render, mockRenderingSetupDeps];
     });
+    renderDarkModeTestCases(async () => {
+      await service.preboot(mockRenderingPrebootDeps);
+      return [(await service.setup(mockRenderingSetupDeps)).render, mockRenderingSetupDeps];
+    });
   });
 });

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

@@ -18,6 +18,7 @@ import type { KibanaRequest, HttpAuth } from '@kbn/core-http-server';
 import type { IUiSettingsClient } from '@kbn/core-ui-settings-server';
 import type { UiPlugins } from '@kbn/core-plugins-base-server-internal';
 import { CustomBranding } from '@kbn/core-custom-branding-common';
+import { UserProvidedValues } from '@kbn/core-ui-settings-common';
 import { Template } from './views';
 import {
   IRenderOptions,
@@ -34,7 +35,12 @@ import type { InternalRenderingRequestHandlerContext } from './internal_types';
 
 type RenderOptions =
   | RenderingSetupDeps
-  | (RenderingPrebootDeps & { status?: never; elasticsearch?: never; customBranding?: never });
+  | (RenderingPrebootDeps & {
+      status?: never;
+      elasticsearch?: never;
+      customBranding?: never;
+      userSettings?: never;
+    });
 
 /** @internal */
 export class RenderingService {
@@ -67,6 +73,7 @@ export class RenderingService {
     status,
     uiPlugins,
     customBranding,
+    userSettings,
   }: RenderingSetupDeps): Promise<InternalRenderingServiceSetup> {
     registerBootstrapRoute({
       router: http.createRouter<InternalRenderingRequestHandlerContext>(''),
@@ -79,7 +86,14 @@ export class RenderingService {
     });
 
     return {
-      render: this.render.bind(this, { elasticsearch, http, uiPlugins, status, customBranding }),
+      render: this.render.bind(this, {
+        elasticsearch,
+        http,
+        uiPlugins,
+        status,
+        customBranding,
+        userSettings,
+      }),
     };
   }
 
@@ -92,7 +106,7 @@ export class RenderingService {
     },
     { isAnonymousPage = false, vars, includeExposedConfigKeys }: IRenderOptions = {}
   ) {
-    const { elasticsearch, http, uiPlugins, status, customBranding } = renderOptions;
+    const { elasticsearch, http, uiPlugins, status, customBranding, userSettings } = renderOptions;
 
     const env = {
       mode: this.coreContext.env.mode,
@@ -101,14 +115,29 @@ export class RenderingService {
     const buildNum = env.packageInfo.buildNum;
     const basePath = http.basePath.get(request);
     const { serverBasePath, publicBaseUrl } = http.basePath;
+
+    let settingsUserValues: Record<string, UserProvidedValues> = {};
+    let globalSettingsUserValues: Record<string, UserProvidedValues> = {};
+
+    if (!isAnonymousPage) {
+      const userValues = await Promise.all([
+        uiSettings.client?.getUserProvided(),
+        uiSettings.globalClient?.getUserProvided(),
+      ]);
+
+      settingsUserValues = userValues[0];
+      globalSettingsUserValues = userValues[1];
+    }
+
     const settings = {
       defaults: uiSettings.client?.getRegistered() ?? {},
-      user: isAnonymousPage ? {} : await uiSettings.client?.getUserProvided(),
+      user: settingsUserValues,
     };
     const globalSettings = {
       defaults: uiSettings.globalClient?.getRegistered() ?? {},
-      user: isAnonymousPage ? {} : await uiSettings.globalClient?.getUserProvided(),
+      user: globalSettingsUserValues,
     };
+
     let clusterInfo = {};
     let branding: CustomBranding = {};
     try {
@@ -129,7 +158,16 @@ export class RenderingService {
       // swallow error
     }
 
-    const darkMode = getSettingValue('theme:darkMode', settings, Boolean);
+    const userSettingDarkMode: string = (await userSettings?.getUserSettingDarkMode(request)) || '';
+
+    let darkMode: boolean;
+
+    if (userSettingDarkMode) {
+      darkMode = userSettingDarkMode === 'dark';
+    } else {
+      darkMode = getSettingValue('theme:darkMode', settings, Boolean);
+    }
+
     const themeVersion: ThemeVersion = 'v8';
 
     const stylesheetPaths = getStylesheetPaths({

packages/core/rendering/core-rendering-server-internal/src/test_helpers/params.ts

@@ -11,13 +11,15 @@ import { httpServiceMock } from '@kbn/core-http-server-mocks';
 import { elasticsearchServiceMock } from '@kbn/core-elasticsearch-server-mocks';
 import { statusServiceMock } from '@kbn/core-status-server-mocks';
 import { customBrandingServiceMock } from '@kbn/core-custom-branding-server-mocks';
+import { userSettingsServiceMock } from '@kbn/core-user-settings-server-mocks';
 
 const context = mockCoreContext.create();
 const httpPreboot = httpServiceMock.createInternalPrebootContract();
 const httpSetup = httpServiceMock.createInternalSetupContract();
 const status = statusServiceMock.createInternalSetupContract();
 const elasticsearch = elasticsearchServiceMock.createInternalSetup();
 const customBranding = customBrandingServiceMock.createSetupContract();
+const userSettings = userSettingsServiceMock.createSetupContract();
 
 function createUiPlugins() {
   return {
@@ -38,4 +40,5 @@ export const mockRenderingSetupDeps = {
   uiPlugins: createUiPlugins(),
   customBranding,
   status,
+  userSettings,
 };

packages/core/rendering/core-rendering-server-internal/src/types.ts

@@ -20,6 +20,7 @@ import type { IUiSettingsClient } from '@kbn/core-ui-settings-server';
 import type { UiPlugins } from '@kbn/core-plugins-base-server-internal';
 import type { InternalCustomBrandingSetup } from '@kbn/core-custom-branding-server-internal';
 import type { CustomBranding } from '@kbn/core-custom-branding-common';
+import type { InternalUserSettingsServiceSetup } from '@kbn/core-user-settings-server-internal';
 
 /** @internal */
 export interface RenderingMetadata {
@@ -48,6 +49,7 @@ export interface RenderingSetupDeps {
   status: InternalStatusServiceSetup;
   uiPlugins: UiPlugins;
   customBranding: InternalCustomBrandingSetup;
+  userSettings: InternalUserSettingsServiceSetup;
 }
 
 /** @internal */