Simple Night Mode for NodeBB

NodeBB Themes
Log in to reply
  • Arc

    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!

    M 1 Reply 6
  • M

    @Arc this is great, thanks for posting!

    0
  • Arc

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

    0
  • TaLoche

    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?

    MJ 1 Reply 0
  • MJ

    @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>
    1
  • MJ

    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;
}
    crazycells 1 Reply 3
  • TaLoche

    Thanks a lot @MJ.

    Works fine!

    MJ 1 Reply 3
  • MJ

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

    0
  • crazycells

    @MJ said in Simple Night Mode for NodeBB:

    body.lights-out .fa.fa-fw.fa-comment-o{
    color: white;
    }
    /Mobiel/
    .navbar-default .navbar-toggle {
    border-color: #fff;
    }

    In case, anyone wants to make the tags and pagination container dark as well, we have this addition to the code above:

    body.lights-out .fa.fa-fw.fa-comment-o{
    color: white;
}

body.lights-out .category>ul>li .tag-list .tag {
    background-color: #404040;
}

body.lights-out .pagination a{
    color: #ffffff;
    background-color: #404040;
    border-color: #232323;
}
/*Mobiel*/
.navbar-default .navbar-toggle {
    border-color: #fff;
}

    Edit: You can also add this for active page on the pagination

    body.lights-out .page.active a{
    background-color: #848484;
}
    2
  • crazycells

    We have some improvements to the code, apparently status buttons (online, do not disturb, away) also goes off in the night mode. This bug exists in desktop mode but not on mobile mode. To make them visible we have added them to the code above, and final form is this:

    body.lights-out .category>ul>li .tag-list .tag {
    background-color: #404040;
}

body.lights-out .pagination a{
    color: #ffffff;
    background-color: #404040;
    border-color: #232323;
}

body.lights-out .page.active a{
    background-color: #848484;
}

body.lights-out .status.online {
    color: #4caf50;
}

body.lights-out .status.away {
    color: #ff6d00;
}

body.lights-out .status.dnd {
    color: #f44336;
}

body.lights-out.status.offline {
    color: #555;
}
    0
  • crazycells

    Hi everyone, we have improved our night mode codes since we have night-mode-junkies in our forum...

    In case anyone interested, they can copy it to the CSS panel. Additionally, I would recommend plugin to be changed because our code additions makes the appearance better than the regular night mode and also fix some bugs.

    /* fix for night mode*/
//tags
body.lights-out .category>ul>li .tag-list .tag {
    background-color: #404040;
}

//pagination appearance fix
body.lights-out .pagination a{
    color: #ffffff;
    background-color: #404040;
    border-color: #232323;
}

body.lights-out .page.active a{
    background-color: #848484;
}

body.lights-out .pagination>li>a:hover {
    background-color: #5D5C5C !important;
}

//status of user
body.lights-out {
    .status.online {
    color: #4caf50;
}

    .status.away {
    color: #ff6d00;
}

    .status.dnd {
    color: #f44336;
}

    .status.offline {
    color: #555;
}
}

//buttons
body.lights-out .btn-primary {
    color: #fff;
    background-color: #6D6D6D !important;
    border-color: #6D6D6D !important;
}

body.lights-out .topic-main-buttons .btn-info {
    background-color: #8F8F8F !important;
    border-color: #8F8F8F !important;
}

//lines on the pages
body.lights-out .topic .posts hr{
    border-top: 1px solid #363636;
}

body.lights-out hr {
    border-top: 1px solid #3c3c3c;
}

body.lights-out .topic .post-signature {
    border-top: 1px dashed #3c3c3c;
}

body.lights-out {
@media (max-width: 767px) {
.categories>li, .category>ul>li {
    border-top: 1px solid #3c3c3c;
}
.categories>li:last-child, .category>ul>li:last-child {
    border-bottom: 1px solid #3c3c3c;
}    
}
}


body.lights-out .well {
    background-color: #191919 ; 
}

body.lights-out .panel-default .panel-heading {
    background-color: #191919 ;
    color: #666;
    border-color: #666; 
}

body.lights-out .panel {
    background-color: #666;
}

body.lights-out .form-control {
    background-color: #dcdcdc;
}

body.lights-out .composer .write {
    background: #dcdcdc;
}

//for calendar
body.lights-out { 
    .fc-event-container a{
    color: #d5d5d5;
}    
    .fc-unthemed td.fc-today {
    background: #dcd9c6;
}
}

//chat box fix

body.lights-out { 
    .chats-list>li .teaser-content {
     color: #666;
}

    .chat-list .unread {
    background-color: #eeead7;
}

    .chats-list>li {
    border-color: #060606;
    border-bottom: 1px solid #060606 !important;
}
    .chats-list {
    border-top: 1px solid #060606;
}

}

body.lights-out .chat-modal {
    
    .modal-body {
    background-color: #191919;
}

    .modal-header {
    background-color: #333;
    color: #eee;
    border-bottom: 0px solid #e5e5e5;
}
    .modal-content {
    border: 1px solid #3c3c3c;
    background-color: #3c3c3c;
}
    .chat-content li.chat-message[data-break=true] {
    border-top: 1px solid #3c3c3c;
}
    .expanded-chat {
    border-top: 1px solid #3c3c3c;    
    }
}

    Here is the github report:

    https://github.com/psychobunny/nodebb-plugin-night-mode/issues/2

    AliCihan created this issue in psychobunny/nodebb-plugin-night-mode

    closed some bug fix suggestions and improvements to the code #2

    zaasmi 1 Reply 0
  • zaasmi
    Anime Lovers

    @crazycells said in Simple Night Mode for NodeBB:

    https://github.com/psychobunny/nodebb-plugin-night-mode/issues/2

    Just Installed plugin, but noting show for night mode changes, please guide we need more step to implementation.

    crazycells 1 Reply 0
  • crazycells

    @zaasmi said in Simple Night Mode for NodeBB:

    @crazycells said in Simple Night Mode for NodeBB:

    https://github.com/psychobunny/nodebb-plugin-night-mode/issues/2

    Just Installed plugin, but noting show for night mode changes, please guide we need more step to implementation.

    I think you should re-start the forum after installing the plugin.
    But I guess plugin still has some bugs, you can use the codes above and add them to your custom CSS in Admin Control Panel. Feel free to change/add/delete any codes above according to your needs.

    0
  • crazycells

    With new 1.15.2 nodeBB, there are some bugs in the night mode, we have just installed 1.15.2 in our development forum, so I will fix all bugs in the coming weeks and create pull request to the plugin in github...

    For those who needs a quick fix, you can add these codes to Custom CSS session in NodeBB for most obvious problems.

    body.lights-out {

.topic-list-header {
background-color: #191919 ;
}

.recent-cards .recent-card-container .recent-card {
 background-color: #2E2E2E ;   
 border: #848484 ;  
}

.tag-list .tag {
    background-color: #404040;
}
  
}
    1

Suggested Topics

| |
Copyright © 2020 NodeBB | Contributors