UI/UX

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 &#9584; TX Text Control .NET Server &#9584; JavaScript API &#9584; TXTextControl Object &#9584; displayColors Property The displayed colors of the text control. " data-tippy-interactive="true" data-tippy-placement="bottom" data-tooltip-width="wide"

>display Colors 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.

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.

: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:

.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.

Open Demos

TX Text Control .NET Server

DS Server

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

Blog

Core Technologies

Blog

Authors

Latest Posts

Support Resources

Documentation

Support

Getting Started

Other Resources

About Us

Industry events

Company

Contact

Newsletter

Legal

Sign in

Create account

Text Control Account

UI/UX

Post tagged with UI/UX in 2023

Server & Web

Windows Forms

WPF

ActiveX

Core Technologies

​

Latest Posts

​

Support

Getting Started

​

Other Resources

Company

Contact

Newsletter

Legal

Text Control Account

​

​

UI/UX

Post tagged with UI/UX in 2023 ​

April 2023

Post tagged with UI/UX in 2023