Simple Night Mode for NodeBB



  • As my first tweak seems to have been well liked, here's another one from my site.

    At least for my site, the #1 most requested feature was a night mode. It wasnt too hard to make, but I found a lot of questions here on the nodeBB community about how to implement one, so I figured some people could benefit from this!

    Step 1: CSS

    Grab notepad or nodepad++, and your favorite web browser for development. Open up the inspector (ctrl-shift-i on chrome), and carefully tweak your way to a working night mode, copy pasting each CSS rule you make to the txt document, removing any unrelated rules (Keep only things you change!).

    Be detailed! Remember dismiss dialogs, search pages, group pages, user settings pages, composers, everything.

    Once you have a full night mode CSS, save this file as nightmode.css

    Step 2: Putting the CSS file on your server

    Use filezilla or similar to throw nightmode.css into nodebb/public

    Step 3: JS

    Paste the following into your header:


     <script>
         function nightmode(){
         var el = document.getElementById('myStyles'); 
     
         if ( el !== null ) {                
             el.parentNode.removeChild(el);  
         } else {                            
             var oLink = document.createElement("link") 
     
             oLink.id   = 'myStyles';
             oLink.href = "/nightmode.css";
             oLink.rel = "stylesheet"; 
             oLink.type = "text/css"; 
     
             document.body.appendChild(oLink);
         }
     }
     </script>
    

    Save that.

    Step 4: Button

    Make a button for nightmode, most likely in a HTML widget under extend, but wherever you want.

    <button class="nightmodebutton" onclick="nightmode()"><span></span></button>

    Works well. Style it as you like with css- your site now has night mode!



  • @Arc this is great, thanks for posting!



  • Updated the JS to remove the bug where it ignores some pages, now it should work on every page.



  • Thanks a lot Arc for this!
    Very easy and convenient trick.

    How can one add this lightbulb button in the navbar, for example, next to the bell icon?



  • @TaLoche said in Simple Night Mode for NodeBB:

    How can one add this lightbulb button in the navbar, for example, next to the bell icon?

    paste into custom-header

    <script>
    $(window).on('action:widgets.loaded', function() {
      if (!$('li.lights-out').length) {
        var panel = $('<li class="lights-out"><a title="" href="#" data-original-title="Dark Theme"><i class="fa fa-fw fa-lightbulb-o"></i><span class="visible-xs-inline">Dark Theme</span></a></li>');
        $('ul#logged-in-menu').prepend(panel);
        $('ul#logged-out-menu').prepend(panel);
        panel.on('click', function() {
        enabled = !$('body').hasClass('lights-out');
        $('body').toggleClass('lights-out',  enabled);
        localStorage.setItem('user:theme', enabled ?  'lights-out' : '');
        });      
      }
    });
    </script>
    
    
    <script>
    $('document').ready(function() {
        var theme = localStorage.getItem('user:theme');
        if (theme) {
            $('body').addClass(theme );
        }
    });
    </script>
    


  • and this in custom-css

    body.lights-out {
        background: none repeat scroll 0 0 #191919;
        color: #666666;
    }
    body.lights-out .category>ul>li:not(.unread) .card {
        border-color: #262525 !important;
    }
    body.lights-out .fa-fw {
        color: white;
    }
    body.lights-out .navbar-default {
        background-color: rgba(25,25,25,0.81);
        border-color: rgba(25,25,25,0.81);
    }
    body.lights-out a {
        color: #aaa;
        text-decoration: none;
    }
    body.lights-out .category>ul>li:not(.unread) h2 a {
        color: #adadad !important;
    }
    body.lights-out .navbar-default .navbar-nav>li>a {
        color: #666;
    }
    /* ICONEN */
    body.lights-out .fa.fa-fw.fa-align-justify{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-clock-o{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-commenting-o{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-user{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-circle-o{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-gamepad{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-file-text-o{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-cogs{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-search{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-lightbulb-o{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-bell{
        color: white;
    }
    body.lights-out .fa.fa-fw.fa-comment-o{
        color: white;
    }
    /*Mobiel*/
    .navbar-default .navbar-toggle {
        border-color: #fff;
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #fff;
    }
    .composer .mobile-navbar {
        background: #ffffff;
        color: #000;
    }
    
    


  • Thanks a lot @MJ.

    Works find!



  • @TaLoche I got it from someone here 🙂 don't know who it was.


Log in to reply
 


Star

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.