Multiple themes

frissdiegurke

Since the effort between just on this site and on all NodeBB sites shouldn't differ and this site should be just an example of NodeBB without any source-customization...
I think within the ACP it would be nice to instead 'use' themes have '(de)activate' like in plugins and add drag&drop to order the themes (maybe even a new Tab 'Active Themes' for clear view).
If more than one theme is activated the user should be allowed to choose between them.

+1

julian

Seems like there's demand for user selectable themes

a_5mith

Just came here to ask for this exact feature. So a big +1 from myself for allowing users to select their own themes.

pwFoo

@a_5mith sagte:> Just came here to ask for this exact feature. So a big +1 from myself for allowing users to select their own themes.

Users should choose a theme from admin preselected themes
So themes tested and allowed by the admin and the users choose the prefered theme / design.

a_5mith

@pwFoo I ended up doing it with jquery, go to my website (in my signature) and you'll see a light icon in the bottom right where you adjust the width, this changes the look of my theme.

Anton Andriyevskyy

Themes on the NODEBB community forums website will be definitely attractive.
Switching themes is something I wanted to try immediately when I firstly landed to your website.

pwFoo

@a_5mith
I think it's toggle some css styles?
Interesting/ simple solution to switch between some defined styles / designs (light, dark, some colors, ...).

Thanks for sharing.

a_5mith

@pwFoo It adds a class name to the body of the page, then the CSS is adjusted to suit.

pwFoo

@a_5mith
Where did you add your css styles?
Custom CSS / Custom JS?

admin -> theme -> customize

a_5mith

@pwFoo Yepp, this is the javascript to add the button and the ability to store the chosen theme.

<script>
$(window).on('action:widgets.loaded', function() {
  if (!$('.panel.lights-out').length) {
   var panel = $('<div class="panel lights-out pointer"><div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div></div>');
$('.overlay-container').append(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>

That will add a class called lights-out to your body, so you would then add new custom CSS to everything you wanted to change by doing

body.lights-out {
background: none repeat scroll 0 0 #181818;
color: #fff;
}

etc, so whatever the normal class is, just add body.lights-out before it.

Took a few hours, but doing it in Firebug then adding the code into custom CSS is easier.

RikoDEV

I think adding a user style change settings in nodebb would be a good option. Especially that other forum engines like discourse have this feature for a long time.