Customize Theme
Personalize your diagram appearance with custom colors for nodes, edges, and text elements
ToDiagram allows you to fully customize the visual appearance of your diagrams by creating custom color themes. You can change colors for nodes, edges, text elements, and more to match your brand or personal preferences.
Overview
The custom theme feature provides granular control over:
- Node colors: Background, borders, dividers, hover states, search highlights
- Edge colors: Connection lines, labels, hover states
- Text colors: Keys, values, data types (numbers, booleans, null), collapse buttons
Your custom theme is saved locally and persists across sessions.
Accessing Theme Customization
Open the Theme Editor
Click the paint palette icon in the diagram toolbar to open the Custom Theme modal.
Choose a Category
The theme editor has three tabs:
- Node: Customize node backgrounds, borders, and states
- Edge: Customize connection lines and labels
- Text: Customize text colors for different data types
Customize Colors
Select any color property and use the color picker to choose your desired color. Each property shows a descriptive label explaining what it controls.
Theme Properties
Node Properties
| Property | Description |
|---|---|
| Node Background | Default background color for nodes |
| Node Border | Default border color for nodes |
| Node Divider Line | Horizontal lines separating node rows |
| Node Border (Hovered) | Border color when hovering over a node |
| Node Background (Search Match) | Background color for nodes matching search |
| Node Border (Search Match) | Border color for nodes matching search |
| Node Background (Changed) | Background color for modified nodes |
| Node Border (Changed) | Border color for modified nodes |
| Container Node Background | Background for parent/container nodes |
| Array/Object Row Background | Background for array/object header rows |
Edge Properties
| Property | Description |
|---|---|
| Edge | Default color for connection lines |
| Edge Label | Text color for edge labels |
| Edge (Hovered) | Color when hovering over an edge |
| Edge (Changed) | Color for modified edges |
Text Properties
| Property | Description |
|---|---|
| Text (Default) | Default text color |
| Row Key | Color for object keys/property names |
| Number | Color for numeric values |
| True | Color for boolean true values |
| False | Color for boolean false values |
| Null Value | Color for null values |
| Parent Row | Color for parent/header row text |
| Search Match | Text color for search matches |
| Search Mismatch | Text color for non-matching items during search |
| Collapse Button | Background color for collapse buttons |
| Collapse Icon | Icon color within collapse buttons |
| Array Indicator | Color for array count indicators |
Theme Actions
Enable/Disable Theme
Toggle the "Enable Custom Theme" checkbox to turn your custom theme on or off without losing your customizations.
Color Grouping
Enable "Color Grouping" to automatically assign different colors to related nodes based on their position in the data hierarchy. This helps visualize data structure more clearly.
Reset Theme
Click the reset icon (rotate CCW) to restore all colors to their default values.
Download Theme
Click the download icon to export your custom theme as a JSON file. This allows you to:
- Back up your theme configuration
- Share themes with team members
- Version control your themes
Example theme JSON:
{
"NODE": {
"NODE": "#ffffff",
"NODE_BORDER": "#BCBEC0",
"LINE_COLOR": "#e0e0e0",
"PARENT_ROW": "#e2e2e2ff"
},
"EDGE": {
"EDGE": "#BCBEC0",
"LABEL": "#909090"
},
"TEXT": {
"TEXT": "#000000",
"ROW_KEY": "#5199FF",
"NUMBER": "#D2AA1B"
}
}Upload Theme
Click the upload icon to import a previously saved theme JSON file. This will immediately apply all colors from the file.
When uploading a theme, you can leave any color property as an empty string ("") to use the default color for that element.
Live Preview
The theme editor includes a live preview showing how your color choices affect the diagram appearance. The preview updates in real-time as you modify colors.
The preview demonstrates:
- Two connected nodes with different depths
- Parent row headers
- Key-value pairs
- Edge connections with labels
- Collapse buttons
Applying Your Theme
Configure Colors
Adjust colors in each category (Node, Edge, Text) to your preference.
Review Preview
Check the live preview to ensure your theme looks as expected.
Apply Theme
Click the "Apply" button to activate your custom theme on the current diagram.
Your theme will be automatically saved and applied to all diagrams until you disable it or reset to defaults.
Best Practices
Contrast & Readability
- Ensure sufficient contrast between text and background colors
- Test your theme with both light and dark editor backgrounds
- Consider accessibility when choosing color combinations
Consistency
- Use similar hues for related elements (e.g., all node borders)
- Maintain consistent brightness levels for interactive states
- Create distinct colors for different data types
Brand Alignment
- Extract colors from your brand guidelines
- Export themes as JSON for version control
- Share theme files across your team for consistency
Troubleshooting
Custom themes are stored locally per browser. If you switch browsers or devices, you'll need to upload your saved theme JSON file.