How to get ParaView Dark UI (Any OS, Any release)

mwestphal · June 9, 2020, 7:05am

GENERIC SOLUTION

It is possible to modify the aspect of the ParaView UI, eg like this:

Download this Qt style.qss (49.2 KB) from QDarkStyleSheet and then run ParaView with the following argument.

paraview -style=default -stylesheet=/absolute/path/to/style.qss

On Windows, one could then create a shortcut with the command.
On Linux, one could then create a shell script with the command.

This style is not perfect, so if you improve it, please feel free to share it.

===============================================

LINUX + SYSTEM QT ONLY SOLUTION

On Linux and with System Qt only, it is possible to use Qt5ct in order to have a full integration of your Qt system stylee, like this :

This trick works only on Linux and only if ParaView use the system Qt, e.g. when building ParaView or installing with a package manager.

This do not work with the ParaView binary release.

Install qt5ct and breeze
Run qt5ct.
Select “Breeze” style with custom “Darker” color scheme
export QT_QPA_PLATFORMTHEME=qt5ct
run ParaView

mwestphal · June 9, 2020, 7:06am

See here for a feature request to add this feature in ParaView: https://gitlab.kitware.com/paraview/paraview/-/issues/19980

steve_r · June 26, 2020, 10:19am

Hi Mathieu,

I’m new to Paraview, and started using it on a Windows 10 Laptop.
I was immediately looking to enable a dark UI theme, which I’m used to work with in other programs. Unfortunately, your trick doesn’t work on Windows.

Paraview ships with the WindowsVista Qt style, which I wasn’t able to adjust easily. However, it turns out that it’s possible to override the style and apply a custom stylesheet to get a pleasingly dark look. I took the qdarkstyle from the web and got the following result.

mwestphal · June 29, 2020, 3:59am

Awesome ! I will give it a go and update my post accordingly.

mwestphal · July 3, 2020, 9:41am

It looks like this requires direct modifications of ParaView source code, isn’t it ?

steve_r · July 3, 2020, 12:25pm

Mathieu,

fortunately No, it’s possible without touching the binary (otherwise I wouldn’t have done it)

All you need is a decent .qss style sheet and then apply the override on the Paraview command-line like:

paraview -style=default -stylesheet=<mystylesheet>.qss

On Windows, to make it convenient, I created a shortcut on the Desktop and adjusted the command-line (see screenshot):

To use the QDarkStyle, I created a “qdarkstyle” sub-folder in Paraview’s “bin/styles” folder, and copied the .qss file there. Then I could reference the .qss file relative to the “bin” folder as

-stylesheet=styles/qdarkstyle/style.qss

BTW, this stylesheet seems to be one of the most complete Qt “dark” styles I could find. It’s a good reference, and perhaps I will come up with my own “dark scheme” soon

mwestphal · July 3, 2020, 12:40pm

This is working perfectly !

I will give it a go on Linux and MacOS to see if this is cross platform, and then update the post.

mwestphal · July 7, 2020, 1:50pm

I’ve updated the post with the new generic solution.

mconti · February 3, 2021, 8:45pm

Hey y’all, thanks to this post a while back I made a custom QT stylesheet for windows that I really enjoyed, although it no longer works for me after updating to 5.9 since I think the QT version has changed. Has anyone gotten their stylesheet to work with 5.9 on windows?

mwestphal · February 4, 2021, 8:46am

Although there is a few warnings, the style provided in the above post seems to still work.

steve_r · February 5, 2021, 1:00pm

I saw the same issue in ParaView 5.9 when using the “default” style on Win 10. Changing to either “windows” or “fusion” style fixed it for me, like this:

paraview -style=fusion -stylesheet=<mystylesheet>.qss

The “fusion” style works best with high-DPI scaling on Win 10 according to Qt docs, while “windows” style might have issues with certain scaling values.

mconti · February 11, 2021, 7:50pm

Hey Steffen, changing style from “default” to “fusion” fixed the issue for me. Appreciate the help

lockan · May 3, 2021, 11:16pm

Hey, I’ve tried following the above steps for a Windows 10 install of the 5.9 MPI binary and it isn’t working. Any ideas? Here’s the shortcut properties:

mwestphal · May 4, 2021, 7:27am

-stylesheet should point to an absolute path to the style.

Something like:

C:\path\to\style.qss

lockan · May 4, 2021, 2:03pm

Aaah, I’d tried that earlier but not with the style set to Fusion. Perfect, thank you!

ionboi · November 11, 2021, 2:40pm

Hello,

Thanks for the instructions, I got it to work. Unfortunately, checkboxes appear invisible after applying the dark style.qss.
QCheckbox is included in the qss file though, so that shouldn’t be the problem. Do you know of a fix for this?

Thanks!

steve_r · November 16, 2021, 12:40pm

The QSS styles behave slightly differently between ParaView versions. Which PV version do you use?

ionboi · November 16, 2021, 1:09pm

I am using version 5.10.0

lhofmann · November 16, 2021, 3:22pm

The problem is that the stylesheet contains references to icons (:/qss_icons/rc/...), which are missing.
You would need to replace these by relative paths (relative to the qss file), and store the icons next to the stylesheet on disk.

I have done this for a few stylesheets here: paraview-stylesheets.tar.gz (299.4 KB)
They can be used with paraview as described in the original post.

cfd_payne · November 17, 2021, 6:14am

Hello All,

Have been using the Darktheme per below Mathieu’s suggestion on Win10,PV 5.9.1

Here’s a comparison of Default vs Dark

Can you please suggest how to improve on the highlighted bits.