Welcome, Guest! Login | Register
[WIP] Dark theme for Classdev
Info
Report
101 Posts

As requested, I've decided to go ahead and make us our very own DARK theme for the forum. This theme will work in Chrome and Firefox, you'll need to have Stylus installed. When prompted, copy the code here:
/*
 ▄████▄   ██▓    ▄▄▄        ██████   ██████ ▓█████▄ ▓█████ ██▒   █▓   ▓█████▄  ▄▄▄       ██▀███   ██ ▄█▀
▒██▀ ▀█  ▓██▒   ▒████▄    ▒██    ▒ ▒██    ▒ ▒██▀ ██▌▓█   ▀▓██░   █▒   ▒██▀ ██▌▒████▄    ▓██ ▒ ██▒ ██▄█▒ 
▒▓█    ▄ ▒██░   ▒██  ▀█▄  ░ ▓██▄   ░ ▓██▄   ░██   █▌▒███   ▓██  █▒░   ░██   █▌▒██  ▀█▄  ▓██ ░▄█ ▒▓███▄░ 
▒▓▓▄ ▄██▒▒██░   ░██▄▄▄▄██   ▒   ██▒  ▒   ██▒░▓█▄   ▌▒▓█  ▄  ▒██ █░░   ░▓█▄   ▌░██▄▄▄▄██ ▒██▀▀█▄  ▓██ █▄ 
▒ ▓███▀ ░░██████▒▓█   ▓██▒▒██████▒▒▒██████▒▒░▒████▓ ░▒████▒  ▒▀█░     ░▒████▓  ▓█   ▓██▒░██▓ ▒██▒▒██▒ █▄
░ ░▒ ▒  ░░ ▒░▓  ░▒▒   ▓▒█░▒ ▒▓▒ ▒ ░▒ ▒▓▒ ▒ ░ ▒▒▓  ▒ ░░ ▒░ ░  ░ ▐░      ▒▒▓  ▒  ▒▒   ▓▒█░░ ▒▓ ░▒▓░▒ ▒▒ ▓▒
  ░  ▒   ░ ░ ▒  ░ ▒   ▒▒ ░░ ░▒  ░ ░░ ░▒  ░ ░ ░ ▒  ▒  ░ ░  ░  ░ ░░      ░ ▒  ▒   ▒   ▒▒ ░  ░▒ ░ ▒░░ ░▒ ▒░
░          ░ ░    ░   ▒   ░  ░  ░  ░  ░  ░   ░ ░  ░    ░       ░░      ░ ░  ░   ░   ▒     ░░   ░ ░ ░░ ░ 
░ ░          ░  ░     ░  ░      ░        ░     ░       ░  ░     ░        ░          ░  ░   ░     ░  ░   
░                                            ░                 ░       ░                                
                    ▄▄▄▄·  ▄· ▄▌    ·▄▄▄▄  ▄▄▄       ▐ ▄ ▪   ▐ ▄ ▄ •▄ ▄▄▄ .      
                    ▐█ ▀█▪▐█▪██▌    ██▪ ██ ▀▄ █·    •█▌▐███ •█▌▐██▌▄▌▪▀▄.▀·▪     
                    ▐█▀▀█▄▐█▌▐█▪    ▐█· ▐█▌▐▀▀▄     ▐█▐▐▌▐█·▐█▐▐▌▐▀▀▄·▐▀▀▪▄ ▄█▀▄ 
                    ██▄▪▐█ ▐█▀·.    ██. ██ ▐█•█▌    ██▐█▌▐█▌██▐█▌▐█.█▌▐█▄▄▌▐█▌.▐▌
                    ·▀▀▀▀   ▀ •     ▀▀▀▀▀• .▀  ▀    ▀▀ █▪▀▀▀▀▀ █▪·▀  ▀ ▀▀▀  ▀█▄▀
*/
body {
    background-color: #3b3b3b;
    color: #FFF;
}
.dropdown,
.dropdown.active {
    background-color: #383838 !important;
    color: #999 !important;
}

.dropdown a {
    color: #999 !important;
}

a {
    color: #999 !important;
}

hr {
    background-color: #3b3b3b;
}

.footer {
    background-color: #4a4a4a;
    color: #fff;
}

.navigation-tree .tab {
    color: #fff !important;
}

.navigation {
    background-color: #4a4a4a;
}

.navigation .tab,
.content .number,
.content .eval {
    color: #FFF
}

.forum .thread {
    background-color: #4a4a4a;
}

.container {
    background-color: #4a4a4a;
}

.forum .threads .pagination .page {
    border-width: 0;
    border-radius: 30px;
    font-size: 80%;
    color: white !important;
    background-color: #3b3b3b;
    padding: 8px 12px !important;
}

