Dark design tips

I’m designing a dark theme but I’m stuck with color and can’t seem to come up with anything I like; my design looks a bit bland. Do you guys have any tips on how to use color in dark themes and make them look interesting?

Hi Ferron. Welcome to the forums. :slight_smile:

My preference is to visit other dark sites and look at what they’ve done. There are even gallery sites that feature examples of design types, such as dark sites. There are also lots of color tools out there that help you to experiment, such as Color Scheme Designer.

Personally, I don’t like dark sites much, as they make my eyes go funny (I have to squint for a while after viewing them). It seems to help if the background isn’t black, but something a bit lighter. (I stumbled on this site yesterday, which I didn’t find too hard on the eyes.)

in my view generally…dark colors dont get enhanced on dark themes…you can see grey and white appearing clear on black, violet, dark green themes!! try to also mix colors to get lighten them so they appear more clear on darker themes!!

Thanks, Ralph, glad to be here. I’ve searched Dribbble but I’ll definitely see what dark sites are doing. And thanks for the link, just seeing that gave me some ideas.

Snowcastle, are you talking about an accent color?

I’ve never heard that term, so please forgive me if I sound like a complete, drooling, idiot (not that people who drool are bad - just…yeah, whatever.), but I like accent colors as well.

Black w/ a SMALL (ironically enough) hint of green or light blue or light pink is nice.

Obviously, you’d want to use light text on dark backgrounds for accessibility purposes - which might put in the light that snowcastle was talking about.

~TehYoyo

Hi you can use a dark theme that the main solid structures are dark and darker shades, but with text screen a lighter opaque background if you balance it with lots of other dark elements it will not feel light and also will not be harder to read.

My 2 cents,

Regards,
Steve

Yep, you’re using it correctly. On a dark background a bright accent color looks great. And that clears up my confusion with snowcastle; I’d definitely use white text for body copy.

Yeah, if you pair dark elements together a relatively dark color might look light. It’s always hard for me to pick out colors for dark pairings though. I can do light themes fine but when I have multiple shades of dark gray, it seems to monotonous.

For this, anywhere there will be text I use opacity on a white background element so the ‘screened’ colour is a shade of the dark colour, I lighten it to a point where the text is quite readable.

Like you others (including you) have said, I typically don’t do dark themes as most people prefer lighter ones where reading/viewing the information is the main goal, and hiding this information in darkness goes against this idea; tougher to pull off anyway.

Regards,
Steve

well if your using black colors anything goes with black organge green ect…

Yes - that’s what my mother always says - it’s one of the “neutral” colors (white and black). But keep in mind that, while black will go w/ orange and black will go w/ green, black doesn’t necessarily go w/ black and green.

~TehYoyo

Dark web designs are very popular and can have an elegant and creative appeal.But how you customize with different color blend is very important.So for the dark color theme design Use fonts that are readable,make the backgroun color contrasting,Use gray and white only which look soft and highlite the text more.

Try searching for mobile awesomeness on google. That site allows users to vote on many different application layouts and color schemes so it doesn’t directly apply but they have quite a few dark themed designs that should help you visualize a good scheme that could be applied to your site.

From my experience, what makes a dark theme or template so interesting is that you introduce a hint of a bright color to it. This makes everything pop and highlights the template which keeps it from being dull.

There are so many ways on designing a website background.
like
spotlight go to images, videos and others
Use a single bold color
right color scheme
reflections
use gray and white only
fonts
background
blending colors in your dark background
etc etc…