CodeMirror editor does not adapt to dark mode in Admin → Layout → Custom Scripts

[jainAmishhh]

Description:

The CodeMirror editor used in Administration → Layout → Custom Scripts does not adapt to Rocket.Chat’s dark mode.

When the application is switched to dark theme, the surrounding UI updates correctly, but the CodeMirror editor continues to appear with a light background. This creates a noticeable visual inconsistency and makes the editor uncomfortable to use in dark mode.

Summary: CodeMirror editor remains light-themed when Rocket.Chat is in dark mode.

Steps to reproduce:

1. Start Rocket.Chat
2. Enable dark mode
3. Navigate to:
   Administration → Layout → Custom Scripts
4. Observe the CodeMirror editor appearance

Expected behavior:

When Rocket.Chat is in dark mode, the CodeMirror editor should also use a dark-compatible theme or background so that it visually aligns with the rest of the UI.

Actual behavior:

The CodeMirror editor always appears with a light background, even when the application is in dark mode.

Investigation Details

While investigating this issue, I found that:

• The editor is implemented using CodeMirror v5
• CodeMirror is always initialized with the default theme (cm-s-default)
• No dark CodeMirror theme is loaded or applied
• CodeMirror theme imports exist but are commented out
• Rocket.Chat does not currently pass any theme context (light/dark) to CodeMirror
• CSS-only overrides are insufficient because the default CodeMirror theme is designed for light backgrounds.

Because of this, the editor does not visually respond to theme changes.

Server Setup Information:

• Version of Rocket.Chat Server: develop (local development setup)
• License Type: Community (default local license)
• Number of Users: Local development instance (single user)
• Operating System: Linux
• Deployment Method: Local development (Meteor)
• Number of Running Instances: 1
• DB Replicaset Oplog: Enabled (default local MongoDB setup)
• NodeJS Version: v22.x (as required by current develop branch)
• MongoDB Version: MongoDB 7.x (local)

Client Setup Information

• Desktop App or Browser Version: Google Chrome (latest)
• Operating System: Linux

Additional context

Code investigation details:

The editor is implemented using CodeMirror v5 and is located at:

apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/

Key files involved:

• CodeMirror.tsx (CodeMirror initialization)
• CodeMirrorBox.tsx (wrapper component)

CodeMirror addons and modes are imported from:
apps/meteor/app/ui/client/lib/codeMirror/codeMirror.ts

Observations:

• CodeMirror is always initialized with the default theme (cm-s-default)
• No dark CodeMirror theme is loaded or applied
• Theme imports exist but are commented out
• Rocket.Chat does not currently pass light/dark theme context into CodeMirror
• CSS-only overrides are insufficient because the default CodeMirror theme is inherently light

This issue was raised to discuss the preferred approach before attempting a larger architectural change.

Relevant logs:

No relevant server logs. This issue appears to be purely UI-related.

[jainAmishhh]

I investigated a few possible approaches locally, but since a proper fix may require touching more than a single file (for example, how CodeMirror themes are loaded and initialized), I wanted to ask for guidance before proceeding further.

Would a PR that introduces explicit dark-mode handling for CodeMirror be acceptable? If so, is there a preferred approach or existing pattern in the codebase that I should follow?