アニメーションダークテーマトグルをあなたのウェブサイトに加えること

5012 ワード
dark html opensource react テキストリンク
あなたのウェブサイトに暗いとライトモードを持つことはますます人気が高まっている.私は、私がエレガントで機能的なトグルのコレクションを提供するオープンソースプロジェクトを構築したと言うことを誇りに思います.
ライブラリは現在、反応のための公式サポートを持って簡単に任意のフレームワークで使用することができます.
All the toggles
Github

ウェブサイトへの追加


クラシックトグルをウェブサイトに加える方法をあなたに教えます.あなたが反応を使用しているならば、下記を見てください.
まず、HTMLコードをコピーする必要があります
私たちはボタンを使うつもりです、そして、書く時に、それは以下のように見えます:
<button
  class="theme-toggle"
  type="button"
  title="Toggle theme"
  aria-label="Toggle theme"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    width="1em"
    height="1em"
    fill="currentColor"
    stroke-linecap="round"
    class="theme-toggle__classic"
    viewBox="0 0 32 32"
  >
    <clipPath id="theme-toggle__classic__cutout">
      <path d="M0-5h30a1 1 0 0 0 9 13v24H0Z" />
    </clipPath>
    <g clip-path="url(#theme-toggle__classic__cutout)">
      <circle cx="16" cy="16" r="9.34" />
      <g stroke="currentColor" stroke-width="1.5">
        <path d="M16 5.5v-4" />
        <path d="M16 30.5v-4" />
        <path d="M1.5 16h4" />
        <path d="M26.5 16h4" />
        <path d="m23.4 8.6 2.8-2.8" />
        <path d="m5.7 26.3 2.9-2.9" />
        <path d="m5.8 5.8 2.8 2.8" />
        <path d="m23.4 23.4 2.9 2.9" />
      </g>
    </g>
  </svg>
</button>
それから、私たちはCSSがあることを確認したいです.toggles.devから最新バージョンを見つけて、それをあなたの頭に加えてください.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/classic.min.css" integrity="sha256-ILVFUnh+ImxX+Mn4ykqVnowo8WNCuskhdKSuoOOrago=" crossorigin="anonymous">
<head />
今、私たちがしなければならないことは、テーマが暗いときにトグルグラフを適用することです.「テーマトグル--トグル」というクラスがあるとき、ボタンはトグルするでしょう.これはJavaScript経由で切り替える必要があります.
そしてそれです.

日本学術振興会 反応する


あなたが反応を使用している場合、それはさらに簡単にトグルを取得し、実行している.反応パッケージ の使用方法を参照してください
reactjsでフォームを有効にする方法?
Linux/Unixにおける15の実用的なgrepコマンド例