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);
}

/* Comment */
.card a {
  color: var(--bs-danger) !important;
}

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

SCSS

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

  // Comment
  a {
    color: var(--#{$prefix}danger) !important;
  }

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

@include media-breakpoint-down(md) {
  body {
    color: var(--#{$prefix}danger);
    background-color: var(--#{$prefix}dark);
  }
}

@include media-breakpoint-up(md) {
  body {
    color: var(--#{$prefix}success);
    background-color: var(--#{$prefix}light);
  }
}

.btn-red {
  @include button-variant(#EF4444, #EF4444);
}

.plugin-button-class {
  @extend .btn;
  @extend .btn-primary;
}

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

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))