mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeEditor
synced 2024-11-13 17:53:17 +00:00
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:
parent
0fd08102b5
commit
8b7b17f9ee
|
@ -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( {
|
||||
|
|
Loading…
Reference in a new issue