[JS] 다크모드, 라이트모드

 
스크립트

<script>
	window.onload = function(){
        /* localStorage에서 저장된 모드를 불러옴 */
        const currentMode = localStorage.getItem('mode') || 'light';
        const modeText = document.getElementById('modeText');
        if (currentMode === 'dark') {
            document.body.classList.add('dark-mode');
            modeText.textContent = '라이트모드';
        }
        
        /* 다크모드 토글 */
        document.getElementById('modeToggle').addEventListener('click', function() {
	        document.body.classList.toggle('dark-mode');
	        const newMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
	        localStorage.setItem('mode', newMode);
	        modeText.textContent = newMode === 'dark' ? '라이트모드' : '다크모드';
    	});
    }
</script>

 
 
 
css

/* 다크모드 스타일 */
body.dark-mode {
    background-color: #1e1e1e;
    color: #ffffff;
}

body.dark-mode header,
body.dark-mode nav,
body.dark-mode section {
    background-color: #1e1e1e;
}

body.dark-mode .listDiv {
    background-color: #333333;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

body.dark-mode a {
    color: #ffffff;
}

body.dark-mode input {
    background-color: #333333;
    color: #ffffff;
}

body.dark-mode .input-container input {
    background-color: white;
    color: #333333; /* 텍스트 색상 유지 */
}

/* 다크모드에서 이미지 색상 변경 */
body.dark-mode img {
    filter: brightness(0) invert(1); /* 색상 반전 */
}

/* 다크 모드일 때 아이콘 색상 변경 */
body.dark-mode #searchIcon, 
body.dark-mode #clearBtn,
body.dark-mode #pw_tag,
body.dark-mode #pwc_tag {
    color: #333333; /* 다크 모드에서의 아이콘 색상 */
}

body.dark-mode nav li div:hover{
    background-color: #666666;  
    border: 2px solid #666666;  
}

body.dark-mode .userHeader_login .icon.round {
    border-radius: 50%;
    background-color: #666666;
}

body.dark-mode .hover-menu{
	background-color: white;
	color: #333333;
}

body.dark-mode .login-hover-menu{
	background-color: white;
	color: #333333;
}

 
 
html

<div class="menu-item" id="modeToggle">
    <a href="#">
        <img src="https://img.icons8.com/?size=100&id=101342&format=png&color=767676" alt="다크모드 전환">
    </a>
    <div class="hover-menu">
        <p id="modeText">다크모드</p>
    </div>
</div>

 
 

const currentMode = localStorage.getItem('mode') || 'light';

• localStorage.getItem('mode'): localStorage는 사용자의 브라우저에 데이터를 저장할 수 있는 웹 API입니다. localStorage에서 'mode'라는 키에 저장된 값을 가져옵니다. 만약 'mode' 값이 존재하면 그 값을 반환합니다.
• || 'light': 만약 localStorage.getItem('mode')의 반환값이 null 또는 undefined라면(즉, 'mode' 키에 해당하는 값이 없거나 설정되지 않은 경우), 'light'라는 기본값을 반환하게 됩니다. ||는 논리 연산자로, 왼쪽 값이 falsey(거짓으로 평가되는 값: null, undefined, false, 0, 빈 문자열 등)일 경우 오른쪽 값을 사용합니다.
• 사용자가 이전에 다크 모드나 라이트 모드를 설정했는지 확인하고, 설정이 없으면 라이트 모드가 기본값입니다.

 
 

const modeText = document.getElementById('modeText');

• HTML에서 id가 'modeText'인 요소를 가져와 변수에 저장합니다. 이 요소는 현재 모드를 표시하는 텍스트를 업데이트하는 데 사용됩니다.

 

if (currentMode === 'dark') {
    document.body.classList.add('dark-mode');
    modeText.textContent = '라이트모드';
}

 

• 만약 currentMode가 'dark'라면, 즉 현재 모드가 다크 모드로 저장되어 있으면, document.body에 'dark-mode' 클래스를 추가하여 다크 모드 스타일을 적용합니다.
• 그 다음, modeText.textContent = '라이트모드'; 부분에서 모드 전환 버튼의 텍스트를 '라이트모드'로 바꿉니다. 현재 다크 모드 상태에서 클릭하면 라이트 모드로 전환될 수 있도록 버튼 안내를 변경하는 것입니다.

 

document.getElementById('modeToggle').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
    const newMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
    localStorage.setItem('mode', newMode);
    modeText.textContent = newMode === 'dark' ? '라이트모드' : '다크모드';
});

 

• id가 'modeToggle'인 요소에 클릭 이벤트 리스너를 추가합니다. 이 버튼을 클릭할 때마다 다크 모드와 라이트 모드를 전환하는 기능을 구현합니다.
• document.body.classList.toggle('dark-mode');
• 버튼을 클릭할 때마다 document.body에 'dark-mode' 클래스를 추가하거나 제거하여 다크 모드와 라이트 모드를 토글합니다.
• const newMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
• 페이지의 현재 모드가 다크 모드인지 확인한 후, 다크 모드일 경우 'dark', 라이트 모드일 경우 'light' 값을 변수에 저장합니다.
• localStorage.setItem('mode', newMode);
• 새로운 모드를 localStorage에 저장합니다. 이렇게 하면 사용자가 다음에 페이지를 방문할 때도 이전에 설정한 모드가 유지됩니다.
• modeText.textContent = newMode === 'dark' ? '라이트모드' : '다크모드';
• 현재 모드에 따라 모드 전환 버튼의 텍스트를 변경합니다. 다크 모드일 때는 버튼이 라이트 모드로 전환할 수 있도록 '라이트모드' 텍스트가 표시되고, 라이트 모드일 때는 '다크모드'로 전환할 수 있도록 텍스트가 표시됩니다.

 

---

웹 페이지가 로드될 때 localStorage에 저장된 모드를 적용하고, 버튼을 클릭할 때마다 다크 모드와 라이트 모드를 전환할 수 있게 해줍니다.
사용자의 모드 선택을 localStorage에 저장하여 페이지를 새로고침하거나 다시 방문해도 설정이 유지되도록 합니다.