What’s the dark mode all about?
The new dark option enables developers using OSMD to set the music sheet background color and the music sheet color itself, for example to black and white. Sometimes people prefer this way of viewing text or sheet music as white (or lightly coloured) text against a black (or dark) background, for example at night – it significantly reduces the amount of light entering your eyes, and it doesn’t light up the environment like a torchlight, e.g. when using a tablet in a dimly lit room.
Rendering MusicXML in dark mode
Dark mode is currently a javascript option – Mostly usable by developers. The usage is outlined here: https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/issues/1125
Enabling dark mode in OSMD
Enable via setting the darkMode option:
osmd.setOptions({darkMode: true}); // or false. sets defaultColorMusic and PageBackgroundColor.
// osmd.render() // if necessary
Or enable manually via setting colors:
osmd.setOptions({defaultColorMusic: "#FFFFFF"});
osmd.EngravingRules.PageBackgroundColor = "#000000";
Note that enabling dark mode makes the cursor slightly more transparent, because making the page background color not transparent means we can’t just render the cursor on a different background layer, we also have to make it transparent, otherwise it would either not show at all or paint over notes. This adaptation is reverted when the background color is un-set again.
Future updates
Dark mode was added in OSMD 1.4.1. We’ve added a few more improvements since then and will keep you updated in further posts soon!
Check our changelog for recent improvements.
We are also constantly working on our OSMD Audio Player, which is currently sponsor-exclusive. Please consider sponsoring OSMD to help us improve sheet music software together!
https://github.com/sponsors/opensheetmusicdisplay
Future updates are always on the way too (maybe sooner than you think). Next up the update list is the WordPress premium plugin.
Let’s stay in touch
Other than new upgrades and plugins we’re very busy with making new content and screencasts about OSMD and sheet music in general. Join our Discord channel to meet other sheet music devs or showcase your projects. You can also become a sponsor to get exclusive goodies and early releases to our builds like the OSMD Audio Player, or just try the OSMD demos.
Iam writing to ask a question as I am a Sr. citizen who knows little about technology. My brother is blind in one eye from glaucoma and histhe sight in his rt. eye has been diminished by a botched cataract surgery. He is a pipe organist, but cannot see his music. He is able to read a restaurant menu when it is white print on black. When I googled I found your site and wondered if this “dark Mode” sheet music in any way be would be applicable to him. I have been seeking ways for him to play again as it is his whole life. I thank you, Carol H. Henry
Hello Carol,
we have added a button to our demo to enable dark mode.
We have also created a link that you can use that opens our demo with dark mode enabled automatically:
https://opensheetmusicdisplay.github.io/demo/?darkMode=1
On this page, you can drag and drop a MusicXML file from your computer into the browser, and it will be displayed in dark mode.
We hope that helps!