윈도우(맥OS)나 모바일 다크모드일때 자동으로 감지 후 dark-style.css를 호출하는 방법입니다.
JAVASCRIPT
위처럼 다크모드일때 웹페이지에서 dark-style.css를 호출하기위해 javascrpt에 아래 코드를 삽입합니다.
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// 다크 모드이므로 dark.css를 호출합니다.
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dark.css';
document.head.appendChild(link);
}
HTML
html을 보시면 아래와 같은 형태입니다.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<script>
// 윈도우 다크테마를 감지하여 다크 CSS 파일을 동적으로 불러옴
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
const darkModeStylesheet = document.createElement('link');
darkModeStylesheet.rel = 'stylesheet';
darkModeStylesheet.href = 'dark-styles.css';
document.head.appendChild(darkModeStylesheet);
}
</script>
</head>
<body>
<!-- 내용 -->
</body>
</html>
CSS
그리고 dark-style.css 를 만드신후 아래와 같은 형태로 작성합니다.
/* 다크 모드 변수 */
:root {
--bg-color: #222;
--text-color: #fff;
}
/* 다크 모드 스타일 */
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--text-color);
}
/* 밝은 모드 스타일 */
@media (prefers-color-scheme: light) {
:root {
--bg-color: #fff;
--text-color: #222;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--text-color);
}
}
변수형태로 style을 만드시는게 운영할때 효과적입니다.
위에 방식은 다크모드일때 자동으로 감지해서 dark-style.css을 부르는 방법이지만, 토글형태로 만드실려면 다르게 구현해야합니다.
버튼 클릭시 토글형태로 구현하기
HTML 코드에 다크 모드를 활성화/비활성화할 토글 버튼을 추가합니다.
<button id="dark-mode-toggle">다크 모드</button>
토글형태 JAVASCRIPT
const darkModeToggle = document.getElementById('dark-mode-toggle');
let isDarkMode = false;
darkModeToggle.addEventListener('click', () => {
if (isDarkMode) {
// 밝은 모드로 전환합니다.
const link = document.querySelector('link[href="dark.css"]');
link.parentNode.removeChild(link);
isDarkMode = false;
} else {
// 다크 모드로 전환합니다.
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dark.css';
document.head.appendChild(link);
isDarkMode = true;
}
});
위 코드에서는 document.getElementById() 메서드를 사용하여 dark-mode-toggle ID를 가진 토글 버튼을 선택합니다. 이후, addEventListener() 메서드를 사용하여 버튼에 클릭 이벤트를 추가합니다.
클릭 이벤트가 발생하면, isDarkMode 변수를 사용하여 현재 다크 모드인지 밝은 모드인지 확인합니다. querySelector() 메서드를 사용하여 현재 로드된 다크 모드용 <link> 요소를 선택하고, removeChild() 메서드를 사용하여 제거하여 밝은 모드로 전환합니다.
만약, 밝은 모드일 경우에는 createElement() 메서드를 사용하여 새로운 <link> 요소를 생성하고, href 속성을 dark.css 파일의 경로로 설정하여 head 요소에 추가하여 다크 모드로 전환합니다.
위 코드를 실행하면, 버튼을 클릭할 때마다 다크 모드와 밝은 모드가 번갈아가며 전환됩니다.
