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.
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
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, .bbCodeCode span”);
for(var i = 0; i < spans.length; i++){
if(spans_.style.color == “rgb(6, 0, 255)”) {spans*.style.color = “#234bce”;};_
_}_
_}_
var msgIframeColorCorrect = function(){
var msgIframes = document.querySelectorAll (“iframe.redactor_BbCodeWysiwygEditor”);
for(var i = 0; i < msgIframes.length; i++){
_var html = msgIframes.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.addEventListener(“click”, function(){
window.setTimeout(codeBlockColorCorrect, 2000);
});
}
codeBlockColorCorrect();
window.setTimeout(msgIframeColorCorrect, 500);
});
})()
*_</em></em> <em><em>_*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
[/spoiler]
Let me know if I missed some styling or if the colors should change.
*_
