feat(core): add darkMode configuration (#5161)

common/shared/tsconfigs/base.json

@@ -20,6 +20,8 @@
         "noEmit": true,
         "noImplicitOverride": true,
         "isolatedModules": true,
-        "skipLibCheck": true
+        "skipLibCheck": true,
+
+        "stripInternal": true
     }
 }

examples/src/sheets/main.ts

@@ -89,6 +89,8 @@ function createNewInstance() {
     // univer
     const univer = new Univer({
         // theme: greenTheme,
+        darkMode: localStorage.getItem('local.darkMode') === 'dark',
+        locale: LocaleType.ZH_CN,
         locales: {
             [LocaleType.ZH_CN]: zhCN,
             [LocaleType.EN_US]: enUS,

package.json

@@ -46,15 +46,15 @@
     },
     "devDependencies": {
         "@antfu/eslint-config": "4.13.0",
-        "@commitlint/cli": "^19.8.0",
-        "@commitlint/config-conventional": "^19.8.0",
+        "@commitlint/cli": "^19.8.1",
+        "@commitlint/config-conventional": "^19.8.1",
         "@eslint-react/eslint-plugin": "^1.49.0",
         "@playwright/test": "^1.52.0",
         "@release-it-plugins/workspaces": "^4.2.0",
         "@release-it/conventional-changelog": "^9.0.4",
         "@storybook/react": "8.6.12",
         "@types/fs-extra": "^11.0.4",
-        "@types/node": "^22.15.14",
+        "@types/node": "^22.15.16",
         "@types/react": "^19.1.3",
         "@types/react-dom": "^19.1.3",
         "@univerjs-infra/shared": "workspace:*",
@@ -78,7 +78,7 @@
         "release-it": "^17.11.0",
         "serve": "^14.2.4",
         "tsx": "^4.19.4",
-        "turbo": "^2.5.2",
+        "turbo": "^2.5.3",
         "typescript": "^5.8.3",
         "vitest": "^3.1.3"
     },

packages-experimental/debugger/src/commands/operations/dark-mode.operation.ts

@@ -15,7 +15,7 @@
  */
 
 import type { IAccessor, ICommand } from '@univerjs/core';
-import { CommandType, ILocalStorageService, ThemeService } from '@univerjs/core';
+import { CommandType, ThemeService } from '@univerjs/core';
 
 export interface IDarkModeCommandParams {
     value?: 'dark' | 'light';
@@ -25,10 +25,9 @@ export const DarkModeOperation: ICommand = {
     id: 'debugger.operation.dark-mode',
     type: CommandType.COMMAND,
     handler: async (accessor: IAccessor, params: IDarkModeCommandParams) => {
-        const localStorageService = accessor.get(ILocalStorageService);
         const themeService = accessor.get(ThemeService);
         themeService.setDarkMode(params.value === 'dark');
-        localStorageService.setItem('local.darkMode', params.value);
+        localStorage.setItem('local.darkMode', params.value ?? 'light');
 
         return true;
     },

packages-experimental/debugger/src/controllers/dark-mode.controller.ts

@@ -23,22 +23,22 @@ export class DarkModeController extends RxDisposable {
     ) {
         super();
 
-        this._localStorageService.getItem('local.darkMode').then((darkMode) => {
-            if (darkMode === 'dark') {
-                document.documentElement.classList.add('univer-dark');
-                themeService.setDarkMode(true);
-            } else if (darkMode === 'system') {
-                const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-                darkModeMediaQuery.addEventListener('change', (e) => {
-                    if (e.matches) {
-                        document.documentElement.classList.add('univer-dark');
-                        themeService.setDarkMode(true);
-                    } else {
-                        document.documentElement.classList.remove('univer-dark');
-                        themeService.setDarkMode(false);
-                    }
-                });
-            }
-        });
+        const darkMode = localStorage.getItem('local.darkMode');
+
+        if (darkMode === 'dark') {
+            document.documentElement.classList.add('univer-dark');
+            themeService.setDarkMode(true);
+        } else if (darkMode === 'system') {
+            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            darkModeMediaQuery.addEventListener('change', (e) => {
+                if (e.matches) {
+                    document.documentElement.classList.add('univer-dark');
+                    themeService.setDarkMode(true);
+                } else {
+                    document.documentElement.classList.remove('univer-dark');
+                    themeService.setDarkMode(false);
+                }
+            });
+        }
     }
 }

packages/core/src/univer.ts

@@ -56,11 +56,36 @@ import { Workbook } from './sheets/workbook';
 import { SlideDataModel } from './slides/slide-model';
 
 export interface IUniverConfig {
+    /**
+     * The theme of the Univer instance, default using the default theme.
+     */
     theme?: Theme;
-    locale: LocaleType;
-    locales: ILocales;
-    logLevel: LogLevel;
 
+    /**
+     * Whether to use dark mode.
+     * @internal
+     * @default false
+     */
+    darkMode?: boolean;
+
+    /**
+     * The locale of the Univer instance.
+     */
+    locale?: LocaleType;
+
+    /**
+     * The locales to be used
+     */
+    locales?: ILocales;
+
+    /**
+     * The log level of the Univer instance.
+     */
+    logLevel?: LogLevel;
+
+    /**
+     * The override dependencies of the Univer instance.
+     */
     override?: DependencyOverride;
 }
 
@@ -89,8 +114,9 @@ export class Univer implements IDisposable {
     constructor(config: Partial<IUniverConfig> = {}, parentInjector?: Injector) {
         const injector = this._injector = createUniverInjector(parentInjector, config?.override);
 
-        const { theme, locale, locales, logLevel } = config;
+        const { theme, darkMode, locale, locales, logLevel } = config;
         if (theme) this._injector.get(ThemeService).setTheme(theme);
+        if (darkMode) this._injector.get(ThemeService).setDarkMode(darkMode);
         if (locales) this._injector.get(LocaleService).load(locales);
         if (locale) this._injector.get(LocaleService).setLocale(locale);
         if (logLevel) this._injector.get(ILogService).setLogLevel(logLevel);