bs Code Highlighter

HTML

<div class="dark-mode-radio">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="theme-radio" data-bs-theme-value="light">
      Light
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="theme-radio" data-bs-theme-value="dark">
      Dark
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="theme-radio" data-bs-theme-value="auto">
      Let the system decide that
    </label>
  </div>
</div>

PHP

/**
 * Change dark-mode sun icon
 */
function change_dark_mode_sun_icon() {
  return '<i class="fa-regular fa-lightbulb"></i>';
}
add_filter('bootscore/icon/sun', 'change_dark_mode_sun_icon');

CSS

.card {
  color: var(--bs-light);
  background-color: var(--bs-dark);
}

.card a {
  color: var(--bs-danger);
}

.card h2 a {
  color: var(--bs-warning);
}

SCSS

.card {
  color: var(--#{$prefix}light);
  background-color: var(--#{$prefix}dark);

  a {
    color: var(--#{$prefix}danger);
  }

  h2 {
    a {
      color: var(--#{$prefix}warning);
    }
  }
}

jQuery

$(window).resize(function () {
  if (window.matchMedia("(max-width: 767px)").matches) {
    $('.filter-buttons').removeClass('btn-group');
  } else {
    $('.filter-buttons').addClass('btn-group');
  }
}).trigger("resize");

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))