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

Plug-ins, add-ons, skins, icons, templates and other downloads. Contributions are welcome.

Moderators: XnTriq, xnview

Post Reply
User avatar
miki
Posts: 17
Joined: Wed Oct 04, 2017 2:40 pm
Contact:

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

Post by miki » Tue Nov 07, 2017 1:12 pm

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.
screen-browser.png
Browser
screen-viewer.png
Viewer
screen-settings.png
Settings dialog
screen-convert.png
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.
_icons-toolbars_catalog.png
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).


ChangeLog
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

cmd_levels
cmd_showHisto
cmd_import
cmd_viewAs
cmd_category
cmd_ratingAndLabel
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

QTabBar{
    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.
Last edited by miki on Tue Feb 20, 2018 12:13 pm, edited 2 times in total.
Miki Proxima (meshlogic)

User avatar
XnTriq
Moderator & Librarian
Posts: 5294
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Blender inspired theme for XnViewMP including icons

Post by XnTriq » Tue Nov 07, 2017 6:30 pm

THANK YOU very much for sharing, miki! Welcome to the forum :-D

User avatar
miki
Posts: 17
Joined: Wed Oct 04, 2017 2:40 pm
Contact:

Re: Blender inspired theme for XnViewMP including icons

Post by miki » Thu Nov 09, 2017 7:29 pm

Thank you XnTriq :-)
Miki Proxima (meshlogic)

FileNotFound

Re: Blender inspired theme for XnViewMP including icons

Post by FileNotFound » Fri Nov 10, 2017 6:52 am

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.

User avatar
miki
Posts: 17
Joined: Wed Oct 04, 2017 2:40 pm
Contact:

Re: Blender inspired theme for XnViewMP including icons

Post by miki » Fri Nov 10, 2017 9:33 am

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.
Miki Proxima (meshlogic)

User avatar
oakside
Posts: 1
Joined: Thu Nov 07, 2013 7:58 pm

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

Post by oakside » Wed Feb 21, 2018 8:03 am

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.

User avatar
Akovia
Posts: 51
Joined: Sat Apr 02, 2011 2:10 am
Contact:

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

Post by Akovia » Fri Apr 13, 2018 12:02 am

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?

Image

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.

EDIT:
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

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
QRadioButton::indicator:unchecked{
    width: 25px;
    height:25px;
     image: url(UI:radiobutton_unchecked.svg);
 }

QRadioButton::indicator:unchecked:disabled{
    width: 25px;
    height:25px;
     image: url(UI:radiobutton_unchecked_disabled.svg);
 }

QRadioButton::indicator:checked{
    width: 25px;
    height:25px;
     image: url(UI:radiobutton_checked.svg);
 }

QRadioButton::indicator:checked:disabled{
    width: 25px;
    height:25px;
     image: url(UI:radiobutton_checked_disabled.svg);
 }
Arch Linux
XnView MP

Post Reply