Wednesday, 9 October 2013

Changing the "theme" in Enthought Traits UI with Qt as the backend

I'm currently writing code for a customer using Enthought Traits, and in particular Traits UI. Traits as a whole is a very nice toolkit for use in scientific programming, but you can find out about that by googling in the normal manner.

The specific issue, though, is  that we've moved to using pyside/Qt4 as the GUI backend, instead of wx(Python) - enabled, for instance, by doing:

        from traits.etsconfig.api import ETSConfig
        ETSConfig.toolkit = 'qt4'
    except ValueError:

Some things are done a little bit differently with the Qt backend, though, and it's not always obvious how. In particular, traits UI has always allowed "theming", and the normal way to do this with the traditional wx backend is using something like:

    from traitsui.api import Theme
    Item('move_to_loading_area_btn', item_theme=Theme('@std:BE5')),

 (note that this is not the syntax for the item_theme argument shown in the documentation, that doesn't seem to work - so this is also "a useful reference").

This doesn't work with the Qt backend. It turns out that the way to do it is to specify a Qt stylesheet, which can be done as a string:

    Item('move_to_loading_area_btn', style_sheet='* { color: red }'),

Useful Qt references are then:
(blogged here because no-one else seems to have described doing this)


Lobotomik said...


I am going through the same procedure while portin an internal application from Enthought EPD to Anaconda, and from wx to Qt.

It was not so to get the app working because there was very little wx-specific code, and it seems to be more fluid (might be my imagination), but contrary to what I expected, it looks uglier.

I think part of the ugliness could be cure with some style sheets. I have tried your example, and I can turn any particular button red. However, But where could I set a global stylesheet that would (say) turn all buttons red?

The buttons look fine, BTW, most of the ugliness is due to the tiling window manager. It uses a MyMainWindow(WorkbenchWindow) that has a Perspective that contains several PerspectiveItem objects which seem to map onto QDockWidget. However, my tries to add something like:

style_sheet="QDockWidget {border: 10px solid red}"

(for real beauty!) to either the Perspective() or all or any of the PerspectiveItem() instantiations have been fruitless. Nothing happens, and nothing is reported.

Do you know if it is in my MyMainWindow(WorkbenchWindow) where I should set the global stylesheet? How?

Anyhow, many thanks for setting me closer to the right course.

Nacho de los Rios

Eric McDonald said...

Thanks for posting this. It was driving me nuts trying to figure it out.

Post a Comment