@json-edit-react/themes

Pre-built themes for json-edit-react.

🚨 IMPORTANT

Requires json-edit-react version 2.x

Install

npm install @json-edit-react/themes
# or
yarn add @json-edit-react/themes
# or
pnpm add @json-edit-react/themes

json-edit-react is a peer dependency.

Usage

import { JsonEditor } from 'json-edit-react'
import { githubDarkTheme } from '@json-edit-react/themes'

;<JsonEditor data={data} setData={setData} theme={githubDarkTheme} />

Available themes

| Name | Import | | --------------- | --------------------- | | Github Light | githubLightTheme | | Github Dark | githubDarkTheme | | White & Black | monoLightTheme | | Black & White | monoDarkTheme | | Candy Wrapper | candyWrapperTheme | | Psychedelic | psychedelicTheme | | Solarized Light | solarizedLightTheme | | Solarized Dark | solarizedDarkTheme | | Dracula | draculaTheme | | Monokai | monokaiTheme | | Tokyo Night | tokyoNightTheme | | r18jv | r18jvTheme | | TMF | tmfTheme |

Preview them all at the json-edit-react demo

Theme credits

Several themes adapt established colour schemes. The palettes belong to their original authors; all credit goes to them.

| Colour scheme | Author | License | Theme(s) | | ---------------------------------------------------------------- | ----------------------------------- | ------- | ------------------------------------------- | | Solarized | Ethan Schoonover | MIT | solarizedLightTheme, solarizedDarkTheme | | Dracula | Zeno Rocha & the Dracula Theme team | MIT | draculaTheme | | Tokyo Night | enkia | MIT | tokyoNightTheme | | Monokai | Wimer Hazenberg | — | monokaiTheme |

monokaiTheme adapts the palette of the original Monokai colour scheme; it has no affiliation with the commercial Monokai Pro.

Icon set credits

Several themes ship their own icon glyphs, sourced from the following open icon sets. Glyph paths are inlined (and recoloured via each theme's palette); all credit goes to the original authors.

| Icon set | License | Used by | | ---------------------------------------------------------------- | ---------- | --------------------------------------------------- | | Lucide | ISC | solarizedDarkTheme, solarizedLightTheme | | Phosphor Icons | MIT | draculaTheme (Duotone), tokyoNightTheme (Light) | | Pixelarticons | MIT | monokaiTheme | | MingCute | Apache-2.0 | candyWrapperTheme | | Octicons | MIT | githubDarkTheme, githubLightTheme | | Solar (by 480 Design) | CC BY 4.0 | psychedelicTheme |

License

MIT

Theme code is MIT-licensed. Adapted colour palettes are credited under Theme credits, and bundled icon glyphs remain under their respective licenses listed under Icon set credits above.