Feedback/Help on a Custom Dark Theme

[AlanOC91]

Hi all,

Like most of you. I love dark themes. I especially love the ones used here and on Twitter. I find myself using Dark Theme almost all the time which is why I decided to try implement it into my own website.

Here is an example of my default theme (taken from this url):

Here is an example of my night theme:

I'm still not sure how I feel about it which is why I am looking for some fresh eyes or people who may have advice on the right colors to blend together and so on.

And how do you all feel about specific night theme colors? I kind of themed this off of the Twitter night theme colors they use on their site.

 

[Vipershark]

Those box borders definitely need more contrast. A darker blue would definitely help.
The gray buttons on the bottom left have too bright a background color as well and the text blends into them.

Edit- I'd go for darker outlines on those three buttons as well.

 

[AlanOC91]

Those box borders definitely need more contrast. A darker blue would definitely help.
The gray buttons on the bottom left have too bright a background color as well and the text blends into them.

Edit- I'd go for darker outlines on those three buttons as well.

Click to shrink...

Awesome, thank you! Gonna play around with those suggestions a bit right now!

 

[Deleted member 78]

How about something more like this? I generally hare borders, but that's just me.

 

[AlanOC91]

How about something more like this? I generally hare borders, but that's just me.

Click to shrink...

That's actually quite sleek! I like it! Although it starts creating a small bit of a divide between how default and night mode handle the borders/boxes. But I'm really liking that.

 

[Deleted member 78]

That's actually quite sleek! I like it! Although it starts creating a small bit of a divide between how default and night mode handle the borders/boxes. But I'm really liking that.

Click to shrink...

Ah, so it's strictly a colour changes then! I just messed with the buying options a little to give them a little more breathing space. Good luck with this by the way :)

 

[AlanOC91]

Ah, so it's strictly a colour changes then! I just messed with the buying options a little to give them a little more breathing space. Good luck with this by the way :)

Click to shrink...

Whoa those buttons look a huge amount nicer than the ones I currently have out.

Would it be possible to shoot me the css changes you applied to those? They really look fantastic! I've never been much of a designer myself :-/

 

[Deleted member 78]

Whoa those buttons look a huge amount nicer than the ones I currently have out.

Would it be possible to shoot me the css changes you applied to those? They really look fantastic! I've never been much of a designer myself :-/

Click to shrink...

.info-link {
    display: block;
    padding: 12px;
    text-decoration: none;
    color: #3e3e3e;
    background-color: #eaeaea;
    border-radius: 3px;
    margin-top: 10px;
}

You'll want to apply that to .info-link-decks too as those three buttons have separate styling.

I removed the border. It's just the padding that gives it more room.

Obviously you'll want to change the background colour if you decide to not use a border.

 

[AlanOC91]

.info-link {
    display: block;
    padding: 12px;
    text-decoration: none;
    color: #3e3e3e;
    background-color: #eaeaea;
    border-radius: 3px;
    margin-top: 10px;
}

You'll want to apply that to .info-link-decks too as those three buttons have separate styling.

I removed the border. It's just the padding that gives it more room.

Obviously you'll want to change the background colour if you decide to not use a border.

Click to shrink...

Thank you! Going to try it out right now. Really appreciate it mate, those look awesome.