Advanced Nightmode for NodeBB

a_5mith

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.

Arc

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

a_5mith

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

MJ

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

MJ

can somebody explain why I have 2 lightbulbs?

psychobunny

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);

MJ

@psychobunny http://keen.wtf

if you need to login you can use the following

username: AAA
password: AAAAAA

MJ

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

cookieman768

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

MJ

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