css-water.css/docs/versionpicker.html

<!-- Start interactive version picker -->
<div id="installation" class="version-select" v-cloak>
  <header class="row version-select__snippet">
    <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
    <button type="button" class="version-select__snippet__btn" @click="copyToClipboard">
      <transition>
        <span v-if="copyStatus === 'success'" class="emoji">✔</span>
        <span v-else-if="copyStatus === 'failed'" class="emoji">❌</span>
      </transition>
      Copy to clipboard
    </button>
  </header>

  <transition mode="out-in">
    <pre :key="selectedVersion.fileSnippet"><code>{{selectedVersion.fileSnippet}}</code></pre>
  </transition>

  <h3>Options</h3>
  <form action="./" method="post" @submit.prevent class="version-select__options">
    <label>
      <input type="radio" value="dark" checked name="theme" v-model="versionOptions.theme" />
      Dark theme&nbsp;<span class="emoji">🌙</span>
      <span
        v-if="!versionOptions.isStandalone"
        class="tooltip emoji translucent"
        title="Selected theme may be overwritten by theme settings on user's device"
      >
        / ☀</span>
    </label>
    <label>
      <input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
      Light theme&nbsp;<span class="emoji">☀</span>
      <span
        v-if="!versionOptions.isStandalone"
        class="tooltip emoji translucent"
        title="Selected theme may be overwritten by theme settings on user's device"
      >
        / 🌙</span>
    </label>
    <details class="version-select__options__additional">
      <summary><span>Additional options</span></summary>
      <label>
        <input type="checkbox" checked v-model="versionOptions.isStandalone" />
        Enforce theme? (ignore <code>prefers-color-scheme</code>)
      </label>
      <label>
        <input type="checkbox" v-model="versionOptions.isLegacy" />
        Support Internet Explorer and other legacy browsers?
      </label>
    </details>

  </form>

  <table class="version-select__info">
    <caption>
      <h3>Version info</h3>
    </caption>
    <tbody>
      <tr>
        <th>File</th>
        <td>{{ selectedVersion.fileName }}</td>
      </tr>
      <tr>
        <th>Size (min+gzip)</th>
        <td>{{ selectedVersion.fileSize }}KB</td>
      </tr>
      <tr>
        <th>Theme</th>
        <td>
          <template v-if="versionOptions.isStandalone">
            <span v-if="versionOptions.theme === 'dark'" class="emoji">🌙</span>
            <span v-else class="emoji">☀</span>
            {{ versionOptions.theme | capitalize }}
          </template>

          <template v-else>
            <span
              v-if="versionOptions.theme === 'dark'"
              class="emoji"
              title="Selected theme may be overwritten by theme settings on user's device"
            >
              🌙<span class="translucent"> / ☀</span>
            </span>
            <span
              v-else
              class="emoji"
              title="Selected theme may be overwritten by theme settings on user's device"
            >
              ☀ <span class="translucent"> / 🌙</span>
            </span>

            Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
            (detected via <code>prefers-color-scheme</code>)

            <template v-if="preferedColorScheme">
              <br />Your device is currently set to {{ preferedColorScheme }} mode.
            </template>
          </template>
        </td>
      </tr>
      <tr>
        <th>Browser support</th>
        <td>
          <template v-if="versionOptions.isLegacy">
            All browsers (including Internet Explorer)
          </template>
          <template v-else>
            All current browsers (<a href="https://caniuse.com/#feat=css-variables"
              >support for CSS Custom Properties</a>)
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- End interactive version picker -->