Theme picker without Hitskin's skins

Hi! I hope this is the right place for this question. Well, I want to give my users the option to choose a theme and this theme picker is perfect (https://help.forumotion.com/t135248-add-a-theme-picker#910437). However, I would like to provide them with variations of the skin I have created for the forum (http://plotbunnies.foroactivo.mx/); for example a dark skin but in this dark skin I want to rearrange the statistics board or make the avatar in the lastpost area be square, something like that. Is that possible?

No sadly the only way is to install your themes on Hitskin then make them work the way it's said in the thread.

That is the only way I know how it works sorry.

If there aren't many changes this can be done, but it's a bit tedious.
Here's the javascript:

Code:

/*
* Theme Picker
* Version: 1.0 EN (2018-05-13)
* Author: Wecoc
* Description: Simple theme (format) picker without Hitskin links
*/

$(function() {
  var themes = [
    // Default
    ["Default", ''],
    // Dark
    ["Dark", '<style type="text/css">' +
      'body, #wrap { background-color: #000; }' +
      '.lastpost-avatar img { border-radius: 32px; }' +
    '</style>']
  ];

  var a = document.createElement('DIV'), b = document.createElement('SELECT');
  a.id = "theme-picker";
  for (i = 0; i < themes.length; i++) {
    var c = document.createElement('OPTION');
    c.value = themes[i][0];
    c.innerHTML = themes[i][0];
    b.appendChild(c);
  };
  a.appendChild(b);
  document.querySelector('.navbar').after(a);
 
  loadStoredThemeInfo();
 
  b.onchange = function() {
    localStorage.currentTheme = this.value;
    updateThemeOnChange();
  };

  function loadStoredThemeInfo() {
    if (!localStorage.currentTheme) return;
    $('#theme-picker option[value="' + localStorage.currentTheme + '"]').attr('selected','true');
    updateThemeOnChange();
  }
 
  function updateThemeOnChange() {
    if (!localStorage.currentTheme) return;
    var current_theme = localStorage.currentTheme;
    var theme_id = themes.findIndex(x => x[0] == current_theme);
    $('head .theme-data').remove();
    $('head').append('<div class="theme-data">' + themes[theme_id][1] + '</div>');
  }
});

Title: Theme picker
Placement: In all the pages

This is the only part you have to worry:

Code:

    // Default
    ["Default", ''],
    // Dark
    ["Dark", '<style type="text/css">' +
      'body, #wrap { background-color: #000; }' +
      '.lastpost-avatar img { border-radius: 32px; }' +
    '</style>']

There you define the available themes (in my example 'Default' and 'Dark') and the CSS for each one.

Spoiler:

As you can see the default one has nothing defined, because of course it uses the default CSS only.
The Dark one modifies the forum's background to black and the lastpost avatars are rounded.

Thank you very much. It worked perfectly until I added some changes to see how they would work. This is what I added:

Code:

$(function() {
  var themes = [
    // Default
    ["Default", ''],
    // Dark
    ["Dark", '<style type="text/css">' +
      'body, #wrap { background-color: #000; }' +
      '.lastpost-avatar img { border: 6px solid #ffd700!important; }' +
    'a { color: #FFD700; }' +
    'li.row { background: #FFC0CB; }'
    '</style>']
  ];

When I added it, the button disappeared and it's like the code is not even there. Did I do something wrong?

HI there, @Lady Loki, you simply had a few syntax errors which made the code not work properly. Try this.

Code:

$(function() {
  var themes = [
    // Default
    ["Default", ''],
    // Dark
    ["Dark", '<style type="text/css">' +
      'body, #wrap { background-color: #000; }' +
      '.lastpost-avatar img { border: 6px solid #ffd700!important; }' +
    'a { color: #FFD700; }' +
    'li.row { background: #FFC0CB; }' +
    '</style>']
  ];
});

@Wecoc @Draxion Now it works perfectly! Thank you both so so so much!!