Styling QuPath
Starting with v0.4.0, QuPath can be styled using CSS. This makes it possible to generate custom themes.
Because most colors are derived from a few base ones, it’s possible to change quite a bit with just a few tiny tweaks. The result is not guaranteed to look good, but it can be fun to explore.
The process is
Create a .css file to define your theme
Drag the .css file onto QuPath to copy it to your QuPath user directory
If you don’t have a QuPath user directory defined already (i.e. a place to store styles, logs and extensions) then you’ll be prompted to create one
Select the theme under
Tip
This builds on JavaFX’s CSS support, which uses modena.css as the base theme.
Therefore if you really want to get into the details, check out
Changing the main color
To see this in action, create a file Unpleasant blue.css and add the contents below:
.root {
-fx-base: rgb(30, 28, 75);
-fx-light-text-color: rgb(200, 200, 255);
-fx-background: derive(-fx-base, -10%);
-fx-control-inner-background: derive(-fx-base, 10%);
}
Then drag the .css file onto QuPath, and selected it in the preferences. You should see something like the screenshow below.
This essentially defines a base color, and the color for text to show on top. Then everything else is derived from these.
To switch to red with white text, you can use the following .css:
.root {
-fx-base: rgb(130, 28, 25);
-fx-light-text-color: white;
-fx-background: derive(-fx-base, -10%);
-fx-control-inner-background: derive(-fx-base, -10%);
}
A more complex example
Setting the base color is just the start: there are lots more styles that can be specified to customize different aspects of QuPath’s appearance.
Dracula is a popular, open-source theme that is available for lots of software applications.
The .css below depicts a quick attempt to apply the colors defined in the dracula spec to QuPath, and in particular the script editor.
.root {
-qp-dracula-selection: #44475A;
-qp-dracula-comment: #6272A4;
-qp-dracula-red: #FF5555;
-qp-dracula-orange: #FFB86C;
-qp-dracula-yellow: #F1FA8C;
-qp-dracula-green: #50FA7B;
-qp-dracula-purple: #BD93F9;
-qp-dracula-cyan: #8BE9FD;
-qp-dracula-pink: #FF79C6;
-fx-base: #282A36;
-fx-light-text-color: #F8F8F2;
-fx-background: #282A36;
-fx-control-inner-background: derive(-fx-base, 10%);
-fx-control-inner-background-alt: derive(-fx-control-inner-background,1%);
-fx-accent: -qp-dracula-selection;
-qp-script-comment-color: -qp-dracula-comment;
-qp-script-error-color: -qp-dracula-red;
-qp-script-warn-color: -qp-dracula-orange;
-qp-script-string-color: -qp-dracula-yellow;
-qp-script-keyword-color: -qp-dracula-pink;
}
Updating a theme
When you drag a theme onto QuPath, it’s copied to the QuPath user directory - so if you want to update it (or uninstall it), that’s where you should look. Updating your original .css file outside the user directory won’t have any effect.
You can find the directory location under and QuPath user directory. Once you’ve found where it’s stored, you can edit a .css file that’s set as the current theme in QuPath.
If you do this, QuPath should recognize when changes are saved and automatically update. This might take a few seconds (particularly on macOS), but provides a way to interactively explore theme changes.