@@ -17,15 +17,16 @@ RichText uses the following core classes to structure its UI:
1717| Class name | Description |
1818| ------------------------| ---------------------------------------------|
1919| ` .wx-richtext ` | Root container of the RichText widget |
20- | ` .wx-richtext-menu ` | Toolbar and menu area |
21- | ` .wx-richtext-popup ` | Popup panels (e.g., color picker, font size)|
22- | ` .wx-richtext-editor ` | Main editable content area |
20+ | ` .wx-richtext-menubar ` | Container for menubar |
21+ | ` .wx-richtext-menu ` | Container for menubar dropdown menu |
22+ | ` .wx-richtext-toolbar ` | Container for toolbar |
23+ | ` .wx-editor-area ` | Container for main editable content area |
2324
2425You can use these classes in your custom CSS selectors to override the appearance of the RichText editor.
2526
2627## Overriding default styles
2728
28- You can override RichText's default colors by redefining CSS variables on the ` #root ` container or on specific sub-elements:
29+ You can override RichText's default styles by redefining CSS variables on the ` #root ` container or on specific sub-elements:
2930
3031``` html
3132<div id =" root" style =" width : 100% ; height : 100% ;" ></div >
@@ -63,20 +64,19 @@ These styles will apply a dark background, adjust button and icon colors, and im
6364| Variable name | Description |
6465| ---------------------------- | ------------------------------------ |
6566| ` --wx-background ` | Background color of editor and popup |
66- | ` --wx-background-alt ` | Alternate background (menus and toolbar) |
67- | ` --wx-color-primary ` | Accent color for links |
67+ | ` --wx-background-alt ` | Alternate background for menubar |
68+ | ` --wx-color-primary ` | Accent color for links, blockquotes, and borders of resizing pictures |
6869| ` --wx-color-font ` | Main font color (for editor, menubar, and toolbar)|
6970| ` --wx-color-font-alt ` | Alternate font color |
7071| ` --wx-color-font-disabled ` | Disabled text color (for menubar and toolbar elements)|
7172| ` --wx-border ` | Border style used across the editor |
7273| ` --wx-color-secondary-hover ` | Hover state background for buttons within menubar and toolbar |
7374| ` --wx-button-active ` | Active state background for buttons within menubar and toolbar |
74- | ` --wx-icon-color ` | Color used for toolbar icons |
75+ | ` --wx-icon-color ` | Color for toolbar arrow icons used for dropdown |
7576| ` --wx-popup-border ` | Border for popup elements |
7677
7778## Best practices
7879
79- * Apply custom styles ** after** the RichText component is initialized
8080* Use ` color-scheme: dark ` to improve native input styling in dark mode
8181* Avoid changing layout-related properties (like ` display ` , ` position ` ) unless necessary
8282
0 commit comments