내 의견으로는 웹 사이트를 다크 모드로 만드는 가장 좋은 방법입니다.

14586 단어 htmlwebdevcssjavascript
한동안 다크 모드가 있었습니다. 앱에서 웹 사이트에 이르기까지 사람들에게 미치는 영향은 정말 컸습니다. 모든 사람들이 웹 사이트에서 다크 모드 옵션으로 전환하는 것을 좋아하는 것은 당연합니다.

이제 웹 사이트에 다크 모드를 구현하는 여러 가지 방법을 보았을 것입니다. 배경을 어둡게 하기 위해 간단한 클래스를 토글하거나 사용자의 시스템 테마에 따라 전환하는 기본 색 구성표를 사용하는지 여부. 글쎄요. 그러나 사람들은 시스템 전체 다크 모드를 지원하는 장치를 항상 가지고 있지 않을 수 있습니다. 또한 클래스를 전환하면 여러 색상이 있는 웹사이트에 도움이 되지 않을 수 있습니다. 그래서 해결책은 무엇입니까?

여기 있습니다: 실제로는 매우 간단합니다. 다크 모드를 구현하는 가장 좋은 방법은 사용자가 다크 모드 버튼을 클릭하거나 스위치를 전환할 때 전체 스타일 시트를 변경하는 것입니다.

이 방법을 사용하면 웹사이트의 완전한 어두운 버전을 자유롭게 스타일 지정할 수 있을 뿐만 아니라 그에 따라 색상을 지정하려는 여러 요소가 있는 경우에도 도움이 됩니다. 그렇지 않으면 단순히 클래스를 전환하여 달성하기 어려울 것입니다. 웹사이트에 다른 많은 색상 테마를 사용할 수도 있습니다. 그럼 어떻게 해야 할까요? 충분히 읽을 수 있습니다! 이제 코드로 들어가 보겠습니다.

예시:
다음은 HTML 파일입니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dark Mode Demo</title>
  <link rel="stylesheet" href="styles/light-mode.css" id="theme" />
</head>

<body>
  <div class="wrapper">
    <h1>Dark Mode by changing the style sheet.</h1>
    <button onclick="changeTheme()">Switch Theme</button>
  </div>
  <script src="scripts/script.js"></script>
</body>

</html>

다음은 light-mode.css 파일입니다.

* {
  font-family: "Segoe UI";
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  transition: 1s;
}

h1 {
  text-align: center;
  font-weight: 300;
  color: #4d4d4d;
  padding: 20px;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
button {
  padding: 13px 10px;
  background-color: rgb(43, 43, 43);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  outline: none;
  cursor: pointer;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}

다음은 dark-mode.css 파일입니다.

* {
  font-family: "Segoe UI";
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: rgb(29, 29, 29);
  transition: 1s;
}
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  color: #fff;
  text-align: center;
  font-weight: 200;
  padding: 20px;
}

button {
  padding: 13px 10px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 4px;
  font-size: 1em;
  outline: none;
  font-weight: 400;
  cursor: pointer;
}
button:hover {
  background: rgb(45, 50, 102);
  color: rgb(255, 255, 255);
}

마지막으로 여기에 대한 JavaScript가 있습니다.

// Function that swaps the stylesheet.
function changeTheme() {
  let theme = document.getElementById("theme");
  let lightTheme = "styles/light-mode.css";
  let darkTheme = "styles/dark-mode.css";
  // Checking what stylesheet the link tag has.
  if (theme.getAttribute("href") == lightTheme) {
    theme.href = darkTheme;
  } else {
    theme.href = lightTheme;
  }
}

위의 예에서 버튼을 클릭하면 changeTheme() 함수는 id 태그에 부여한 link로 href 속성을 사용하여 CSS 파일을 확인합니다. light-mode.css가 있으면 dark-mode.css 파일로 대체합니다. 그렇지 않으면 light-mode.css 파일로 다시 전환됩니다. 그게 다야! 이제 페이지를 다시 로드하지 않고도 웹사이트에 다크 모드를 사용할 수 있습니다. 읽어 주셔서 감사합니다. 도움이 되었기를 바랍니다. 좋은 하루 되세요!

편집: "웹사이트를 다크 모드로 전환하는 가장 좋은 방법"에서 제목을 변경했습니다. "내 생각에 웹사이트를 다크 모드로 전환하는 가장 좋은 방법"으로. 이보다 더 나은 다른 방법이 있을 수 있기 때문에 제 생각에는 이것이 최선입니다.

저장소에 대한 링크는 다음과 같습니다.


zxcodes / 웹용 다크 모드


이 예는 클릭 한 번으로 전체 스타일 시트를 변경하여 웹사이트에 어두운 모드를 구현하는 방법을 보여줍니다.





웹용 다크 모드


이 예는 클릭 한 번으로 전체 스타일 시트를 변경하여 웹사이트에 어두운 모드를 구현하는 방법을 보여줍니다.
원본 기사:


image


View on GitHub


라이브 데모 링크:
https://zxcodes.github.io/Dark-Mode-For-Web/
다른 Django 모델의 여러 필드에서 고유한 Django 객체 수량 읽어들이기
JavaScript에서 Ruby로

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage