Customize the appearance

You can customize the appearance by the following ways.

Style

You can customize the style by passing style, className and sx (opens in a new tab) props.

<JsonViewer style={{ backgroundColor: 'red' }} className="custom-class" sx={{ backgroundColor: 'red' }} />

Theme

Pass theme prop to JsonViewer component. The default value is light.

Options

Available values are light, dark and auto. If you pass auto, the theme will be changed automatically according to the system theme.

<JsonViewer
  theme={theme} // 'light', 'dark' or 'auto'
/>

Sets of classes are binded to the component root to reflect the current theme. You can also use this to customize the appearance.

• json-viewer-theme-light
• json-viewer-theme-dark
• json-viewer-theme-custom when a theme object being passed

Base 16 Theme

You can also pass Base 16 (opens in a new tab) theme object to fine-tune the appearance.

import type { NamedColorspace } from '@textea/json-viewer'
 
export const ocean: NamedColorspace = {
  scheme: 'Ocean',
  author: 'Chris Kempson (http://chriskempson.com)',
  base00: '#2b303b',
  base01: '#343d46',
  base02: '#4f5b66',
  base03: '#65737e',
  base04: '#a7adba',
  base05: '#c0c5ce',
  base06: '#dfe1e8',
  base07: '#eff1f5',
  base08: '#bf616a',
  base09: '#d08770',
  base0A: '#ebcb8b',
  base0B: '#a3be8c',
  base0C: '#96b5b4',
  base0D: '#8fa1b3',
  base0E: '#b48ead',
  base0F: '#ab7967'
}
 
<JsonViewer
    theme={ocean}
/>

The good old css way

Different part of the dom structure will have class names like data-object-start, json-type-label, json-function-start and so on. You can use these class names to customize the detailed appearance.

This is the list of class names. 🧐

• data-key
• data-key-pair
• data-key-key
• data-key-colon
• data-key-toggle-expanded
• data-key-toggle-collapsed
• data-type-label
• data-object
• data-object-start
• data-object-body
• data-object-end
• data-function
• data-function-start
• data-function-body
• data-function-end
• data-value-fallback

.json-viewer .data-object-start {
  color: red;
}