wikimedia/mediawiki-extensions-CodeEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeEditor synced 2024-11-23 14:56:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support dark mode in CodeEditor

Browse source 
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
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
modules/jquery.codeEditor.js
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( {