Support dark mode in CodeEditor

This uses JS to figure out if the user is currently in dark mode and set
the Ace theme accordingly. This means the theme doesn't reconfigure if
the user or the OS switches dark mode on/off while CodeEditor is open,
but this is better than nothing.

Ace theme 'monokai' is used for dark mode, and 'textmate' is used for
light mode, as before.

Bug: T375982
Change-Id: Icd683ee51cb86b3352d8f23f652b4ce7a6174b4d
This commit is contained in:
Siddharth VP 2024-09-30 00:15:05 +05:30
parent 0fd08102b5
commit 8b7b17f9ee

View file

@ -366,10 +366,17 @@
context.codeEditor.setReadOnly( $box.prop( 'readonly' ) );
context.codeEditor.setShowInvisibles( context.showInvisibleChars );
var htmlClasses = document.documentElement.classList;
var inDarkMode = htmlClasses.contains( 'skin-theme-clientpref-night' ) || (
htmlClasses.contains( 'skin-theme-clientpref-os' ) &&
window.matchMedia && window.matchMedia( '(prefers-color-scheme: dark)' ).matches
);
// The options to enable
context.codeEditor.setOptions( {
enableBasicAutocompletion: true,
enableSnippets: true
enableSnippets: true,
theme: inDarkMode ? 'ace/theme/monokai' : 'ace/theme/textmate'
} );
context.codeEditor.commands.addCommand( {