Resolved Darkmode for forum and docs

I am an avid dark mode user and I wasn't able to find a dark mode setting for forum.unity.com or docs.unity3d.com

So I created my own.

It's pretty simple. I installed the browser extension "Custom Style Script" for Firefox (I think it's for Chrome as well) and created two items. Instructions below.

Spoiler: Item 1 -- Docs

Step 1: set the URL to

https://docs.unity3d.com/

Step 2: set the Style to

body {color: #AAA !important;}

#search-query {

    background-color: #333;

    border-color: #444;

}

.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-text {

    color: #aaa;

}

.back-to-unity-group { color: #aaa;}

#wrapper { background-color: #222; }

.subnav.navbar {

    background-color: #222;

    border-color: #333;

}

#version-switcher-select .component-select {

    background-color: #353535;

}

#component-select-current-display {

    color: #888;

}

#sidetoc .sidefilter {

    background-color: #222;

    border-color: #333;

}

#sidetoc .sidetoc {

    background-color: #222;

    border-color: #333;

}

#sidetoc .sidetoc #toc.toc {

    background-color: #222;

    border-color: #333;

}

#sidetoc .toc-filter {

    background-color: #333;

    border-color: #444;

}

#toc_filter_input {

    background-color: #333;

    color: #aaa;

}

.toc .nav > li > a:hover, .toc .nav > li > a:focus {

    color: #ddd !important;

}

#_content code {

    background-color: #181818;

}

#_content pre code {

    background-color: transparent;

    color: #aaa;

}

#_content pre {

    background-color: #111;

    border-color: #333;

}

#_content code pre .hljs {

    color: #aaa;

}

.table-striped > tbody > tr:nth-of-type(2n+1){

    background-color: #2a2a2a !important;

}

.footer {

    background-color: #333 !important;

    border-color: #444 !important;

}

