[update] add stylisation guides

Author: serhiipylypchuk1991

docs/guides/stylization.md

@@ -0,0 +1,89 @@
+---
+title: Stylization
+sidebar_label: Stylization
+description: You can learn about the stylization in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
+---
+
+# Stylization
+
+You can fully customize the appearance of DHTMLX RichText by overriding CSS variables and applying custom styles to specific parts of the widget.
+
+This guide shows how to apply a **dark theme** and use available class names to style the editor’s menubar, toolbar, popup, and content area.
+
+## Default structure and class names
+
+RichText uses the following core classes to structure its UI:
+
+| Class name             | Description                                 |
+|------------------------|---------------------------------------------|
+| `.wx-richtext`         | Root container of the RichText widget       |
+| `.wx-richtext-menu`    | Toolbar and menu area                       |
+| `.wx-richtext-popup`   | Popup panels (e.g., color picker, font size)|
+| `.wx-richtext-editor`  | Main editable content area                  |
+
+You can use these classes in your custom CSS selectors to override the appearance of the RichText editor.
+
+## Overriding default styles
+
+You can override RichText's default colors by redefining CSS variables on the `#root` container or on specific sub-elements:
+
+```html
+<div id="root" style="width: 100%; height: 100%;"></div>
+
+<style>
+  #root,
+  .wx-richtext-menu {
+    --wx-background: #404151;
+    --wx-background-alt: #212329;
+    --wx-color-primary: #14B195;
+    --wx-color-font: #FFFFFF;
+    --wx-border: 1px solid #6B6C79;
+    --wx-color-secondary-hover: rgba(20, 177, 149, 0.12);
+    --wx-button-active: rgba(20, 177, 149, 0.22);
+    --wx-icon-color: var(--wx-color-font);
+    --wx-color-font-alt: #9FA1AE;
+    --wx-color-font-disabled: #9FA1AE;
+    --wx-popup-border: var(--wx-border);
+
+    color-scheme: dark;
+  }
+
+  .wx-richtext-menu {
+    border: var(--wx-border);
+  }
+</style>
+```
+
+:::note
+These styles will apply a dark background, adjust button and icon colors, and improve visibility for dark UI themes.
+:::
+
+## List of supported CSS variables
+
+| Variable name                | Description                          |
+| ---------------------------- | ------------------------------------ |
+| `--wx-background`            | Background color of editor and popup |
+| `--wx-background-alt`        | Alternate background (menus and toolbar)|
+| `--wx-color-primary`         | Accent color for links               |
+| `--wx-color-font`            | Main font color (for editor, menubar, and toolbar)|
+| `--wx-color-font-alt`        | Alternate font color                 |
+| `--wx-color-font-disabled`   | Disabled text color (for menubar and toolbar elements)|
+| `--wx-border`                | Border style used across the editor  |
+| `--wx-color-secondary-hover` | Hover state background for buttons within menubar and toolbar  |
+| `--wx-button-active`         | Active state background for buttons within menubar and toolbar |
+| `--wx-icon-color`            | Color used for toolbar icons         |
+| `--wx-popup-border`          | Border for popup elements            |
+
+## Best practices
+
+* Apply custom styles **after** the RichText component is initialized
+* Use `color-scheme: dark` to improve native input styling in dark mode
+* Avoid changing layout-related properties (like `display`, `position`) unless necessary
+
+## Live demo
+
+In this snippet you can see how to apply a custom style to RichText:
+
+<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
+
+**Related articles:** [Customization](guides/customization.md)

sidebars.js

@@ -199,6 +199,7 @@ module.exports = {
                 "guides/initialization",
                 "guides/configuration",
                 "guides/localization",
+                "guides/stylization",
                 "guides/typescript_support"
             ]
         }