CSS Variable Reference

The following CSS Variables can be modified to affect the style of the Packet Viewer components.

Borders

Variable	Default Value
--pv-border-color	#d5d5d5
--pv-border	1px solid var(--pv-border-color)
--pv-border-radius	8px
--pv-decode-tab-border	1px solid #ccc

Colors

Variable	Default Value
--pv-color-error	red
--pv-color-hover	rgba(2, 156, 253, 0.07)
--pv-color-primary	rgb(107, 162, 229)
--pv-color-success	rgb(127, 192, 151)

Filter Bar

Variable	Default Value
--pv-filter-bar-alignment	flex-end
--pv-filter-bar-width	50%
--pv-filter-suggest-height	20rem
--pv-filter-suggest-width	15rem
--pv-invalid-display-filter-color	rgba(228, 128, 128, 0.5)
--pv-valid-display-filter-color	rgba(128, 228, 128, 0.5)

Follow-Stream Colors

Variable	Default Value
--pv-follow-stream-client-bg	rgb(251, 237, 237)
--pv-follow-stream-client-fg	rgb(135, 14, 14)
--pv-follow-stream-server-bg	rgb(237, 237, 251)
--pv-follow-stream-server-fg	rgb(0, 0, 127)

Spacing

Variable	Default Value
--pv-gap-small	0.5rem;
--pv-gap-medium	1.5rem;
--pv-padding-small	0.25rem;
--pv-padding-normal	1rem;

Packet List

Variable	Default Value
--pv-packet-list-header-height	30px
--pv-packet-list-header-resize-height	50%
--pv-packet-list-header-resize-width	1px
--pv-packet-list-row-border-style	none
--pv-handle-width	0.25rem
--pv-selected-packet-bg	rgb(165, 205, 255)
--pv-selected-packet-fg	rgb(255, 255, 255)

UI Elements

Variable	Default Value
--pv-ui-bg	rgb(255, 255, 255)
--pv-ui-border	1px solid var(--pv-border-color);
--pv-ui-border-radius	0.25rem;
--pv-ui-color	#333;
--pv-status-bar-bg	var(--pv-ui-bg)
--pv-ui-secondary-bg	#eee
--pv-ui-secondary-color	#666

Fonts

Variable	Default Value
--pv-ui-font	Inter, system-ui, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’
--pv-ui-line-height	1.25em
--pv-ui-font-normal	0.875rem;
--pv-ui-font-small	0.75rem
--pv-data-font-family	‘Roboto Mono’, monospace;
--pv-data-font-size	0.75rem;
--pv-data-line-height	1rem;
--pv-stack-trace-font-size	90%