Is it possible to create a modern-looking design with a dark theme?

I was asked a website redesign with two requirements:

  • Inspired by Google Plus (clean, minimal, a lot of “white” space)
  • Switchable between a White version and a Black version

Here’s my problem: The white version looks great and modern, but, no matter what I do, the black version resembles a 10-15 years old cheap website.

Is there a way I can make my dark theme still evoke a modern feel?


Take (hex) colors: Dark Background: #313131, light text: #f5f5f5 This will lower the contrast a little bit, but is close to a 70/10 grey and much easier to read. Further more it looks pretty classy.

I’d also go and choose some nice (cufon?) font for headings and such. Then use some thin 2px borders/hrs, each 10-15% lighter/darker as spacers (double in the sense of one half darker, other lighter, so you get a 3D effect, like it’s graved in). You could also use the darker color to set a 10px (2px rounded) border around images to make them stand out and take the lighter color as hover color.

Then use a) a grid and b) a limited set of overall colors: 5 colors are enough and you already got 2 grey and 2 light grey tones. Just add one single color for links or headings and you’re perfect.

Source : Link , Question Author : Omiod , Answer Author : kaiser

Leave a Comment