在設(shè)計(jì)我的數(shù)字花園時(shí)，我知道我想要一個(gè)可愛的黑暗模式切換開關(guān)。繪制完 SVG 后，我開始構(gòu)建一個(gè) Web 組件，該組件具有與 React 中的暗模式切換功能相同的功能。這包括我在可訪問性審核我的網(wǎng)站時(shí)學(xué)到的所有內(nèi)容。

除了更改主題之外，切換還需要考慮用戶的首選顏色方案選擇，并在重新加載時(shí)保留用戶的偏好。為了實(shí)現(xiàn)可訪問性，切換的屏幕閱讀器公告必須有意義（例如“深色模式切換打開”）。由于我想顯示 SVG 而不是帶有文本的復(fù)選框，因此我必須添加焦點(diǎn)和懸停樣式以及懸停時(shí)顯示的標(biāo)簽。

切換 Web 組件

首先，我需要一個(gè)用于創(chuàng)建 HTML 元素的 Toggle 類。使用自定義元素 API，我將定義 使用這個(gè)類。

使用類的構(gòu)造函數(shù)，我設(shè)置了 的innerHTML到 帶有 和 SVG 作為孩子。該標(biāo)簽具有標(biāo)題屬性，如果用戶將鼠標(biāo)懸停在其上或 上，則會(huì)為我們的切換提供可見的“深色模式切換”標(biāo)簽。因?yàn)閺?fù)選框是 的子項(xiàng)，所以與 的交互是可以的。與與 交互是一樣的事情反之亦然。 title 屬性還確保屏幕閱讀器在用戶與此組件交互時(shí)宣布“深色模式切換”。

HTML 就位后，我向該類添加一個(gè)connectedCallback 函數(shù)。自定義元素 API 的這一部分定義了在組件內(nèi)使用的函數(shù)，并在組件插入 DOM 時(shí)執(zhí)行代碼。

// /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);

因?yàn)?在頁(yè)面加載之前插入到 DOM 中，唯一立即執(zhí)行的代碼會(huì)添加事件偵聽器。頁(yè)面加載后，事件偵聽器立即調(diào)用 keepTheme。首先，keepTheme 將事件偵聽器添加到 中。當(dāng)用戶與其交互時(shí)調(diào)用 switchTheme。如果選中該復(fù)選框，則 switchTheme 將“dark”傳遞給 setTheme；如果未選中，則將“l(fā)ight”傳遞給 setTheme。傳遞給 setTheme 的字符串被設(shè)置為 CSS 主題并保存在 localStorage 中，它將在重新加載后持續(xù)存在。

keepTheme 的其余部分致力于在加載時(shí)選擇正確的主題。首先，它檢查 localStorage 以查看用戶的首選項(xiàng)是否已設(shè)置。接下來，它檢查prefers-color-scheme是否設(shè)置為“l(fā)ight”。最后，它默認(rèn)為深色模式。對(duì)于深色和淺色模式，我調(diào)用 setTheme。對(duì)于深色模式，我也調(diào)用setCheckbox。該復(fù)選框以未選中狀態(tài)安裝。屏幕閱讀器將宣布“深色模式”以及是否選中該復(fù)選框。要獲得諸如“選中深色模式切換”或“打開深色模式切換”之類的公告，當(dāng)我在加載時(shí)將主題設(shè)置為“深色”時(shí)，我必須以編程方式選中該復(fù)選框。

切換樣式

我選擇繪制一個(gè)相當(dāng)簡(jiǎn)單的設(shè)計(jì)，這樣我就可以將 SVG 代碼直接放入 Web 組件中，并以編程方式更改填充顏色。這樣，雛菊的背景顏色始終與主題相匹配。接下來，我使用不透明度：0；隱藏復(fù)選框并將其放置在圖像的中間。最后，我添加了懸停和焦點(diǎn)樣式。

// /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);

使用切換 Web 組件

我需要做的就是在

/* /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;
}

以上是HTML Web 組件中的深色模式切換的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！