This is a full list of css variables that can be set to override colors or define a custom theme for
Svelte
<Inspect {value} /> components.
| Variable | Role |
| --base00 | |
| --base01 | - row hover background
- null-type background
|
| --base02 | |
| --base03 | - border
- expand button
- length
|
| --base04 | |
| --base05 | |
| --base06 | |
| --base07 | |
| --base08 | - number / boolean type indicator
- error value
- html tag
- key prefixes (get / set / static)
|
| --base09 | |
| --base0A | |
| --base0B | - function name
- html attribute color
|
| --base0C | - object type indicatorr
- array type indicator
- node notes (json parsed, store value)
- date value
- url value
- symbol value
- class instance
|
| --base0D | |
| --base0E | - string type indicator
- number value
- boolean value
- button color
|
| --base0F | |
| Variable | Default |
| --inspect-background | none |
| --inspect-font-size | 12px |
| --inspect-font | monospace |
| --inspect-min-width | 360px |
| --inspect-max-width | 100% |
| --inspect-width | 100% |
| --background-color | var(--base00) |
| --hover-color | var(--base01) |
| --text-selection-background | var(--base02) |
| --text-search-highlight-color | var(--base0A) |
| --text-search-highlight-fg-color | var(--base01) |
| --text-search-highlight-border-top | none |
| --text-search-highlight-border-bottom | none |
| --text-search-highlight-border-left | none |
| --text-search-highlight-border-right | none |
| --text-search-highlight-outline | none |
| --text-search-highlight-decoration | none |
| --indent-color | var(--base03) |
| --indent | 0.75em |
| --indent-compact | 0.5em |
| --padding | 0.25em 0 |
| --padding-compact | 0.25em 0 |
| --length-color | var(--base03) |
| --border-color | var(--base03) |
| --border-radius | 8px |
| --bullet-color | var(--base03) |
| --comment-color | var(--base03) |
| --caret-color | var(--base03) |
| --key-whitespace-color | var(--base03) |
| --key-whitespace-opacity | 0.5 |
| --tools-background-color | var(--base00) |
| --tools-background-color-borderless | transparent |
| --tools-border-color | var(--base03) |
| --caret-focus-color | var(--base05) |
| --caret-hover-color | var(--base05) |
| --text-color | var(--base05) |
| --child-update-flash-color | var(--base05) |
| --update-flash-color | var(--base06) |
| --delimiter-color | var(--base08) |
| --key-prefix-color | var(--base08) |
| --note-color | var(--base0C) |
| --button-color | var(--base0E) |
| --button-disabled-color | var(--base03) |
| --button-success-color | var(--base0B) |
| --promise-pending-color | var(--base0A) |
| --promise-fulfilled-color | var(--base0B) |
| --promise-rejected-color | var(--base0E) |
| --promise-bracket-color | var(--base03) |
| --error-color | var(--base08) |
| --string-value-color | var(--base0A) |
| --function-name-color | var(--base0B) |
| --function-var-color | var(--base0E) |
| --function-attribute-color | var(--base0E) |
| --function-comment-color | var(--base03) |
| --function-params-color | var(--base09) |
| --function-property-color | var(--base0B) |
| --symbol-value-color | var(--base0C) |
| --regex-value-color | var(--base0C) |
| --number-value-color | var(--base0E) |
| --bigint-value-color | var(--base0E) |
| --boolean-value-color | var(--base0E) |
| --class-name-color | var(--base0D) |
| --niltype-bg-color | var(--base01) |
| --niltype-text-color | var(--base05) |
| --number-type-color | var(--base08) |
| --bigint-type-color | var(--base08) |
| --boolean-type-color | var(--base08) |
| --symbol-type-color | var(--base09) |
| --regex-type-color | var(--base0B) |
| --array-type-color | var(--base0C) |
| --date-type-color | var(--base0C) |
| --map-type-color | var(--base0C) |
| --set-type-color | var(--base0C) |
| --url-type-color | var(--base0C) |
| --urlsearchparams-type-color | var(--base0C) |
| --object-type-color | var(--base0C) |
| --class-type-color | var(--base08) |
| --function-type-color | var(--base08) |
| --string-type-color | var(--base0E) |
