Edit this page

NA-MIC Project Weeks

Back to Projects List

Transitioning 3D Slicer to QSS Styling

Key Investigators

Project Description

Currently 3D Slicer support both QStyle based styling and QtStylesheets. To improve custom apps and user experience, we woud like to move all styling to QSS.

Objective

  1. Allow users to modify theme colors / add new themes
  2. Support the existing Slicer Dark / Light themes through QSS

Approach and Plan

  1. Create QSS files for the existing Slicer Dark / Light themes
  2. Integrate qt-material package to support Material styles through python
  3. Create a SlicerThemes (?) extension which pulls in qt-material and add glue code

Progress and Next Steps

  1. Forked qt-material to address Slicer specific Python interface.
  2. Created SlicerThemes extension
    1. Manages installation of Slicer-specific version of qt-material
    2. Allows for saving and loading of custom color theme files
    3. Provides QSS templates for styles
  3. Created QSS templates for “Classic” and “Material” Slicer themes
    1. These are still WIP
  4. Next steps
    1. Allowing for loading of user provided templates in the extension
    2. Compile list of changes to core code (ctk and Slicer) to allow styles to be set correctly from QSS

Core code changes TBD

  1. ctkConsole needs tweaks to respect QSS property settings for console colors
  2. Slice controllers needs work to prevent icons from disappearing
  3. Icon sets should be updated to a Material style

Illustrations

Initial work

qt-material package out of the box w / light blue theme

qt-material no tweaks

qt-material package with some manual tweaks to theme file

qt-material with some tweaks

Project week results

Classic Slicer Light Classic Slicer Dark Material Slicer Dark Custom colors

Background and References

  1. Discourse post
  2. qt-material