Theme Editor interface¶
The Theme Editor allows customizing the Navigator's visual appearance without modifying code. Every change is immediately reflected in a preview, allowing you to see the final result while working. The theme is saved in a JSON file.
General layout¶
The interface is divided into two main side-by-side areas.
Left column¶
In the left column, at the top there are buttons for general actions:
- Open: to open a theme file.
- Save: to save the theme to a file.
- RESET: to restore the theme to default values.
Below the buttons are control panels organized in expandable sections, each section groups related settings. The sections are:
- Brand: contains corporate branding elements.
- Typography: defines the font to use.
- Colors: defines colors for various graphic elements, subdivided into blocks by element type.
Brand section¶
The brand section controls the corporate identity elements that appear in the Navigator in the top right corner.
- Company Name: the field for the company name allows entering text that appears next to or below the logo. If you don't want to show the name, just leave the field empty.
- Logo URL: the logo field accepts a URL pointing to the logo image. It can be an external URL or a relative path to a file in the project folder or, better, to a subfolder. Dimensions are automatically adapted to not interfere with the content.
- Website URL: the website URL makes the logo and company name (if present) clickable. The user can click to visit the site in a new tab.
Typography section¶
The typography section controls the font used throughout the interface.
A dropdown menu presents the available options. The first option is "System Default", which uses the device's system font without loading external fonts.
The other options are Google Fonts: - Inter - Roboto - Open Sans - Lato - Montserrat - Poppins - Source Sans 3 - Nunito
When selecting one of these, the font is automatically loaded from Google and applied to the interface.
The preview immediately shows the effect of the font change on headings, text, and buttons.
Colors section¶
The colors section is the most detailed, with controls for every interface element.
- Base Colors: general colors define the page background, the main text color, the secondary text color (used for less important information), the accent color (used to highlight interactive elements). Each control is a color picker that opens a panel to choose the desired shade. The hexadecimal value is visible and directly editable for those who prefer to enter precise color codes.
- Buttons: choice buttons have separate controls for each state: background color and text color for unexplored choices, for choices already made, for choices explored but not in the current path. This chromatic distinction helps the user understand what they've already seen when going back to explore alternative paths. The restart button has its own colors, typically different from choice buttons to visually distinguish it.
- Map: the map block controls the tree visualization colors: the current node, visited nodes, nodes not yet reached, connection lines. These colors should be consistent with button colors to maintain a consistent visual language.
Live preview¶
The preview area on the right shows a working Navigator with a sample scenario and map. Every change to the controls is instantly reflected in the preview.
The preview uses a simple predefined scenario. To see how the theme works with the real scenario, you need to save the theme and load it in the actual Navigator.
Typical workflow¶
The typical flow involves starting from an existing theme or default values, modifying settings while checking the effect in the preview, saving the result as a JSON file.
The saved theme file must then be specified in the project's config.json configuration file, associating it with the desired scenario.
It's possible to create multiple different themes for the same scenario, for example a light and dark version, or customized themes for different clients.