I'm developing a dark application UI, how do I make sure I access / style all possible components?

Question

I want to make sure I style all the relevant tags so that I don't end up with a broken UI which will be ugly or difficult to use.

EDIT: I'm hope to produce a .QSS file (Qt4) that can be loaded into applications.

Answer 1

There are two major challenges with dark themes: controlling contrast and the fact that what you are seeing is usually an inverse of what people expect. They can be very sexy, and even quite useful in dark rooms when you are trying to avoid eye fatigue.

Some concepts to consider:

• The eye is more sensitive to contrast differences when the background is dark than when it is light.
• The W3C came up with an algorithm for checking your contrast ratio. This page let's you try it out.
• Font is more critical with dark backgrounds than with light backgrounds. Keep it simple, serifs will likely get in the way.

I would seriously consider keeping editing panes with a lighter background than the text. I wouldn't have the background be plain white because that will be jarring to the eye. However, a darker shade of off-white that gives you a 7:1 contrast from the text will be quite readable (example, the color #999 and #000), and work better with what you see when you print something out.

Menus, buttons, etc. should all be light text on dark backgrounds. To work out the color scheme, I'd play with Kuler to try things out. It lets you experiment freely to find combination that work well together. The tool itself is light text on dark background, so you might even find some inspiration for your theme there.