웹 앱에 어두운/밝은 테마를 구현하는 방법
- 王林원래의
- 2024-07-19 14:22:08902검색
웹사이트에서 어두운 테마와 밝은 테마 사이를 오가며 '내 사이트도 그렇게 했으면 좋겠다'고 생각한 적이 있나요? 이제 그럴 수 있습니다. 이 기사에서는 HTML, CSS 및 JavaScript를 사용하여 웹 프로젝트에서 다크 모드와 라이트 모드를 구현하여 사용자에게 최고의 시각적 경험을 제공하는 방법을 보여 드리겠습니다.
전제 조건: 이 튜토리얼을 이해하려면 HTML과 CSS에 대한 기본적인 이해가 필요합니다.
어두운/밝은 테마 구현
웹사이트에서 다크 모드/라이트 모드를 설정하는 주요 구성 요소는 다음과 같습니다.
웹페이지
테마 전환 버튼
변경할 테마나 색상
테마와 버튼 텍스트를 전환하는 논리.
웹페이지
프로젝트 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Tour App</title>
</head>
<body>
<div class="hero-sec">
<div class="col1">
<h1>Everyday Is a Journey</h1>
<p>Visit any Location Virtually, Anytime, Anywhere</p>
<button>Tour</button>
</div>
<div class="col2">
<img src="img.jpg" alt="landscape" width="560px">
</div>
</div>
</body>
</html>
일반 웹페이지 출력
토글 버튼
테마 토글 버튼을 추가하는 것이 중요합니다. 밝은 모드에서 어두운 모드로 또는 그 반대로 색상 변경을 실행하는 버튼입니다.
<button id="toggle-button">Dark mode</button>
밝음/어두움 모드 테마
여기에는 두 가지 테마나 색상이 관련되어 있기 때문에 중요한 단계입니다. 몇 줄의 코드로 웹 페이지에 다양한 스타일을 추가할 수 있는 방법이 필요합니다. 테마 지정을 위해 CSS 변수를 사용할 것입니다. 처음 접하셨다면 CSS 변수에 대한 제 기사를 읽어보시기 바랍니다.
1단계:
밝은 테마 스타일 선언
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
2단계:
어두운 테마 클래스 선언
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
// This is the class that will be added onclick of the button
참고: 변수 이름은 동일해야 합니다.
이는 변수 없이 body 요소만 사용하여 수행할 수 있습니다. 그러나 배경색을 변경하는 것 이상의 작업이 필요한 경우가 많기 때문에 CSS 변수를 사용하는 것이 좋습니다. 일부 웹 앱 테마에는 텍스트 색상, 테두리 색상, 그림자 등을 변경해야 합니다. 따라서 변수를 사용하면 특히 대규모 애플리케이션에서 모든 요소를 완전히 제어할 수 있습니다.
웹페이지 스타일을 완성해 보겠습니다. CSS가 HTML 파일에 연결되어 있는지 확인하세요.
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
body{
background: var(--bg);
color: var(--color);
font-family: monospace
}
.hero-sec{
display: flex;
justify-content: space-evenly;
color: var(--color);
margin-top: 48px;
}
.col1{
margin-top: 6rem;
height: 40%;
}
h1{
font-size: 2.5rem;
}
p{
font-size: 1.3rem;
}
button{
padding: 1rem 2rem;
background-color: #3f51b5;
color: #ffffff;
border: none;
cursor: pointer;
}
.hero-sec button{
font-size: 1.3rem;
}
출력
테마 전환의 논리
사용자가 토글 버튼을 클릭하면 두 가지 일이 발생할 것으로 예상됩니다.
웹사이트의 테마나 색상 모드를 변경해야 합니다.
버튼의 텍스트가 변경되어야 합니다.
테마를 변경하려면
DOM(Document Object Model)을 조작하여 웹페이지의 버튼과 본문을 가져옵니다.
body 요소(CSS에서 이미 선언한)에 "dark" 클래스를 추가하는 함수를 선언합니다.
사용자가 어둡게/밝게 모드 버튼을 클릭하면 함수를 호출합니다. JS가 HTML에 연결되어 있는지 확인하세요.
const toggleBtn = document.getElementById("toggle-button")
const body = document.body
function toggleTheme() {
body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
텍스트를 변경하려면
ToggleTheme 함수에 다른 코드 블록을 추가합니다. 이 코드는 단순히 본문에 "dark" 클래스가 포함된 경우 텍스트를 "밝은 모드"로 전환하거나 그 반대로 전환한다는 의미입니다.
if (body.classList.contains("dark")) {
toggleBtn.textContent = "Light Mode";
} else {
toggleBtn.textContent = "Dark Mode";
}
더 깔끔한 코드를 위해 한 줄로 작성할 수 있습니다.
toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
예, 이제 테마를 전환할 수 있습니다. 멋지죠? 전체 데모는 첨부된 영상을 확인하세요.
결론적으로
이 튜토리얼에 설명된 단계를 따르면 사용자가 선호하는 테마를 선택할 수 있는 유연성을 제공하여 웹 앱을 더욱 매력적이고 접근 가능하게 만들 수 있습니다.
제 기사가 마음에 드셨다면 제 작업을 지원하기 위해 커피를 사주세요
프로그레시브 웹 앱, 웹의 가장 내부 작업, CSS 변수, 프런트엔드 개발을 위한 초보자 가이드 등에 대한 다른 기사를 읽어보세요.
더 많은 웹 개발 및 기술 관련 기사를 보려면 좋아요, 댓글, 팔로우를 눌러주세요. 즐거운 코딩하세요!!!
위 내용은 웹 앱에 어두운/밝은 테마를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!