Theming

Ready-for-use themes

Initially, 9 themes are available for use with the json2html function. These themes are in './themes/' folder and these are represented by the following files:

• andromeda.theme.js
• daylight.theme.js
• dracula.theme.js
• githubDark.theme.js
• githubLight.theme.js
• gruvboxDark.theme.js
• gruvboxLight.theme.js
• horizon.theme.js
• monokai.theme.js

Using a Theme in json2html

The main json2html function requires a theme to be passed via the theme parameter. To do this, you need to import the corresponding theme file and pass the imported variable as the parameter value. Example:

import draculaTheme from './themes/dracula.theme.js';

const htmlOutput = json2html({
  json: '{"exampleKey": "exampleValue"}',
  theme: draculaTheme,
});

This way, the theme defines the styling of the final interactive HTML block, ensuring a unified and visually appealing look.

Creating and using a custom theme

To create a custom theme for json2html, follow these steps:

1. Open './themes/user.theme.js' file in any convenient code editor;
2. Study the structure of the object with the theme. Each property has explanations. According to the explanations, set the color values ​​as you think necessary;
3. Export the theme object as a default export;
4. Then, just import your new custom theme by using:

import userTheme from "./themes/user.theme.js"

A custom themes provides flexibility to define custom colors and styles, allowing you to customize the look of the rendered HTML to match your preferences or project requirements.