.pagination .page {
    color: white !important;
    background-color: #3b3b3b;
}

@keyframes board-new {
    0% {
        background-color: #383838;
    }
    50% {
        background-color: #454545;
    }
    100% {
        background-color: #383838;
    }
}

.container .content {
    background-color: #4a4a4a;
}

.forum .board .name {
    color: #FFF
}

.bbc-formatted .code {
    color: #ccc;
    background-color: #3b3b3b;
}

.bbc-formatted .quote {
    background-color: #3b3b3b;
}

.forum .board,
.panel-mini-post {
    background-color: #3b3b3b;
}

.recommended .threads .thread > div:nth-child(1) {
    color: #bbb;
}

.forum .thread:hover {
    color: #000 !important;
}

.forum .posts .post .user-content {
    color: #ddd;
}

.recommended .threads .thread > div:nth-child(2) {
    color: #777;
}

.ui-dialogue > center > .window {
    display: inline-block;
    width: 700px;
    margin-top: 100px;
    padding: 20px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    background-color: #555;
}

.forum .post-create .attachment {
    background-color: #3b3b3b;
}

.livechat .message:hover {
    background-color: #5f5f5f;
}

.container > .title-bar.white,
.container.title-bar.white {
    background-color: #5f5f5f;
    color: #FFF
}

.card:hover,
.forum .thread:hover,
.user-edit .tab:hover,
.navigation-tree .tab:hover,
button:hover,
.button:hover,
input[type="submit"]:hover,
.button.circle:hover,
.recommended .threads .thread:hover,
.dashboard .tabs .tab:hover,
.dropdown div:hover {
    background-color: #292929 !important;
}

/* This is just for the normal buttons, so the text doesn't go black when you hover over them */
button:hover, .button:hover {
    color: #FFF !important;
}

.container.content.info {
    background-color: #3f0000  !important;
    color: #FFF;
}

.navigation .tab:hover,
.user.categories .tabs .tab.current {
    color: #FFF;
    background-color: #292929 !important;
}

.card {
    background-color: #3b3b3b;
    color: #fff;
}

.dashboard .message-groups .group {
        color: #fff;
}

.dashboard .notifications .notification.new {
    background-color: #3b3b3b;
}

.dashboard .notifications .notification {
    background-color: #444;
}

.personal-chat .message .text {
    background-color: #3b3b3b;
}

.user.categories .tabs .tab:hover {
    background-color: #5f5f5f !important;
    color: #FFF;
}

.dashboard .account-status .criteria {
    
    color: #000;
}

textarea,
textarea:focus {
    background-color: #3b3b3b;
    color: #FFF;
}

.user-edit .tab {
    color: #FFF;
}

.panel {
    background-color: #292929;
}

.dashboard .tabs .tab {
    color: #FFF;
}

.forum .posts .post .attachments .attachment .filename {
    background-color: #4a4a4a;
    color: #FFF;
}

.forum .posts .post .attachments {
    background-color: #3b3b3b;
}

.notification-popup {
    background-color: #4a4a4a;
}

input {
    color: #FFF;
}
and paste it into a new theme file.

You'll get all of the work I've put in, a bit of a stop-gap solution but it should work for the moment. There are a few little things I couldn't get stylus to replace, but for the most part the vast majority of the forum has the dark theme applied. Enjoy!

Updated 23/11/18
Created on: 2 weeks ago
Edited on: 2 weeks ago
Info
Report
213 Posts

NO WAY! I will add this a feature to make it changeable!
Created on: 2 weeks ago
Info
Report
137 Posts

Oh wow this looks really neat, imma keep this on for now! :P
Created on: 2 weeks ago
Info
Report
101 Posts

Thanks guys, it does the trick pretty well I'm sure


I'm gonna try getting more of the forum changed from being blinding white to a nice dark grey, the PMs being the big one still seemingly to be unaffected ATM.
Created on: 2 weeks ago
Info
Report
213 Posts

Just to note, PM's can change color. That's why they are unaffected. If you press on the cog button, you can change the colors of the conversation
Created on: 2 weeks ago
Info
Report
101 Posts

That's actually cool, I never knew that before.

I believe I finished pretty much the whole forum now with all the redecorations, let us know if it doesn't work right somewhere (which is pretty likely). The script in the OP's been updated too
Created on: 2 weeks ago
Info
Report
246 Posts

Say What, Power is going to update the forum... :P
Created on: 2 weeks ago
Info
Report
213 Posts

@tinsoldier, believe me, I want to be able to work on everything, but time and energy are limited.
Created on: 2 weeks ago
Info
Report
95 Posts

Change the secondary colour as well (the deep blue). Maybe something bright.
Created on: 2 weeks ago
Reply
Preview
Post
Or use the advanced reply form here...
Sponsored