자신의 웹 사이트에서 다크 모드를 구현하는 방법은 무엇입니까?

CSS 및 JavaScript를 사용하여 웹 사이트에서 다크 모드를 구현하는 방법에는 여러 가지가 있습니다. 그리고 그것을 하는 방법에 대한 몇 가지 아이디어를 보여줄 것입니다.

1. CSS에서 미디어 쿼리 사용하기 💻

사용자의 디바이스 테마를 기반으로 미디어 쿼리로 다크 모드 테마를 설정할 수 있습니다. 이것은 나에게 나쁘지는 않지만 사용자가 테마를 제어할 수 없게 합니다. 다음은 예입니다.

body {
    background: #FFFFFF;
    color: #000000;
}

@media (prefers-color-scheme: dark) {
  body {
     background: #000000;
     color: #FFFFFF;
  }
} // basically, it will set the theme to dark mode if my device is set on a dark mode theme

2. JavaScript를 사용하여 브라우저에 쿠키로 저장 🍪

이것은 내 웹 사이트에 사용하는 것입니다! 브라우저의 쿠키와 함께 사용자의 기본 설정을 저장하는 CSS 및 JavaScript를 사용하여 작동하는 다크 모드 토글을 찾았습니다. 따라서 다음에 사용자가 사이트를 다시 방문하면 사용자의 기본 설정에 따라 테마가 로드됩니다.

다음은 .lightmode 클래스에 대한 코드이므로 사용자가 토글을 클릭하면 스크립트가 본문에 이 클래스를 추가합니다.

body {
    background: #FFFFFF;
    color: #000000;
}

.lightmode {
    background: #000000;
    color: #FFFFFF;
}

이제 다크 모드 토글용 스크립트

function themeToggle() {
    var SetTheme = document.body;
    SetTheme.classList.toggle("dark") 
    // it will set the theme to dark mode when the user clicks on a button

    var theme;
    if (SetTheme.classList.contains("dark")) {
        theme = "DARK";
    } else {
        theme = "LIGHT";
    }
    localStorage.setItem("PageTheme", JSON.stringify(theme)); 
    // now this is how this script will save a cookie for the user's theme preference
}

setInterval(() => {
    let GetTheme = JSON.parse(localStorage.getItem("PageTheme"));
    if (GetTheme === "DARK") {
        document.body.classList = "dark";
    } else {
        document.body.classList = "";
    }
}); // it will find here if the user set the theme to default or dark mode

다음은 최종 결과입니다.


P.S: Codepen에서는 작동하지 않습니다. 쿠키가 작동하는지 확인하려면 내 웹사이트lanceross.xyz를 방문하세요. 불과 며칠 전에 해당 기능을 내 사이트에 추가했기 때문입니다.

이상입니다. 제 블로그를 읽어주셔서 감사합니다!