• Add to 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>
    
    body.lights-out {
        background: none repeat scroll 0 0 #262525;
        color: #bdbdbd;
    }
    

    Rinse and repeat with css including body.lights-out before your changes, add to custom css.


  • @exodo Anything I do will always be a hack, rule one of things I produce. I do spagetti code like some sort of horrible, programming emnem.

    @a_5mith

    That is a good midway method, if much less copy and paste ease of set up for more complex tweaks then just changing out 2 or 3 divs.

    However, besides the automode, that is inarguably more elegant programmatically way to accomplish that!


  • @Arc said:

    @a_5mith

    That is a good midway method, if much less copy and paste ease of set up for more complex tweaks then just changing out 2 or 3 divs.

    However, besides the automode, that is inarguably more elegant programmatically way to accomplish that!

    My aim was to have one theme that changed the important bits to match a dark theme. Got a bit tedious keeping up with theme changes. Will rework it for Persona just as they release a new theme. 😄


  • @a_5mith said in Advanced Nightmode for NodeBB:

    Add to 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>
    
    body.lights-out {
        background: none repeat scroll 0 0 #262525;
        color: #bdbdbd;
    }
    

    Rinse and repeat with css including body.lights-out before your changes, add to custom css.

    If I use the code, I see 2 lightbulbs in the navbar.

    0_1472780754264_Knipsel.JPG


  • can somebody explain why I have 2 lightbulbs?

  • Admin

    what's your forum URL?

    It's probably this, probably both menus are shown:

    $('ul#logged-in-menu').prepend(panel);
    $('ul#logged-out-menu').prepend(panel);
    

  • @psychobunny http://keen.wtf

    if you need to login you can use the following


    username: AAA
    password: AAAAAA



  • @psychobunny if I remove one of those lines it doesn't make a different


  • How could I alter this to switch skins? I use flatly but I'd like the darkly to enable at night automagically.


  • btw, on nodebb 1.2.1 the 2 lightbulbs are fixed it's now 1

Suggested Topics

| |