Dark Mode for Forums - Stylus Plugin [CSS]

Resources Other
1

User @mountain_lion reminded me what yet another user whom sadly I forgot the name of :confused: taught me, and that is that I could download a plugin for my browser (I’m using Opera, not sure if Stylus is available for other browsers, I imagine it is?), and use CSS to override almost anything about a particular website/domain (as far as aesthetics goes :P). So here’s my rough and humble take on a dark theme for the forums :stuck_out_tongue: it’s not pretty, but my eyes sure feel better:

html {
    color: #a0a0a0;
    background-color: #333 !important;
}

tbody {
    border-top: 3px solid #505050;
}

.presence-users {
    background-color: #423232;
    color: #999;
}

blockquote {
    border-left: 5px solid #484848;
    background-color: #484848;
}

aside.quote .title {
    border-left: 5px solid #484848;
    background-color: #484848;
    color: #707070;
}

#reply-control .reply-area {
    background: #484848;
    color: #505050;
}

#reply-control #reply-title {
    background: #adadad;
    color: #505050;
}

.select-kit.combo-box .select-kit-header {
    background: #adadad;
    border: 1px solid #999;
    color: #505050;
}

.d-editor-textarea-wrapper {
    background-color: #adadad;
    border: 1px solid #999;
    color: #505050;
}

.d-editor-input, .d-editor-preview {
    background: #5a5a5a;
    color: #000;
}

.modal .modal-body {
    background: #4a4a4a;
}

.modal-footer {
    border-top: 1px solid #232323;
    background: #656565;
}

.btn[href] {
    color: #272727;
}

.category-list tbody .category h3 a[href] {
    color: #777;
}

.topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
    color: #804242;
}

.topic-body:hover .actions .fade-out, .topic-body .selected .actions .fade-out {
    opacity: 1;
    background: #393939;
    color: #8e8e8e;
}

nav.post-controls button.d-hover, nav.post-controls button:focus {
  background: #777;
  color: #333;
}

nav.post-controls .double-button button.like.d-hover {
  background: #333;
}

.select-kit.combo-box .select-kit-filter {
    border-top: 1px solid #515151;
    border-bottom: 1px solid #515151;
    background: #515151;
}

.select-kit .select-kit-collection {
    background: #555;
}

.select-kit.combo-box .select-kit-filter .filter-input, .select-kit.combo-box .select-kit-filter .filter-input:focus, .select-kit.combo-box .select-kit-filter .filter-input:active {
    color: #b1b1b1;
}

.badge-wrapper .badge-category .category-name {
    color: #9e9e9e;
}

.select-kit .select-kit-row.is-highlighted {
    background: #717171;
}

a.mention, a.mention-group {
    color: #e8e8e8;
    background: #698792;
}

pre code {
    color: #d05959;
    background: #484848;
}

p>code, li>code, pre>code {
    color: #d05959;
    background: #484848;
}

.btn {
    color: #75aac3;
    background: #484848;
}

.map:first-of-type {
    background: #292929;
    border-color: #404040;
}

.topic-map {
    border: 1px solid #525252;
}

.topic-map .buttons .btn {
    color: #999;
    background: #232323;
    border-left: 1px solid #565656;
}

.topic-map .buttons .btn:hover {
    color: #232323;
    background: #565656;
}

.topic-status-info {
    border-top: 1px solid #3a3a3a;
}

.topic-body.highlighted {
    animation: background-fade-highlight 0s ease-out;
}

hr {
    border-top: 1px solid #737373;
}

tr {
    border-bottom: 1px solid #4a4a4a;
}

tr.highlighted {
    animation: none;
}

.post-notice {
    background-color: #424242;
    border-top: 1px solid #4a4a4a;
}

#topic-title h1 a {
    color: #d4d4d4;
}

#topic-progress {
    background-color: #252525;
    color: #2bade3;
    border: 1px solid #3c3c3c;
}

#topic-progress .bg {
    border-right: 1px solid #565656;
    background-color: #4e4e4e;
}

.topic-body {
    border-top: 1px solid #3e3e3e;
}

.topic-avatar {
    border-top: 1px solid #3e3e3e;
}

.d-header>.wrap .contents {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #2d2d2d;
}

.d-header {
    background-color: #2d2d2d;
}

.wrap {
    background-color: #272727;
}

.nav-pills>li>a {
    color: #718092;
}

.list-controls .combo-box .combo-box-header {
    background: #444;
    color: #ccc;
}

.list-controls .btn {
    background: #1b1b1b;
    color: #9c3b2c;
}

.topic-list .topic-list-item-separator td span {
    background-color: #ec8972;
    color: #270000;
}

I’m sure that there are a bunch of elements I’m missing, but the big, important parts to simply view the forums (all of it) I believe are all there, including highlight transition/animations, some hover effects, notice messages, etc. Some things/colors purposely left untouched because they already fit a dark theme once, say, the background color was changed, or something to that effect.

1 Like
2

And for those of us on the “main stream” browsers (Firefox, Chrome & Safari) who are happy to just install an extension off the shelf, there is https://darkreader.org/
I use it with Firefox.
Easy to toggle on/off and it can be customised (apply to only certain URLs etc).

3 Likes