In addition to the themes bundled with the application, Wireshark looks for user-supplied themes in a personal themes directory:

(For Stratoshark, replace wireshark / Wireshark with stratoshark / Stratoshark.)

Personal themes are single .jsonc files dropped directly into that directory — there is no per-theme subdirectory. The filename (without the .jsonc extension) becomes the theme’s internal name and is what appears in the Theme dropdown. For example, midnight.jsonc shows up as a selectable theme named midnight.

The exact path can also be seen under Help → About Wireshark in the Folders tab, labelled Personal Themes. Help → Personal Themes Folder opens it in the file manager and offers to create it when it does not exist yet.

The file format is identical to the bundled themes; see the README.md next to the built-in default theme in the source distribution for the schema and the list of supported color tokens.

If a personal theme file shares a name with a built-in theme (for example default.jsonc), the built-in copy wins and the personal file is ignored with a warning on stderr. This guarantees that core themes the application falls back to can never be accidentally shadowed by a broken override.

Clicking a part of a sample selects its color in the Colors tab. Hovering over a sample names the color under the mouse pointer. The context menu of a sample lists all colors of that spot, toggles Show Coloring Rules for the packet list sample and saves the sample as an image. A part that no theme color paints selects nothing, and the status line says Not a theme color. Links have no color of their own; clicking a link selects the color it follows.

Figure 11.24. Clicking the selected packet selects packets.selection

The Colors tab shows the colors that a theme file can set. Type in Filter colors to show only the colors whose name contains the text. The description below the list explains where the selected color is used and which other colors it affects.

A color that is not set in the theme shows auto and its current value; it follows another color until you set it, and Go to in its context menu selects that color.

Figure 11.25. An auto color and its description

Every other color the user interface needs is derived: Wireshark computes it from one or more set colors, for example a darker shade of the highlight color for the Welcome Page header, or black or white text chosen to stay readable on a background. Derived colors are listed under Derived (read-only). They cannot be edited or stored in a theme file; the description below the list names the colors each one is computed from. To change a derived color, change its source: the context menu of a derived color has a Go to entry that selects the source color, such as Go to highlight, and entries such as Also uses window or Also uses HeaderText (derived) that select further sources. An Also uses entry that ends in (derived) leads to another derived color, from which you follow its Go to entry again.

Figure 11.26. Go to on a derived color

So the way from “this looks wrong” to the color to change is: click the element in a sample; if the selected color is auto or derived, follow Go to until you reach a color you can set.

A selected color shows its light and its dark value. Type a value as #rrggbb or pick it with Choose…​. A value that is not a color is marked, and the theme cannot be saved until it is fixed. Use Auto removes a set value, so that the color follows its source again; the required brand and accent colors are marked required and cannot be removed. The graphs group holds the graph colors, which are added and removed with Add Color and Remove Color.

A color you changed is marked edited, and a color whose value changed as a consequence of your edits is marked changed. Changed only shows only edited and changed colors. Revert next to the light or dark value of an edited color restores that value, and Revert Color in the context menu of an edited color restores both. The status line counts the edited and changed colors.

Figure 11.27. An edited color with Changed only selected

Unsaved changes are marked with an asterisk in the window title and in the theme list. Save saves a personal theme in place; for a bundled theme the button is Save As…​ and stores a new personal theme. Ctrl+S (Cmd+S on macOS) saves like Save; pressing Enter in a field does not save. Revert at the bottom of the dialog discards all unsaved changes. Closing the dialog or selecting another theme asks whether to save unsaved changes.

When the dialog was opened from the Internals menu, Use Theme saves nothing but makes the selected theme the active one. It is available only when the theme has no unsaved changes. In this case, saving the active theme applies the change right away. When the dialog was opened from the preferences, there is no Use Theme button. The theme saved in the designer is selected on the preferences page and becomes active when the preferences are accepted with OK. Cancelling the preferences keeps the theme that is currently active. If you delete the active theme from the preferences and then cancel them, the deletion takes effect for the running application on the next start, when Wireshark falls back to the default theme.

The Fonts tab sets the regular and the monospace font of the theme. Default values use the platform fonts and are not written to the file, so the theme stays portable. Revert Font in the context menu of a changed font restores it. If a monospace font is chosen on the Fonts preferences page, that font overrides the monospace font of the theme, and the Fonts tab says so in an information box that names the preferred font, for example “monospace 9.0”. That note appears whenever a monospace font preference is set, including the one a fresh profile already has.

Figure 11.28. The Fonts tab

The Code tab shows the theme file as it will be written, and whether it is valid. Compare with selects the theme or saved file the changes are counted against, and Previous Change and Next Change step through them. Copy to Clipboard copies the file text.

Figure 11.29. The Code tab comparing with the saved file

The packet list has selection colors of its own; every other view uses the selection color of the palette.

When these colors are not set, they follow other colors:

The hover color of each view is a tint of that view’s selection color over the list background, so it changes with the selection. The packet list shows a hover color only when Enable mouse-over colorization is selected on the Layout preferences page. Links follow the selection color of the palette as well, adjusted to stay readable.

Figure 11.30. Which color selects in which view

The consequence: in a theme that sets only brand.primary, the packet list selects with a pale tint of that color, while every other list selects with brand.primary itself. To make all views use the same selection color, set packets.selection; palette.highlight then follows it. To give the packet list a selection of its own, set palette.highlight as well; the packet list then uses packets.selection and every other view palette.highlight.

This example builds a green theme and shows why the packet list and the other lists can select in different greens, and how to make them match.

The Packet List sample paints its bytes pane in the packet list selection, while the packet bytes pane of the main window uses palette.highlight.

The saved file forest-green.jsonc in the personal themes folder looks like this:

// Forest Green
// Theme file for Wireshark and Stratoshark. Edit with View > Internals > Theme Designer.
{
    "meta": {
        "name": "Forest Green",
        "version": 1,
        "author": "Wireshark User"
    },
    "brand": {
        "primary": { "light": "#2e7d32", "dark": "#2f6b35" }
    },
    "accent": {
        "success": { "light": "#4caf50", "dark": "#8ae234" },
        "warning": { "light": "#e8652d", "dark": "#fcaf3e" },
        "error":   { "light": "#cc0000", "dark": "#ef2929" },
        "info":    { "light": "#3465a4", "dark": "#729fcf" }
    },
    "packets": {
        "selection": { "light": "#2e7d32", "dark": "#2f6b35" }
    }
}

The accent colors are the ones New…​ copied from the default theme.

To keep a packet list selection that differs from the other lists, for example one that suits your coloring rules, also set palette.highlight to the green and give packets.selection the color you want for the packet list.

The header of the Welcome Page has no color of its own and no gradient. It is derived: a darker shade of the selection color of the palette (palette.highlight), kept apart from the window color and readable under its title. The title is the selection text color when that is readable on the header, else black or white.

To change the header, change the color it follows: palette.highlight if the theme sets it, else packets.selection if the theme sets it, else brand.primary (see Section 11.7.4.1, “Selection and hover colors”). In the designer, select the header color under Derived (read-only) or click the header in the Welcome Page sample, and use Go to.

Every color has a light and a dark value, and every edit changes only the side selected in Appearance. To review the other side, select Dark (or Light) in the designer; the samples switch to that side. This does not change the appearance mode of the application.

Figure 11.34. The Dark side of Forest Green

A color that reads well on a light background can be too bright or too dull on a dark one, so check both sides of every color you set. Then use the theme and set Appearance mode on the Theme preferences page to Light and to Dark to see it in the whole application.