Page 1 of 1

[Theme] Blender inspired theme for XnViewMP (incl. icons)

Posted: Tue Nov 07, 2017 1:12 pm
by miki
First of all, great thanks to the authors of this amazing photo manager! I was very excited to find this Qt based program, which just proves that the Qt framework is a perfect choice for multi-platform user programs. Indeed, XnViewMP starts and responds really fast without any lagging, and the possibilities of UI customization using the QSS style sheets are just brilliant! I really enjoyed making this QSS style to my liking. Of course, sometimes it's a bit of puzzle to get what you want, but that's part of the fun :)

The idea behind this theme
I'm a big fan of Blender (open-source 3D package), which I think has one of the best and most flexible/modifiable user interfaces. So, I've got inspired by the default grey theme from Blender, which I like so much. This theme is neither too dark, nor too light, which I believe is the best choice in general. I think, when a theme is too light/colorful, it glows to the eyes and distracts user from the actual content. When a theme is too dark, I find it worse readable and I tend to adjust my creations too dark as well. Thus, I have tried to create a low contrast, mid-grey theme that wouldn't distract users from the actual content.
Settings dialog
Batch convert dialog
Custom Icons
I have created my custom set of icons as well. Originally, I started making them in Inkscape for my own photo editor which I never finished, because it was too much work :) Later, I finished the icons in Affinity Designer, which I find much more user friendly than Inkscape. The icons are monochrome and I tried to make them simple and easy to recognize.
Custom icons
Install the theme
1. Download and unpack the archive from here.
2. Replace the UI folder in the XnViewMP install folder.
3. Replace the user settings files (on Windows 10 it's the folder C:\Users\xxxxx\AppData\Roaming\XnViewMP).

20.02.2018 - Minor fix for version 0.89/0.90

Known problems
I'm already very happy about the look of the theme, but there are still few things I'm not able to modify/replace, especially icons like...

Code: Select all

Also all the icons in dialogs (like batch convert, etc) cannot be replaced.

Another issue is the light border base line produced by QTabBar, which is visible besides the vertical tabs. I've tried to disable the drawBase feature in the style sheet by

Code: Select all

    qproperty-drawBase: 0;
but it doesn't work for the vertical tabs. The qproperty-drawBase seems to work only for the file tabs. But these are only minor issues.

Re: Blender inspired theme for XnViewMP including icons

Posted: Tue Nov 07, 2017 6:30 pm
by XnTriq
THANK YOU very much for sharing, miki! Welcome to the forum :-D

Re: Blender inspired theme for XnViewMP including icons

Posted: Thu Nov 09, 2017 7:29 pm
by miki
Thank you XnTriq :-)

Re: Blender inspired theme for XnViewMP including icons

Posted: Fri Nov 10, 2017 6:52 am
by FileNotFound
I've been occasionally working on a blender icon theme that follows the Tango Style Guideline. Not that Blender actually follows any interface guidelines on any of the platforms it runs, I just felt the default icons are somewhat 1990. I don't have complete coverage yet, but the most exposed icons are themed.
Where these don't work so well is the button context header. The lower opacity makes them a bit unclear. I'd prefer the current button context was highlighted differently than making the other contexts semi-opaque.

Re: Blender inspired theme for XnViewMP including icons

Posted: Fri Nov 10, 2017 9:33 am
by miki
FileNotFound: Actually, I think the few icons that exist in Blender are quite good and easy to recognize. Besides most of the buttons is textual and don't use any icon.

I just had problem with the original icons in XnView, which I can't recognize what they are supposed to mean, and they look ugly on dark backgrounds. So, I've created my own monochrome icons, which I find the best recognizable and it's very easy to change their color globally.

Re: [Theme] Blender inspired theme for XnViewMP (incl. icons)

Posted: Wed Feb 21, 2018 8:03 am
by oakside
Wow. This is one of the best user-created themes I've ever seen for... well, anything, ever. Beautiful work! Enormous thanks, miki! The settings alone re-arrange things very nicely. Combined with your icons, it's just amazing. Totally agree on the color scheme reasoning; not too dark, and makes the subject or work stand out.

Tip: For those trying XnView MP in "portable" mode (ZIP, no-install, settings probably in program folder), these new settings still need to be copied to the proper AppData folder per instructions. Didn't work otherwise. I just went ahead and installed the XnView MP executable. Farewell to XnView Classic. And huge congrats to the devs of XnView MP, Pierre; it's still early but it already seems like a very worthy successor. Bravo.

Re: [Theme] Blender inspired theme for XnViewMP (incl. icons)

Posted: Fri Apr 13, 2018 12:02 am
by Akovia
Spectacular theme!
I love Blender's colors and you did a perfect rendition.

The only problem I'm having is the radio buttons in the settings window are huge. I am unable to size the window smaller to reach the ok button on the bottom. (My desktop is 1920x1080) I can use my window manager controls to grab the window and move it luckily, but not sure why they are so big. Are you on a hi dpi screen?


I can convert them to png if necessary, but wondered if there was a setting I could use to size them properly. Regardless I'm thrilled with your work. Thank you for sharing it.

Well I went another route to fix it and added size code to the stylesheet. Not sure why only the radio buttons are effected, but this worked.

Code: Select all

    width: 25px;
     image: url(UI:radiobutton_unchecked.svg);

    width: 25px;
     image: url(UI:radiobutton_unchecked_disabled.svg);

    width: 25px;
     image: url(UI:radiobutton_checked.svg);

    width: 25px;
     image: url(UI:radiobutton_checked_disabled.svg);