Skip to content

Dark Mode

Jump to bottom
William Saulnier edited this page Jul 9, 2019 · 1 revision

Dark Mode is comming soon to RoosterJS. Here are the dark mode specific changes that you can use in order to leverage RoosterJS's rich HTML editor inside of a dark themed application.

Goals

Our goal with the dark mode feature in RoosterJS is two fold.

  1. Provide a minimally opinionated set of APIs and features to enable consumers to use whatever dark mode styling they prefer.

  2. Ensure that HTML Content inserted into the editor surface can be converted or managed according to the consumer's needs.

How to Use

To enable dark mode, at a minimum, you must set in EditorOptions, the value inDarkMode to true.

You can further define a set of DarkModeOptions, used specifically when the editor is instantiated in dark mode. The two properties are:

  • onExternalContentTransform: A function with signature (htmlIn: HTMLElement) => void, which mutates the element with whatever changes the consumer wants done when content that is "light mode" is inserted into the editor. If this value is not defined, all color attributes and styles will be stripped.

  • transformOnInitialize: Controls if the editor will run its transform function (either the default or the one defined in onExternalCOntentTransform) when the editor is started. Set this to true if your editor will instantiate with content, and that content is designed for "light mode". Cases might be if you're editing a shared document, or are saving content as its light mode representation.

To customize the look and feel of dark mode, you can change the background color and text color of the editor by defining ModeIndependentColors for the two properties in DefaultFormat. The lightModeColor will be used normally, and the darkModeColor will be used if the editor is started in dark mode. By default, a set of colors is defined in DARK_MODE_DEFAULT_FORMAT which will override the normal default format if dark mode is enabled and no mode independent color is set.

All other relevant APIs and additional parameters are defined in our JSDocs, which you may browse to understand the new APIs and new properties available. We are constantly working to improve Dark Mode in RoosterJS, and invite you to open an issue or a pull request if you notice any problems or would like to see it improved for your own use case.

This project is the result of a lot of effort and has resulted in many fixes to RoosterJS core functionality. We hope you're as excited for it's release as we are.

Clone this wiki locally