For most IDA widgets, a custom background was already possible using standard Qt stylesheets (examples, reference). But since the IDA 8.2 release you can also do it for disassembly listings! (and “Structures”, “Enums”, “Pseudocode”, …)
To achieve this, you would typically want to define a new theme that extends an existing one and adds only the necessary CSS code.
If you inspect a fresh IDA install, you will notice the following folder structure in IDA’s installation directory:
themes/ ├── _base │ └── theme.css ├── darcula │ └── theme.css ├── dark │ ├── icons │ │ ├── expand.png │ │ └── spacer.png │ └── theme.css └── default └── theme.css
Each folder in there represents a theme that can be selected through
Options > Colors….
In order to add a new theme, you have 2 options:
- Add it in the above IDA installation directory, or
- Add it to the user’s
Picking option #1 will make the theme available for all users on the machine but might require admin rights. Moreover, the theme will not be picked up by future versions of IDA if you install those in other folders.
That’s why we recommend using option #2, and will be storing our theme resources there.
Defining a new theme
We will extend the existing “default” theme only to add a floral background to listings.
On a Linux machine, where the default value of
~/.idapro/, this would typically look like this:
$ tree ~/.idapro/themes/ /home/<user>/.idapro/themes/ └── flowers ├── flowers.png └── theme.css
flowers.png is a variation of the file available here, and
$ cat ~/.idapro/themes/flowers/theme.css @importtheme "default";
qproperty-line-bg-default: rgba(255, 255, 255, 0);
background: white url(“$RELPATH/flowers.png”);
background-position: bottom right;
With this in place, the user can now pick the
flowers theme from IDA’s
Options > Colors… dialog and enjoy working with the new theme:
The image and CSS resources presented in this blog post can be downloaded here. Enjoy!
Take a look at one of our past tutorials on CSS-based styling
Article Link: Styling IDA listings background with CSS – Hex Rays