Dark theme for night/fusion style

[ghost]

As I have seen in this file, you are using Fusion as a theme. So for the night it would be nice if you add a dark style.

(UPDATE)
I have looked into Tiled and the bad thing is you aren't using Fusion as style (or?). It would be nice if you add this feature, because then the ui looks smoother.

[bjorn]

The Fusion style is used as fall-back for when no appropriate native-looking style seems to be available. Of course, it may be interesting to expose the style in the preferences and also to provide a dark theme based on Fusion.

Whether it looks smoother depends on your operating system as well as your personal preferences. I think most people prefer Tiled to blend in with their operating system, but that's a guess rather than a scientific analysis. On the other hand I'm pretty sure many people will like a dark theme. :-)

[ghost]

Yes, a dark theme will be great! Why not creating an Tab "Appearance" in Tiled Preferences for changing this :-)

[JoJpeg]

I'd also really prefer a dark theme! Every program I use in my development-pipeline wears a dark theme and I really appreciate it. Especially when working on a very dark map, as I am currently doing, it would improove my workflow quiet a bit. Any news on this Issue?

[bjorn]

@joeschner No news, but in order to get around to issues like this I have started a fundraiser on Patreon: https://www.patreon.com/bjorn. Any contribution would be appreciated and would eventually allow me to spend more time on Tiled again.

[bjorn]

I've made some progress on this issue today, based on the Fusion theme. Here's two screenshots showing different levels of darkness:

Apart from automatically calculating a color scheme based on a single "darkness" value, I've customized the scroll bar because the Fusion scroll bar has way too low contrast (though I'm not happy with it yet in the darker image). I'll likely try to customize some other elements as well to make them look a bit nicer and/or add more contrast (like the tabs and dock widgets). Also, I think the icons need adjustment.

[kheftel-old]

looking good!

[bjorn]

I've pushed an initial change (43f98c8) that adds the plain Fusion theme as an option (without customized scrollbar seen above for now). When switching to the Fusion theme, the base color and highlight color can be configured:

For a dark theme, the base color can simply be set to any dark color you like.

[bjorn]

I've pushed the new scroll bars to master now (d74b395). I gave them even more contrast and tweaked the buttons:

While there's still some tweaks I'd like to make, I'll close this issue now since the dark theme is available!

[bjorn]

Here's an updated screenshot with the latest changes:

Changes include:

• Giving list items a bit more space
• Subtle gradient added to tool bars
• Menu bar margins improved
• New tab bar

There are still some smaller changes needed to fix up the dark mode (when the base color is so dark that the text is rendered bright):

• The tab close button doesn't look nice in dark mode.
• The dock widget buttons look broken in dark mode
• Check box outline is almost invisible in dark mode (making it almost invisible when not checked)
• Group box outline is almost invisible in dark mode
• Make sure the text doesn't get colored when choosing a non-gray dark color
• Color of "grayed out" custom property names and values are hard to read in dark mode
• It is hard to see which tool bar button is selected in dark mode

[bjorn]

Final screenshot after all the above fixes: