Discord Dark Theme


#1

After playing around some I think I’ve come up with a theme that feels a bit more like Discord’s dark theme. Give it a shot, let me know what you think/what I missed.

Edit: Note that I am not a color person or frontend web-dev. The CSS might suck, but it works.

body {
    background-color: #2c2f33;
    color: #efefef;
}

#main-outlet {
    background-color: #2c2f33;
}

.hljs {
    background-color: #23272a;
}

.d-header {
    background-color: #212126;
}

.btn-primary, .open .grippie {
    background: #7289da;
}

.timeline-container .topic-timeline .timeline-scrollarea {
    border-color: #7289da;
}

.timeline-container .topic-timeline .timeline-handle {
    background-color: #7289da;
}

.d-icon.d-icon-d-tracking, .d-icon.d-icon-d-watching {
    color: #7289da;
}

.topic-map {
    background: #23272a;
}

a, a:visited {
    color: #7289da;
}

.select-kit .select-kit-row.is-selected.is-highlighted, .select-kit .select-kit-row.is-highlighted {
    background: #4057a8;
}

.similar-topics {
    background-color: #23272A;
}

#2

This is what I’m using with Stylus. :slight_smile:

body {
    background-color: #1a1a1a;
    background: -moz-linear-gradient(left, #1a1a1a 0%, #252525 15%, #252525 85%, #1a1a1a 100%);
    background: -webkit-linear-gradient(left, #1a1a1a 0%,#252525 15%, 85%,#1a1a1a 100%);
    background: linear-gradient(to right, #1a1a1a 0%,#252525 15%,#252525 85%,#1a1a1a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a1a1a', endColorstr='#252525',GradientType=1);
}
#main-outlet {
    background-color: #212121;
    border-left: 15px #212121 solid;
    border-right: 15px #212121 solid;
}
.quote * {
    background-color: #282828 !important;
}
.hljs,
.topic-map {
    background-color: #282828;
}
.topic-map-expanded {
    border-top: 0px !important;
}

#3

Oof, that 1a background color. Might be a hair dark for me. I like not being completely blinded if I move off to a white website :stuck_out_tongue:


#4

I like it. I think I might tweak it a bit for more contrast and sliiiiiiightly lighter. Yay for Stylus! :smiley:


#5

Speaking of, here is what I have now:

body {
    background-color: #282828;
}
#main-outlet {
    background-color: #333;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.25);
}
.d-header {
    background-color: #1a1a1a;
}
.quote * {
    background-color: #404040 !important;
}
.hljs {
    background-color: #404040;
    border: 1px solid #595959;
}
.topic-map {
    background-color: #333;
}
.topic-map-expanded {
    border-top: 0px !important;
}

It still keeps things fairly dark (darker than Discord), while still having nice contrast and part separation.
Looks something like this:

EDIT: Fixed code blocks having same background as post


#6

Ah, that actually looks quite good!