Theming
Inspect has 16 css variables that can be set directly on the component or via a
(global) class.
If you have favorite base16 color-scheme it
should probably be supported very well. The variables base04, base06 and base0F is currently not used by any default components, but is still defined and can be used in custom components.
More fine-grained control might be implemented in the future.
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: #d1ae00;
--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="#d1ae00"
--base0A="#ffd285"
--base0B="#8fff96"
--base0C="#81eced"
--base0D="#81ecee"
--base0E="#ff8af5"
--base0F="#FFFFFF" />