Merge pull request #28497 from overleaf/mj-system-editor-theme-dark-light-split

[web] Split editor theme into two when using system overall theme

GitOrigin-RevId: 1efa5553fdff8a17de634017882feb2ede614cd6

services/web/app/src/Features/Project/UserSettingsHelper.mjs

@@ -51,6 +51,8 @@ async function buildUserSettings(req, res, user) {
   return {
     mode: user.ace.mode,
     editorTheme: user.ace.theme,
+    editorLightTheme: user.ace.lightTheme,
+    editorDarkTheme: user.ace.darkTheme,
     fontSize: user.ace.fontSize,
     autoComplete: user.ace.autoComplete,
     autoPairDelimiters: user.ace.autoPairDelimiters,

services/web/app/src/Features/User/UserController.mjs

@@ -368,6 +368,12 @@ async function updateUserSettings(req, res, next) {
   if (body.editorTheme != null) {
     user.ace.theme = body.editorTheme
   }
+  if (body.editorLightTheme != null) {
+    user.ace.lightTheme = body.editorLightTheme
+  }
+  if (body.editorDarkTheme != null) {
+    user.ace.darkTheme = body.editorDarkTheme
+  }
   if (body.overallTheme != null) {
     user.ace.overallTheme = body.overallTheme
   }

services/web/app/src/models/User.mjs

@@ -89,6 +89,10 @@ export const UserSchema = new Schema(
       mode: { type: String, default: 'none' },
       theme: { type: String, default: 'textmate' },
       overallTheme: { type: String, default: '' },
+      // When overallTheme is `system`, we switch between `lightTheme` and `darkTheme` based on system settings
+      // When overallTheme is `light-` or empty, we use the `theme` option.
+      lightTheme: { type: String, default: 'textmate' },
+      darkTheme: { type: String, default: 'overleaf_dark' },
       fontSize: { type: Number, default: '12' },
       autoComplete: { type: Boolean, default: true },
       autoPairDelimiters: { type: Boolean, default: true },