Dark modes are used to reduce blue light exposure and help readers read content in low-light situations. This example shows how to use CSS and JavaScript to implement a dark mode for the document editor.

JavaScript DisplayColors

All colors of the TX Text Control and the ribbon bar are fully customizable, allowing you to create any UI/UX mode, such as dark modes. The colors of the desktop, status bar and the rulers can be changed using the displayColors TX Text Control .NET Server for ASP.NET
JavaScript API
TXTextControl Object
displayColors Property
The displayed colors of the text control.
property of each element.

The following JavaScript code sets the background colors of all elements except the ribbon and scrollbars, which can be changed using CSS.


Ribbon Styles using CSS

The ribbon styles are changed using custom CSS that overrides the default style of the TX Text Control document editor. Basically, the backgrounds, hover and border colors, menu and text colors are changed.


Inverting Icons

The ribbon icons are SVGs, which makes it possible to use a filter to invert all of the images in a single CSS command:


This will invert the icon colors to match the dark mode.

TX Text Control dark mode

Launch Demo

See this dark mode live with our online technical demos.

Open Demos