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.

IDA themes

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:

1. Add it in the above IDA installation directory, or
2. Add it to the user’s $IDAUSR

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 $IDAUSR is ~/.idapro/, this would typically look like this:

$ tree ~/.idapro/themes/  
/home/<user>/.idapro/themes/  
└── flowers      
	├── flowers.png      
	└── theme.css  

where flowers.png is a variation of the file available here, and theme.css contains:

$ cat ~/.idapro/themes/flowers/theme.css  
@importtheme "default";    

CustomIDAMemo  
{      
	qproperty-line-bg-default: rgba(255, 255, 255, 0);
	background: white url("$RELPATH/flowers.png");
	background-attachment: fixed;      
	background-repeat: none;      
	background-position: bottom right;  
}    

ecfringe_t  
{      
	background: transparent;  
}    

TextArrows  
{      
	background: transparent;  
}    

IDAViewHost  
{      
	background: white;  
}  

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:

Resources

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