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%