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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| var __main_bg_color = "#141414"; | |
| var __main_text_color = "#f6f6f6"; | |
| var __document_color = "#262626"; | |
| TXTextControl.addEventListener("textControlLoaded", function () { | |
| TXTextControl.displayColors.setDesktopColor(__main_bg_color); | |
| TXTextControl.displayColors.setDarkShadowColor(__main_bg_color); | |
| TXTextControl.displayColors.setLightShadowColor(__main_bg_color); | |
| TXTextControl.setBackColor(__document_color); | |
| TXTextControl.selection.setFontName("Calibri"); | |
| TXTextControl.selection.setFontSize(12); | |
| TXTextControl.selection.setForeColor(__main_text_color); | |
| TXTextControl.statusBar.displayColors.setForeColor(__main_text_color); | |
| TXTextControl.statusBar.displayColors.setBackColorTop(__main_bg_color); | |
| TXTextControl.statusBar.displayColors.setBackColorMiddle(__main_bg_color); | |
| TXTextControl.statusBar.displayColors.setBackColorBottom(__main_bg_color); | |
| TXTextControl.verticalRulerBar.displayColors.setBackColor(__main_bg_color); | |
| TXTextControl.verticalRulerBar.displayColors.setGradientBackColor(__main_bg_color); | |
| TXTextControl.verticalRulerBar.displayColors.setForeColor(__main_text_color); | |
| TXTextControl.verticalRulerBar.displayColors.setRulerColor(__document_color); | |
| TXTextControl.rulerBar.displayColors.setBackColor(__main_bg_color); | |
| TXTextControl.rulerBar.displayColors.setGradientBackColor(__main_bg_color); | |
| TXTextControl.rulerBar.displayColors.setForeColor(__main_text_color); | |
| TXTextControl.rulerBar.displayColors.setRulerColor(__document_color); | |
| }); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| :root { | |
| --main-bg-color: #141414; | |
| --main-text-color: #f6f6f6; | |
| --button-selected: #3d3d3d; | |
| --button-outline: #757575; | |
| --divider: #666666; | |
| --button-hover: #3d3d3d; | |
| --tab-bg: #292929; | |
| } | |
| #ribbonbar { | |
| background-color: var(--main-bg-color) !important; | |
| border-bottom: 1px solid var(--main-bg-color) !important; | |
| } | |
| .ribbon-button img { | |
| filter: invert(100%); | |
| } | |
| #txTglBtnSideBars { | |
| border: 1px solid var(--ribbon-border-color); | |
| background-color: transparent !important; | |
| color: var(--main-text-color) !important; | |
| } | |
| .tx-btn-icon-chevron svg path { | |
| fill: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-button-selected { | |
| background-color: var(--button-selected); | |
| outline: 1px solid var(--button-outline) !important; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-group:last-child { | |
| border-right: none !important; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-group, #txTemplateDesignerContainer div.ribbon-group-control-group { | |
| border-right-color: var(--divider); | |
| } | |
| #txTemplateDesignerContainer .tab-content { | |
| background-color: var(--tab-bg); | |
| margin-left: 10px; | |
| border-radius: 5px; | |
| } | |
| .txui-widget-content { | |
| background-color: var(--main-bg-color) !important; | |
| color: var(--main-text-color) !important; | |
| } | |
| .txui-widget-header { | |
| color: var(--main-text-color) !important; | |
| } | |
| .txui-widget-content table { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer .txSidebar .sidebarHeaderTitle { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer .txui-menu div.large-menu-item-long-caption-container { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer .txui-menu div.large-menu-item-long-caption-container p:last-child, | |
| #txTemplateDesignerContainer .txui-menu div.large-menu-item-long-caption-container h1 { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer .txInsertTableWizard { | |
| background-color: var(--main-bg-color); | |
| } | |
| #txTemplateDesignerContainer select, .txDialog select { | |
| color: var(--main-text-color) !important; | |
| background-color: transparent !important; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-group-content input:disabled[type=number], #txTemplateDesignerContainer div.ribbon-group-content input:disabled[type=text] { | |
| background-color: transparent !important; | |
| border-color: #ddd; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-group-content input[type=number], #txTemplateDesignerContainer div.ribbon-group-content input[type=text] { | |
| background-color: transparent !important; | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer select { | |
| border-radius: 3px; | |
| } | |
| #txTemplateDesignerContainer .txui-widget-content a { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer select option { | |
| background-color: var(--main-bg-color) !important; | |
| } | |
| #txTemplateDesignerContainer ul.txui-menu li.txui-menu-item a.txui-state-focus { | |
| background-color: var(--button-hover) !important; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-button { | |
| border-radius: 3px; | |
| outline: 1px solid transparent; | |
| } | |
| #txTemplateDesignerContainer div.ribbon-button:not(.txui-state-disabled):hover { | |
| background-color: var(--button-hover) !important; | |
| } | |
| #txTemplateDesignerContainer ul.tabs li a { | |
| color: var(--main-text-color) !important; | |
| } | |
| #txTemplateDesignerContainer ul.tabs { | |
| background-color: var(--main-bg-color) !important; | |
| } | |
| #txTemplateDesignerContainer div.scroll-button { | |
| background-color: var(--main-bg-color); | |
| } | |
| #txTemplateDesignerContainer div.scrollbar-wrapper { | |
| background-color: var(--main-bg-color) !important; | |
| } | |
| #txTemplateDesignerContainer div.txui-slider { | |
| border-radius: 0; | |
| position: relative; | |
| background: none !important; | |
| border: none !important; | |
| } | |
| #txTemplateDesignerContainer ul.tabs li a:hover { | |
| background-color: var(--main-bg-color) !important; | |
| } | |
| #txTemplateDesignerContainer ul.tabs li a:hover:after { | |
| position: absolute; | |
| display: block; | |
| border-bottom-width: 3px; | |
| border-bottom-style: solid; | |
| border-bottom-color: var(--divider); | |
| height: 10px; | |
| width: calc(100% - 32px); | |
| bottom: 0; | |
| left: 16px; | |
| content: ""; | |
| } |
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| .ribbon-button img { | |
| filter: invert(100%); | |
| } |
This will invert the icon colors to match the dark mode.
Launch Demo
See this dark mode live with our online technical demos.
