Introducing OSMD dark mode

image
A music sheet in OSMD’s dark mode 😎

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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top