jsMind

theme Option

Option Name Data Type Default Value Description
theme string null Theme

Usage

The theme option is used to specify the theme name for jsMind. By setting different themes, you can change the overall appearance of the mind map.

Built-in Themes

jsMind provides 15 themes:

You can visit the feature examples page to view these themes.

Configuration Example

Below is a configuration example that includes the theme option:

var options = {
    container: 'jsmind_container', // Container ID
    theme: 'primary', // Theme
};

In the above example, the theme option is set to primary, which uses the default primary theme.

Custom Themes

In addition to using the default themes, you can also add your own custom themes. The style definitions can be added in the jsmind.css file or any other stylesheet. Simply add the style definitions in the following format:

/* greensea theme */                                                      /* greensea is the theme name */
jmnodes.theme-greensea jmnode{background-color:#1abc9c;color:#fff;}       /* node style */
jmnodes.theme-greensea jmnode:hover{background-color:#16a085;}            /* node style on hover */
jmnodes.theme-greensea jmnode.selected{background-color:#11f;color:#fff;} /* selected node style */
jmnodes.theme-greensea jmnode.root{}                                      /* root node style */
jmnodes.theme-greensea jmexpander{}                                       /* expander style */
jmnodes.theme-greensea jmexpander:hover{}                                 /* expander style on hover */

copyright notice

Reproduction and deduction are prohibited.

The jsMind project is still being updated and the corresponding documentation is updated at the same time as the version is updated. In order to avoid confusion to the user, it is forbidden to reprint this document without written permission and to make changes of any kind to this document.