Customizing User Interface
MJS Diagram Viewer and Editor are web components meaning that among other things their shadow DOMs are isolated from the styles of the application containing them. This avoids styling conflicts and side effects, but it also means that you don't get full access to customization of MJS Diagram UI.
Having said that, MJS Diagram components expose a way to adjust colors and some other stylings via CSS variables (also known as custom properties). You can set MJS Diagram specific variables in your CSS to adjust how the components look.
Additionally, future versions of MJS Diagram will expose various parts for further customization via the CSS ::part pseudo-element.
Editor customization
CSS variables for DiagramEditor customization adhere to --mjsdiae-<setting> format.
--mjsdiae-fore-color- toolbar button and text color.--mjsdiae-accent-color- accent color used for highlighting active elements.--mjsdiae-accent-color2- used for new item thumbnail fills.--mjsdiae-background-color- toolbar and toolbox background color.--mjsdiae-background-color-hover- toolbar button background on hover.--mjsdiae-border-color- toolbar button border color.--mjsdiae-border-color-hover- toolbar button border color on hover.--mjsdiae-panel-border-color- border color for panels (toolbar, properties panel).--mjsdiae-panel-separator-color- separator color for panels in the property panel.--mjsdiae-input-background-color- background color for inputs.--mjsdiae-input-background-color-focus- background color for inputs in focus.--mjsdiae-input-fore-color- input text color.--mjsdiae-newstencil-background-color- new stencil box background color.--mjsdiae-newstencil-background-color-hover- new stencil box background on hover.--mjsdiae-canvas-background-color- canvas around/behind the edited diagram document.
Here's a demo of a customized diagram editor:
Viewer customization
CSS variables for DiagramViewer customization adhere to --mjsdiav-<setting> format.
--mjsdiav-canvas-background-color- background color of the canvas behind and around the diagram document.--mjsdiav-canvas-filter- CSS filter to be added to the canvas for effects like drop shadow.--mjsdiav-tb-background-color- background color for the zooming controls toolbar.--mjsdiav-tb-border-color- border color for the zooming controls toolbar.--mjsdiav-tb-fore-color- fore color for the zooming controls toolbar.--mjsdiav-tb-button-border-color- toolbar button border color.--mjsdiav-tb-background-color-hover- toolbar button background color on hover.--mjsdiav-tb-button-border-color-hover- toolbar button border color on hover.
And here's a demo of a customized diagram viewer: