• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Simple Night Mode for NodeBB

Scheduled Pinned Locked Moved NodeBB Themes
14 Posts 6 Posters 8.3k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • MJM Offline
    MJM Offline
    MJ
    replied to TaLoche on last edited by
    #5

    @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 Reply Last reply
    1
  • MJM Offline
    MJM Offline
    MJ
    wrote on last edited by
    #6

    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;
    }
    
    
    crazycellsC 1 Reply Last reply
    3
  • TaLocheT Offline
    TaLocheT Offline
    TaLoche
    wrote on last edited by TaLoche
    #7

    Thanks a lot @MJ.

    Works fine!

    MJM 1 Reply Last reply
    3
  • MJM Offline
    MJM Offline
    MJ
    replied to TaLoche on last edited by
    #8

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

    1 Reply Last reply
    0
  • crazycellsC Offline
    crazycellsC Offline
    crazycells
    replied to MJ on last edited by crazycells
    #9

    @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;
    }
    
    
    1 Reply Last reply
    2
  • crazycellsC Offline
    crazycellsC Offline
    crazycells
    wrote on last edited by
    #10

    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;
    }
    
    1 Reply Last reply
    0
  • crazycellsC Offline
    crazycellsC Offline
    crazycells
    wrote on last edited by crazycells
    #11

    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

    zaasmiZ 1 Reply Last reply
    0
  • zaasmiZ Offline
    zaasmiZ Offline
    zaasmi Anime Lovers
    replied to crazycells on last edited by
    #12

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

    crazycellsC 1 Reply Last reply
    0
  • crazycellsC Offline
    crazycellsC Offline
    crazycells
    replied to zaasmi on last edited by
    #13

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

    1 Reply Last reply
    0
  • crazycellsC Offline
    crazycellsC Offline
    crazycells
    wrote on last edited by
    #14

    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 Reply Last reply
    1

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development