Back to
Projects List
Updated Icons and Theme switching
Key Investigators
- Sam Horvath (Kitware, USA)
- Wendy Plesniak (BWH, USA)
Presenter location: In-person
Project Description
We will be working on integrating new icons, QSS support, and better dynamic theme switching
Objective
- Get a working light /dark theme switch for icon sets
- Use the newly developed icon set in Slicer
- Mov towards using QSS for styling
Approach and Plan
- Investigate current methods for swapping out light and dark themes for icons.
- Work on putting together a QSS style implementation for the current Slicer Light / Dark themes
- Investigate methods of orverrding the existing icon set
- Consolidate and icons and remove non-existent icons
Progress and Next Steps
- Icon swap approach: External resource binaries
- Refactor out current resources into an external resource file
- Dynamically Loaded Resources
- Load dark vs. light resources at startup
- Pros
- Minimal changes to the Slicer core code (still using the resource system)
- Cons
- Icons can only be refreshed with a restart
- Build system will need to generate the rcc file instead of compiling in the resources
- Will need to add calls to register custom resources for modules and main application
- Icon swap progress
- Created standalone example in test extension
- Created branch for Slicer with WIP implementations for bundling external resources
- Setup external resources for loadable modules and libraries
- Next steps
- Work on swapping bundled resources for Python (or an icon picker approach in code)
- Work on bugs with existing implementation (timing of loading resources for loadable modules, using SVGs as mouse cursors, Transform icon is being stubborn)
- Review approach with Slicer dev team, mainly when / where the external resources are loaded at runtime, and where they are stored on disk
Illustrations
Example of New icons
![image](https://raw.githubusercontent.com/Slicer/slicer-media-assets/main/SlicerIcons/SlicerSVG/SeparateStyles/LightThemeIcons/Modules/WelcomeModule.svg)
Switching with external resources in test extension
Slicer Dark:
![SlicerDarkUpdated](https://github.com/NA-MIC/ProjectWeek/assets/25040869/12767317-b88c-4340-8652-4b919d2da814)
![DarkToolBar](https://github.com/NA-MIC/ProjectWeek/assets/25040869/ea3b494a-d07e-40ca-a47c-ad4139380551)
Slicer Light:
![SlicerLightUpdated](https://github.com/NA-MIC/ProjectWeek/assets/25040869/a13bea8b-5e7a-4da0-af67-02849cbe810e)
![LightToolBar](https://github.com/NA-MIC/ProjectWeek/assets/25040869/fe36d249-a489-4a45-bfbf-5bd21c1183c2)
Background and References