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 opacity-4"
        :class="{'opacity-7': versionOptions.theme === 'dark' && isOverwritten}"
        :title="getTooltipMessage('dark')"
      >
        / ☀</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 opacity-4"
        :class="{'opacity-7': versionOptions.theme === 'light' && isOverwritten}"
        :title="getTooltipMessage('light')"
      >
        / 🌙</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 scope="row">File</th>
        <td>{{ selectedVersion.fileName }}</td>
      </tr>
      <tr>
        <th scope="row">Size (min+gzip)</th>
        <td>{{ selectedVersion.fileSize }}KB</td>
      </tr>
      <tr>
        <th scope="row">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="getTooltipMessage('dark')"
            >
              🌙<span class="opacity-4" :class="{'opacity-7': isOverwritten}"> / ☀</span>
            </span>
            <span v-else class="emoji" :title="getTooltipMessage('light')">
              ☀ <span class="opacity-4" :class="{'opacity-7': isOverwritten}"> / 🌙</span>
            </span>

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

            <template v-if="preferedColorScheme">
              <br />
              <span :style="'text-decoration: ' + (isOverwritten ? 'underline' : 'none')">
                Your device is currently set to {{ preferedColorScheme }} mode.
              </span>
            </template>
          </template>
        </td>
      </tr>
      <tr>
        <th scope="row">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 -->