여러분, 대부분의 웹사이트에서 다크 모드 옵션을 보셨을 것입니다. 아직 보지 못하셨다면 제 포트폴리오 웹사이트https://iamharsh.design/를 살펴보십시오. 이제 당신이 이미 그것을 했다면 당신은 많은 일 없이 당신의 웹사이트에서 그것을 구현하는 것을 생각할 자격이 있다. 당신이 해야 할 일은 당신이 좋아하는 텍스트 편집기에서 코드를 열고 제 단계를 따르기만 하면 됩니다.

먼저 테마 전환기 버튼을 추가하기 위해 HTML 똥을 작성하여 사용자가 웹 사이트의 테마를 변경하기 위해 클릭할 위치를 볼 수 있도록 합니다. 그러면 HTML 파일을 열고 다음 코드를 추가할 수 있습니다.

<div class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="fas fa-moon moonboi fa-2x"></div>
  </label>
  </div>

여기에 우리는 fontawesome 라이브러리를 사용하여 달 아이콘을 추가했습니다. 무료로 사용할 수 있으며 달 대신 사용하려는 항목을 선택하여 테마 전환기로 사용할 수 있습니다.

이제 뼈대일 뿐이라 못생겼을 수도 있습니다. CSS 파일을 열고 다음 코드를 추가하세요. 선택사항입니다🖖(아닙니다)

:root {
    --font-color: #424242;
    --bg-color: #fff;
}

[data-theme="dark"] {
    --font-color: #fff;
    --bg-color: #161625;
}

/*slider switch css */

  .theme-switch {
    display: inline-block;
    height: 34px;
    top:2rem;
    position: relative;
    width: 60px;
  }

  .theme-switch input {
    display:none;
  }

  .moonboi{font-size: 1rem;transition: .4s;}
  .moonboi::before{transition: .4s;}

여기 위의 CSS 똥에서 우리는 색상 변수의 두 가지 클래스를 만들었습니다. 하나는 밝은 모드용이고 다른 하나는 어두운 모드용입니다. 이제 이것을 추가한 후 필요한 곳에 색상 코드 대신 변수 이름을 추가하기만 하면 됩니다. 예를 들어 텍스트에 색상을 추가해야 하는 경우 다음과 같이 사용할 수 있습니다 color: var(--font-color);

따라서 사용자의 선택에 따라 테마 전환 구현의 주요 부분이 제공되므로 이를 달성하기 위해 자바스크립트 코드에 다음 줄을 추가하기만 하면 됩니다.

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

위에 작성된 엉뚱한 코드를 코드에 병합한 후 웹사이트를 테스트할 수 있으며 테스트하기 위해 달 아이콘이 표시됩니다. 클릭하면 전체 웹사이트의 테마가 아름다운 전환으로 변경되는 것을 볼 수 있습니다.

가난한 자의 다크 모드

나처럼 게으른 사람이라면 css에 두 줄만 추가하면 다크 모드로 전환할 수 있습니다.

@media (prefers-color-scheme: light) {
    body {
              background:#fff;
          color: #424242;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #161625;
                color:#fff;
    }
}

이제 가난한 사람의 어두운 모드 방법을 사용하는 경우 이것을 CSS에 추가하고 어떤 요소에도 색상이나 배경색 속성을 지정하지 마십시오. 그렇지 않으면 이 방법이 작동하지 않습니다. 그렇지 않으면 선택은 귀하의 것입니다.

요점으로 돌아가기

거의 다 됐으니 지금 떠나야 합니다. 웹사이트에 추가하는 데 문제가 있는 경우 댓글을 남기거나 저와 채팅을 원하시면 언제든지 인스타그램에서 DM을 보내주세요. 할 일이 없습니다. :).