Theming: Set themes.normal according to user preference and export getPreferredColorScheme

code/core/src/manager/globals/exports.ts

@@ -675,6 +675,7 @@ export default {
     'css',
     'darken',
     'ensure',
+    'getPreferredColorScheme',
     'ignoreSsrWarning',
     'isPropValid',
     'jsx',
@@ -701,6 +702,7 @@ export default {
     'css',
     'darken',
     'ensure',
+    'getPreferredColorScheme',
     'ignoreSsrWarning',
     'isPropValid',
     'jsx',
@@ -727,6 +729,7 @@ export default {
     'css',
     'darken',
     'ensure',
+    'getPreferredColorScheme',
     'ignoreSsrWarning',
     'isPropValid',
     'jsx',

code/core/src/theming/create.ts

@@ -4,18 +4,28 @@ import lightThemeVars from './themes/light';
 import type { ThemeVars, ThemeVarsPartial } from './types';
 import { getPreferredColorScheme } from './utils';
 
-export const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars } = {
+interface Themes {
+  light: ThemeVars;
+  dark: ThemeVars;
+  normal: ThemeVars;
+}
+
+const themesBase: Omit<Themes, 'normal'> = {
   light: lightThemeVars,
   dark: darkThemeVars,
-  normal: lightThemeVars,
+};
+
+const preferredColorScheme = getPreferredColorScheme();
+
+export const themes: Themes = {
+  ...themesBase,
+  normal: themesBase[preferredColorScheme],
 };
 
 interface Rest {
   [key: string]: any;
 }
 
-const preferredColorScheme = getPreferredColorScheme();
-
 export const create = (
   vars: ThemeVarsPartial = { base: preferredColorScheme },
   rest?: Rest

code/core/src/theming/index.ts

@@ -40,7 +40,7 @@ export * from './create';
 export * from './convert';
 export * from './ensure';
 
-export { lightenColor as lighten, darkenColor as darken } from './utils';
+export { lightenColor as lighten, darkenColor as darken, getPreferredColorScheme } from './utils';
 
 export const ignoreSsrWarning =
   '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';

code/core/src/theming/tests/create.test.js

@@ -1,6 +1,11 @@
 import { describe, expect, it } from 'vitest';
 
 import { create } from '../create';
+import { getPreferredColorScheme } from './../utils';
+
+vi.mock('./../utils', () => ({
+  getPreferredColorScheme: vi.fn().mockReturnValue('light'),
+}));
 
 describe('create base', () => {
   it('should create a theme with minimal viable theme', () => {
@@ -142,3 +147,25 @@ describe('create extend', () => {
     expect(result.base).toEqual('light');
   });
 });
+
+describe('themes', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  it('should set `normal` to `light` theme when user preference is `light`', async () => {
+    getPreferredColorScheme.mockReturnValue('light');
+
+    const { themes } = await import('./../create');
+
+    expect(themes.normal).toBe(themes.light);
+  });
+
+  it('should set `normal` to `dark` theme when user preference is `dark`', async () => {
+    getPreferredColorScheme.mockReturnValue('dark');
+
+    const { themes } = await import('./../create');
+
+    expect(themes.normal).toBe(themes.dark);
+  });
+});