style.html

<div id="menu-content-theme-style" class="menu-content-item">
  <div class="menu-item-header">
    <h1 class="menu-item-header-text">Style</h1>
  </div>
  <div class="menu-item-form">
    <div class="form-wrap">
      <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
      <label for="control-theme-style-light"><span class="label-icon"></span> Light mode</label>
    </div>
    <div class="form-wrap">
      <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
      <label for="control-theme-style-dark"><span class="label-icon"></span> Dark mode</label>
    </div>
    <div class="form-wrap">
      <input id="control-theme-style-system" class="control-theme-style-system" type="radio" name="control-theme-style" value="system" tabindex="-1">
      <label for="control-theme-style-system">
        <span class="label-icon"></span>
        <span class="label-block">
          <span class="label-block-item">Automatic</span>
          <span class="label-block-item small muted">Follow the system Light or Dark mode.</span>
        </span>
      </label>
    </div>
    <div class="form-wrap">
      <p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
      <p class="control-theme-style-helper form-helper-item">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
    </div>
  </div>
</div>