Really simple and Neat Dark Theme


(@SenpaiMass) #1

2 steps to get a dark theme fully functional and compatable with latest discourse.
Concepts taken from Material design and others.

Live demo - Here
###1. Setup Colors:

###2. Setup CSS

.topic-list {
    background: rgba(25, 25, 25, 0.9)
}
.topic-list th {
    background: #222222;
    border-bottom: none
}

.nav-pills>li.active>a, .nav-pills>li>a.active {
    color: #dfdfdf;
    font-weight: 500;
    background-color: transparent; //matches main bg color
    border-bottom: 3px solid #9EB83B;
}
.logo-small, .logo-big {
    max-height: 60px !important;
    margin-top: -8px;
}
.topic-list>tbody>tr:first-of-type {
    border-top: 2px solid #9EB83B;
}
a.mention, a.mention-group {
    padding: 2px 4px;
    color: #000;
    background: #C0C0C0;
    border-radius: 5px;
    font-weight: bold;
    font-size: .93em;
}
#topic-closing-info {
    border-top: transparent;
    padding-top: 10px;
    height: 20px;
}

/*buttons*/

.list-controls .btn {
    float: right;
    margin-left: 8px;
    margin-bottom: 10px;
    font-size: 1.143em;
    font-weight: normal;
    background-color: #9EB83B;
}

/*Polls for dark themes*/

div.poll li[data-poll-option-id][data-poll-selected="selected"] {
    background: green !important;
}
div.poll .results .bar-back {
    background: grey;
}

/* topic post */
.topic-body {
    margin-top: 2px;
    margin-bottom: 1px;
    border: 1px solid #191919;
    background: rgba(25, 25, 25, 0.9)
}
/*Names*/
.names span.first {
    font-size: 1.02em;
}
/*admin borders*/
.admin-controls .nav.nav-pills li.active a {
    border-color: #9EB83B;
    background-color: transparent;
}

and you are done.

Do let me know if there are any improvements to be made.