Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme for night/fusion style #786

Closed
ghost opened this issue Oct 6, 2014 · 10 comments

Comments

Projects
None yet
3 participants
@ghost
Copy link

commented Oct 6, 2014

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.

@ghost ghost changed the title [feature] dark theme for night [feature] dark theme for night/fusion style Oct 6, 2014

@bjorn

This comment has been minimized.

Copy link
Owner

commented Oct 6, 2014

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. :-)

@bjorn bjorn added the feature label Oct 6, 2014

@bjorn bjorn changed the title [feature] dark theme for night/fusion style Dark theme for night/fusion style Oct 6, 2014

@ghost

This comment has been minimized.

Copy link
Author

commented Oct 7, 2014

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

@JoJpeg

This comment has been minimized.

Copy link

commented Feb 22, 2015

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

This comment has been minimized.

Copy link
Owner

commented Feb 22, 2015

@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 added a commit that referenced this issue Jun 27, 2016

WIP: Implementing a dark style
Based on Fusion, but with customized palette and scrollbar. More
customizations sure to follow.

#786
@bjorn

This comment has been minimized.

Copy link
Owner

commented Jun 27, 2016

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

-orthogonal-outside tmx tiled_100

-orthogonal-outside tmx tiled_101

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

This comment has been minimized.

Copy link

commented Jun 27, 2016

looking good!

@bjorn

This comment has been minimized.

Copy link
Owner

commented Jul 3, 2016

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:

preferences tiled_102

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

@bjorn bjorn referenced this issue Jul 3, 2016

Closed

QSS Styling #690

@bjorn bjorn self-assigned this Jul 3, 2016

@bjorn

This comment has been minimized.

Copy link
Owner

commented Jul 3, 2016

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

orthogonal-outside tmx tiled_104

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

@bjorn bjorn closed this Jul 3, 2016

@bjorn

This comment has been minimized.

Copy link
Owner

commented Jul 25, 2016

Here's an updated screenshot with the latest changes:

orthogonal-outside tmx tiled_111

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

This comment has been minimized.

Copy link
Owner

commented Aug 15, 2016

Final screenshot after all the above fixes:

desert tmx tiled_113

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.