Multiple themes

[meetdilip]

I have seen how much the NodeBB theme can be customized. Many of them make it look completely Elite. It will be nice to have a drop down menu on top or bottom where we can try available NodeBB themes. That will help new comers understand that they just landed on a wonderful platform.

[julian]

At present, languages and themes are a global option, and there are no plans to make themes user-selectable, but you never know... if there is enough interest, we might devote some time to make this happen

[meetdilip]

I mean just on this site. Or may be a theme demo link where others can notice. I really love some themes @psychobunny posted on Admin Extra.

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