Mark · Components

Theme toggle

The color-mode control — one source of truth. pill and link toggle between two modes; menu is a split button whose left half toggles and whose right half opens the full list, which is what lets a third mode exist at all.

Pill

Full page preview ↗ 
<button type="button" class="mk-theme-toggle" data-accent-theme-toggle aria-label="Toggle color mode">
  <i class="bi bi-moon-stars mk-theme-icon-dark"></i>
  <i class="bi bi-sun mk-theme-icon-light"></i>
</button>
variant: pill

Link

Full page preview ↗

Menu

Full page preview ↗

The split button. Left half cycles light and dark as before; the caret opens the list, which is the only way to reach auto or a derived mode.

<div class="mk-btn-group mk-btn-group--join dropdown" aria-label="Color mode">
  <button type="button" class="mk-btn mk-btn--sm" data-accent-theme-toggle aria-label="Toggle color mode">
    <i class="bi bi-moon-stars mk-theme-icon-dark"></i>
    <i class="bi bi-sun mk-theme-icon-light"></i>
  </button>
  <button type="button" class="mk-btn mk-btn--sm" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Choose color mode">
    <i class="bi bi-chevron-down"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-end" role="menu">
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-mk-mode-set="light">
        <i class="bi bi-sun"></i>
        Light
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-mk-mode-set="dark">
        <i class="bi bi-moon-stars"></i>
        Dark
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-mk-mode-set="auto">
        <i class="bi bi-circle-half"></i>
        Auto
      </button>
    </li>
  </ul>
</div>
variant: menu

Menu with contrast

Full page preview ↗

A site that ships the derived contrast mode offers it here. The mode is CSS in _base.scss; this is the control that makes it selectable.

<div class="mk-btn-group mk-btn-group--join dropdown" aria-label="Color mode">
  <button type="button" class="mk-btn mk-btn--sm" data-accent-theme-toggle aria-label="Toggle color mode">
    <i class="bi bi-moon-stars mk-theme-icon-dark"></i>
    <i class="bi bi-sun mk-theme-icon-light"></i>
  </button>
  <button type="button" class="mk-btn mk-btn--sm" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Choose color mode">
    <i class="bi bi-chevron-down"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-end" role="menu">
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-mk-mode-set="light">
        <i class="bi bi-sun"></i>
        Light
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-mk-mode-set="dark">
        <i class="bi bi-moon-stars"></i>
        Dark
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemradio" aria-checked="false" data-mk-mode-set="auto">
        <i class="bi bi-circle-half"></i>
        Auto
      </button>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center gap-2" role="menuitemcheckbox" aria-checked="false" data-mk-contrast-toggle>
        <i class="bi bi-square mk-check-off"></i>
        <i class="bi bi-check-square-fill mk-check-on"></i>
        High contrast
      </button>
    </li>
  </ul>
</div>
variant: menu
modes: light dark auto
contrast: true
Fields (3)
FieldTypeNotes
variant text pill (bordered button) · link (plain, for a utility strip) · menu (split button with the full mode list)
modes text menu variant only — the selections it offers, space separated: light · dark · auto · contrast. Order is the order shown.
class_names text
On this page