.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {border-color: #333 !important;}

Step 3: toggle on Domain
Step 4: toggle on Top

Spoiler: Item 2 -- Forum

Step 1: set the URL to

https://forum.unity.com/

Step 2: set the Script to

(function(){

    document.addEventListener("DOMContentLoaded", (ev)=>{



        var codeBlockColorCorrect = function(){

            console.log("HIT!");

            var spans = document.querySelectorAll(".bbCodeBlock span[style], .bbCodeCode span[style]");

            for(var i = 0; i < spans.length; i++){

                if(spans[i].style.color == "rgb(6, 0, 255)") {spans[i].style.color = "#234bce";};

            }

        }



        var msgIframeColorCorrect = function(){

            var msgIframes = document.querySelectorAll ("iframe.redactor_BbCodeWysiwygEditor");

            for(var i = 0; i < msgIframes.length; i++){

                var html = msgIframes[i].contentWindow.document.querySelector("html");

                html.style.backgroundColor = "#111";

                html.style.color = "#aaa";

            }

        }



        var previewBtns = document.querySelectorAll(".PreviewButton");

        for(var i = 0; i < previewBtns.length; i++) {

            previewBtns[i].addEventListener("click", function(){

                window.setTimeout(codeBlockColorCorrect, 2000);

            });

        }



        codeBlockColorCorrect();

        window.setTimeout(msgIframeColorCorrect, 500);

    });

})()

Step 3: set the Style to:

body,#headerMover, #content .pageContent {color: #aaa; background-color: #222;}

.discussionList .sectionHeaders {background-color: #3a3a3a !important;}

.discussionList .sectionHeaders a {color: #aaa !important;}

.discussionListItem.visible.sticky {background-color: #333 !important;}

.discussionListItem:nth-of-type(2n) {background-color: #2a2a2a !important;}

.discussionListItem {border-color: #444 !important;}

.sectionFooter {background-color: #333 !important;}

a:link, a:visited {color: #aaa !important;}

.breadcrumb {background-color: #222 !important; border-color: #333 !important;}

.breadcrumb .crust a.crumb {background-color: #333 !important; border-color: #333 !important;}

.breadcrumb .crust .arrow {border-left-color: #444 !important;}

.breadcrumb .crust .arrow span { border-left-color: #333 !important; }

.breadcrumb .crust:hover a.crumb {background-color: #444 !important;}

.breadcrumb .crust:hover .arrow {border-left-color: #555 !important;}

.breadcrumb .crust:hover .arrow span { border-left-color: #444 !important; }

.PanelScroller .scrollContainer, .PanelScrollerOff .panel{background-color: #333 !important; border-color: #444 !important;}

.PanelScroller .panel, .PanelScrollerOff .panel {background-color: #333 !important;}

.PanelScroller .navControls a {background-color: #333 !important; border-color: #444 !important;}

.PanelScroller .navControls a .arrow span {border-top-color: #555 !important;}

.forum_view .filterByTag .tagList .tag {background-color: #333 !important; border-color: #444 !important;}

.PageNav a {background-color: #333 !important;}

.tagList .tag {background-color: #555 !important; color: bbb !important; border-color: #555 !important;}

.discussionList .tagList .tag {border: 1px solid #555 !important;}

.messageList .message:nth-of-type(2n) {background-color: #2a2a2a !important;}

.prefix.prefixYellow {background-color: #d3d333 !important; border-color: #d3d333 !important;}

.bbCodeBlock {border-color: #333 !important;}

.bbCodeBlock .type {background-color: #111 !important; background-color: #333 !important;}

.bbCodeBlock pre, .bbCodeBlock .code {background-color: #111 !important; border-color: #333 !important; color: aaa !important;}

.textCtrl {background-color: #333 !important; border-color: #444 !important;}

.formPopup {background: transparent !important;}

.button, .button:hover, .button[href]:hover, .buttonProxy:hover .button, .button.primary {color: #aaa !important;}

footer.main-footer p.lbl {color: #ccc !important;}

.redactor_box {border-color: #444 !important;}

.redactor_toolbar {background-color: #333 !important; border-color: #444 !important;}

.redactor_toolbar li.redactor_btn_group ul {box-shadow: none !important; border-color: #444 !important; background-color: #222 !important;}

html .redactor_toolbar li a {filter: invert(1);}

.subHeading {background-color: #333 !important; color: #aaa !important;}

.hasJs .bbCodeSpoilerText {background-color: transparent !important; border-color: transparent !important;}

.nodeList .categoryStrip {background-color: #333 !important;}

.nodeList .categoryStrip .nodeTitle a {color: #aaa !important;}

.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {border-color: #444 !important;}

.navTabs .navTab.selected .tabLinks a:hover, .navTabs .navTab.selected .tabLinks a:focus {color: #333 !important;}

.primaryContent, .secondaryContent {background-color: #333 !important; border-color: #444 !important;}

.textHeading, .xenForm .sectionHeader {color: #aaa !important;}

.messageInfo.primaryContent {background-color: transparent !important;}

.bbCodeQuote .quoteContainer {background-color: #444 !important;}

.bbCodeQuote .quoteContainer .quoteExpand {background: #444 !important;}

.bbCodeQuote .attribution {color: #aaa !important;}

.attachedFiles {border-color: #444 !important;}

.attachedFiles .attachedFilesHeader {color: #aaa !important;}

.attachedFiles .attachedFilesHeader, .attachedFiles .attachmentList {border-color: #555 !important; background: #444 !important;}

#ctrl_title_thread_create {color: #aaa !important;}

Step 4: toggle on Domain
Step 5: toggle on Top

Let me know if I missed some styling or if the colors should change.

 

Dark reader is everyones friend

https://addons.mozilla.org/en-US/firefox/addon/darkreader/

(not sure this is the forum for this post though...)

 

Looks cool!

I'd make the "Today at X:XX AM/PM" / "A moment ago" line (

.messageInfo .DateTime

) a bit lighter in color. Same with the thread title (

.titleBar h1

). Also, maybe lighten up the different colored parts?

 

That's awesome. Definitely giving that a spin.

I default to this forum so frequently I didn't even consider if it was an appropriate post.

I agree. Can't get to it this weekend. I'll post an update early next week.