HTML 웹 구성 요소의 다크 모드 토글

디지털 정원을 디자인할 때 귀여운 다크 모드 토글을 원한다는 것을 알았습니다. SVG를 그린 후에는 React의 다크 모드 토글과 동일한 기능을 갖춘 웹 구성 요소를 만들기 시작했습니다. 여기에는 사이트 접근성을 감사하면서 배운 모든 내용이 포함됩니다.

테마를 변경하는 것 외에도 토글은 사용자가 선호하는 색상 구성표 선택을 고려하고 다시 로드할 때에도 사용자의 기본 설정을 유지해야 합니다. 접근성을 위해 토글의 스크린 리더 알림은 의미가 있어야 합니다(예: '어두운 모드 토글 켜기'). 텍스트가 포함된 체크박스 대신 SVG를 표시하고 싶기 때문에 포커스 및 호버 스타일과 호버 시 표시되는 라벨을 추가해야 합니다.

웹 구성 요소 전환

먼저 HTML 요소를 생성하는 Toggle 클래스가 필요합니다. Custom Element API를 사용하여 이 수업을 사용합니다.

클래스 생성자를 사용하여 의 innerHTML을 설정했습니다. <라벨> SVG를 자식으로 사용합니다. 라벨에는 제목 속성이 있어 사용자가 해당 라벨이나 위로 마우스를 가져가면 눈에 띄는 '어두운 모드 토글' 라벨이 표시됩니다. 확인란은 의 하위 항목이므로 그 반대도 마찬가지입니다. 또한 title 속성은 사용자가 이 구성요소와 상호작용할 때 화면 판독기가 "어두운 모드 전환"을 알리도록 합니다.

HTML이 준비되면 클래스에 linkedCallback 함수를 추가합니다. 맞춤 요소 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 코드를 웹 구성 요소에 직접 넣고 프로그래밍 방식으로 채우기 색상을 변경할 수 있도록 매우 간단한 디자인을 그리기로 결정했습니다. 이렇게 하면 데이지의 배경색이 항상 테마와 일치하게 됩니다. 다음으로 opacity: 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);

토글 웹 구성 요소 사용

해야 할 일은 스타일시트와 구성요소 스크립트를 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;
}

결론

React에서와 마찬가지로 웹 구성 요소에서도 다크 모드 토글이 작동하도록 하는 것이 즐거웠습니다. 내 디지털 정원에서 실시간으로 볼 수 있으며 GitHub 저장소에서 전체 코드를 볼 수 있습니다.

위 내용은 HTML 웹 구성 요소의 다크 모드 토글의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!