Search Unity

  1. Dismiss Notice
  2. We have added a sub-forum for DOTS Graphics. Please use the new space for related discussions.
    Dismiss Notice

Resolved Darkmode for forum and docs

Discussion in 'Data Oriented Technology Stack' started by TheGabelle, Jan 1, 2021.

  1. TheGabelle

    TheGabelle

    Joined:
    Aug 23, 2013
    Posts:
    229
    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.

    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
    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.

    Capture.PNG Capture2.PNG Capture4.PNG Capture5.PNG
     
    Mauri, Treecrotch and francois85 like this.
  2. TheGabelle

    TheGabelle

    Joined:
    Aug 23, 2013
    Posts:
    229
  3. tertle

    tertle

    Joined:
    Jan 25, 2011
    Posts:
    2,915
    Last edited: Jan 1, 2021
    Jes28, dannyalgorithmic and Sarkahn like this.
  4. Mauri

    Mauri

    Joined:
    Dec 9, 2010
    Posts:
    2,265
    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?
     
  5. TheGabelle

    TheGabelle

    Joined:
    Aug 23, 2013
    Posts:
    229
    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.
     
unityunity