HTML Web コンポーネントのダーク モードの切り替え

デジタルガーデンをデザインするとき、かわいいダークモードトグルが欲しいと思っていました。 SVG を描画したら、React のダーク モード切り替えとすべて同じ機能を持つ Web コンポーネントの構築を開始しました。これには、サイトのアクセシビリティ監査中に学んだすべてのことが含まれます。

テーマの変更に加えて、トグルではユーザーの好みの配色の選択を考慮し、リロード後もユーザーの好みを維持する必要があります。アクセシビリティを確保するには、トグルのスクリーン リーダーのアナウンスが意味をなすものでなければなりません (例: 「ダーク モード トグル オン」)。テキスト付きのチェックボックスの代わりに SVG を表示したいので、フォーカスとホバーのスタイル、およびホバー時に表示されるラベルを追加する必要があります。

Web コンポーネントの切り替え

まず、HTML 要素を作成する Toggle クラスが必要です。カスタム要素 API を使用して、 を定義します。このクラスを使用します。

クラスのコンストラクターを使用して、 の innerHTML を設定します。 に; を使用します。 SVG を子として使用します。ラベルには title 属性があり、ユーザーがその上にカーソルを置くと、トグルに「ダーク モード トグル」ラベルが表示されるか、 が表示されます。チェックボックスは の子であるため、 と対話します。 と対話するのと同じことです。そしてその逆も同様です。また、title 属性により、ユーザーがこのコンポーネントを操作するときにスクリーン リーダーが「ダーク モードの切り替え」をアナウンスするようになります。

HTML を配置したら、connectedCallback 関数をクラスに追加します。カスタム要素 API のこの部分は、コンポーネント内で使用する関数を定義し、コンポーネントが DOM に挿入されるときにコードを実行します。

// /components/toggle.js

class Toggle extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `
      <label title="dark mode toggle">
        <input type="checkbox" id="theme-toggle" class="theme-switch" />
        <svg id="daisy">{SVG code removed for brevity}</svg>
      </label>
    `
    this.setAttribute("class", "toggle-component");
  }

  connectedCallback() {
    function switchTheme(e) {
      if (e.target.checked) {
        setTheme('dark');
        return;
      }

      setTheme('light');   
    };

    function setTheme(themeName) {
      localStorage.setItem('theme', themeName);
      document.documentElement.setAttribute('data-theme', themeName);
    };

    function setCheckBox(toggleSwitch, theme) {
      toggleSwitch.checked = theme === 'dark' ? true : false;
    }

    function keepTheme() {
      const toggleSwitch = document.querySelector('#theme-toggle');
      toggleSwitch.addEventListener('change', switchTheme, false);
      const theme = localStorage.getItem('theme');
      if (theme) {
        setTheme(theme);
        setCheckBox(toggleSwitch, theme);
        return;
      };

      const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
      if (prefersLightTheme.matches) {
        setTheme('light');
        return;
      };

      setTheme('dark');
      setCheckBox(toggleSwitch, 'dark');
    };

    document.addEventListener("DOMContentLoaded", keepTheme);    
  }
}

customElements.define("toggle-component", Toggle);

なぜなら、ページが読み込まれる前に DOM に挿入されると、すぐに実行される唯一のコードがイベント リスナーを追加します。イベント リスナーは、ページが読み込まれるとすぐに keepTheme を呼び出します。まず、keepTheme は にイベント リスナーを追加します。ユーザーが操作するときに switchTheme を呼び出します。 switchTheme は、チェックボックスがチェックされている場合は 'dark' を setTheme に渡し、チェックボックスがチェックされていない場合は 'light' を渡します。 setTheme に渡された文字列は CSS テーマとして設定され、リロード後も保持される localStorage に保存されます。

keepTheme の残りの部分は、読み込み時に適切なテーマを選択することに専念しています。まず、localStorage をチェックして、ユーザーの設定がすでに設定されているかどうかを確認します。次に、prefers-color-scheme が「light」に設定されているかどうかを確認します。最後に、デフォルトではダークモードになります。ダーク モードとライト モードの両方で、setTheme を呼び出します。ダークモードの場合は、setCheckbox も呼び出します。チェックボックスはチェックされていない状態でマウントされます。スクリーン リーダーが「ダーク モード」とチェックボックスがチェックされているかどうかを読み上げます。 「ダーク モードの切り替えがチェックされました」または「ダーク モードの切り替えがオンです」などのアナウンスを取得するには、ロード時にテーマを「ダーク」に設定するときにプログラムでチェックボックスをオンにする必要があります。

スタイルの切り替え

SVG コードを Web コンポーネントに直接配置し、プログラムで塗りつぶしの色を変更できるように、かなりシンプルなデザインを描画することにしました。こうすることで、デイジーの背景色は常にテーマと一致します。次に、不透明度: 0; を使用します。チェックボックスを非表示にし、画像の中央に配置します。最後に、ホバー スタイルとフォーカス スタイルを追加します。

// /components/toggle.js

class Toggle extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `
      <label title="dark mode toggle">
        <input type="checkbox" id="theme-toggle" class="theme-switch" />
        <svg id="daisy">{SVG code removed for brevity}</svg>
      </label>
    `
    this.setAttribute("class", "toggle-component");
  }

  connectedCallback() {
    function switchTheme(e) {
      if (e.target.checked) {
        setTheme('dark');
        return;
      }

      setTheme('light');   
    };

    function setTheme(themeName) {
      localStorage.setItem('theme', themeName);
      document.documentElement.setAttribute('data-theme', themeName);
    };

    function setCheckBox(toggleSwitch, theme) {
      toggleSwitch.checked = theme === 'dark' ? true : false;
    }

    function keepTheme() {
      const toggleSwitch = document.querySelector('#theme-toggle');
      toggleSwitch.addEventListener('change', switchTheme, false);
      const theme = localStorage.getItem('theme');
      if (theme) {
        setTheme(theme);
        setCheckBox(toggleSwitch, theme);
        return;
      };

      const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)');
      if (prefersLightTheme.matches) {
        setTheme('light');
        return;
      };

      setTheme('dark');
      setCheckBox(toggleSwitch, 'dark');
    };

    document.addEventListener("DOMContentLoaded", keepTheme);    
  }
}

customElements.define("toggle-component", Toggle);

Toggle Web コンポーネントの使用

必要なのは、スタイルシートとコンポーネント スクリプトを にインポートすることだけです。 HTML ページの。次に、 を呼び出すことができます。ページ内のどこでも。

/* /styles/styles.css */

[data-theme="light"] {
  --toggle-background: #242D54;
}

[data-theme="dark"] {
  --toggle-background: #282e53;
}

#daisy path {
  fill: var(--toggle-background);
}

.theme-switch {
  position: relative;
  bottom: 30px;
  left: 55px;
  width: 1em;
  height: 1em;
  opacity: 0;
}

.theme-switch:focus + #daisy path,
.theme-switch:hover + #daisy path {
  fill: white;
}

.theme-switch:focus + #daisy {
  outline: 3px solid white;
  outline-offset: 5px;
}

結論

ダーク モードの切り替えを Web コンポーネントでも React と同じように機能させるのは楽しかったです。これは私のデジタル ガーデンでライブで見ることができ、完全なコードは GitHub リポジトリで見ることができます。

以上がHTML Web コンポーネントのダーク モードの切り替えの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。