??? ??? ???? ? ??? ?? ?? ??? ???? ?? ?????. 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 ??? ????? ?? ?? ??? ?????!