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 display
╰ 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.
Launch Demo
See this dark mode live with our online technical demos.
