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 Edit ‣ Preferences…


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.


A rather unpleasant blue theme

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%);

Also an unpleasant red theme

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;

A dracula-inspired theme for QuPath

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 Edit ‣ Preferences… 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.