MediaWiki:Common.js

mw.hook('wikipage.content').add(function ($content) {
  var $buttons = $content.find('.hj-chaos-tab-button');
  var $blocks  = $content.find('.hj-chaos-block');
  var root     = $content.closest('.hj-chaos-container')[0];

  if (!$buttons.length || !$blocks.length) return;

  function darken(rgb, k){
    var m = rgb.match(/\d+/g) || [17,17,17];
    var r = Math.round(m[0]*(1-k)), g = Math.round(m[1]*(1-k)), b = Math.round(m[2]*(1-k));
    return 'rgb('+r+', '+g+', '+b+')';
  }

  function applyPanelFrom($btn){
    var c = getComputedStyle($btn[0]).backgroundColor;
    root.style.setProperty('--panel-bg', c);
    root.style.setProperty('--card-bg', darken(c, 0.18));
  }

  var $active = $buttons.filter('.active');
  if ($active.length) applyPanelFrom($active);

  $buttons.off('click.hjChaos').on('click.hjChaos', function () {
    var $btn = $(this);
    var key  = $btn.data('chaos');

    $buttons.removeClass('active');
    $btn.addClass('active');

    $blocks.removeClass('active');
    $blocks.filter('[data-chaos="' + key + '"]').addClass('active');

    applyPanelFrom($btn);
  });
});