Svelte <Inspect {value} />

Defining a theme

Add your custom theme class to a global css file and import it, then set the theme-class using the class or theme-prop on the inspect component or via global options.

.my-inspect-theme {
--base00: #1e2c3e;
--base01: #31455e;
--base02: #151d29;
--base03: #6d819c;
--base04: #FFFFFF;
--base05: #dbdbdc;
--base06: #fff2c2;
--base07: #FFFFFF;
--base08: #ff5c7c;
--base09: #ff9f6b;
--base0A: #ffd285;
--base0B: #8fff96;
--base0C: #81eced;
--base0D: #81ecee;
--base0E: #ff8af5;
--base0F: #FFFFFF;
}

Alternatively, set css variables directly on the component.

<Inspect
  theme=""
--base00="#1e2c3e"
--base01="#31455e"
--base02="#151d29"
--base03="#6d819c"
--base04="#FFFFFF"
--base05="#dbdbdc"
--base06="#fff2c2"
--base07="#FFFFFF"
--base08="#ff5c7c"
--base09="#ff9f6b"
--base0A="#ffd285"
--base0B="#8fff96"
--base0C="#81eced"
--base0D="#81ecee"
--base0E="#ff8af5"
--base0F="#FFFFFF"
/>

Extended customization

Behind the scenes, the base16 theme is mapped to internal CSS-variables. This mapping can be overriden by setting additional CSS-variables on your custom theme class or passing them to the component.
See the full overview of available css-variables than can be passed to Inspect.

<Inspect
theme="inspect"
value={...}
--inspect-background="linear-gradient(45deg, var(--base00) 50%, hotpink)"
--caret-color="white"
--caret-focus-color="hotpink"
--bullet-color="hotpink"
--string-value-color="var(--base08)"
/>