CSS 필터를 활용한 다크 모드 구현 가이드
1. CSS 필터 개념
1.1 invert(100%) 필터
- 기능: 색상을 완전히 반전.
- 효과: 밝은 색은 어두운 색으로, 어두운 색은 밝은 색으로 변경.
- 예: 흰색(#FFFFFF) → 검정색(#000000)
- 예: 파란색(#0000FF) → 노란색(#FFFF00)
- 특징: 대비가 높은 요소에 효과적이나, 원본 색상과 전혀 다른 분위기로 변할 수 있음.
1.2 hue-rotate(180deg) 필터
- 기능: 색상의 색조를 180도 회전.
- 효과: 색상환의 반대쪽 색으로 변경.
- 예: 파란색 → 주황색, 빨간색 → 초록색
- 특징: invert 필터의 단점을 보완하여 자연스러운 색 전환 가능.
2. 다크 모드 구현 방법
/* 다크 모드 CSS */
.dark-mode {
filter: invert(100%) hue-rotate(180deg);
}3. 구현 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다크 모드 예제</title>
<style>
/* 기본 스타일 */
body {
transition: filter 0.3s ease;
}
/* 다크 모드 스타일 */
.dark-mode {
filter: invert(100%) hue-rotate(180deg);
}
</style>
</head>
<body>
<h1>다크 모드 예제</h1>
<p>이 페이지는 다크 모드를 지원합니다.</p>
<button id="toggle-dark-mode">다크 모드 토글</button>
<script>
const toggleButton = document.getElementById("toggle-dark-mode");
toggleButton.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
</script>
</body>
</html>4. 작동 원리
- 기본 상태에서는
.dark-mode클래스가 적용되지 않아 밝은 모드로 표시. - 버튼 클릭 시 JavaScript로
<body>에.dark-mode클래스 추가. .dark-mode클래스 적용 시 필터 효과로 색상 반전.- invert로 색상이 반전되면서 밝은 색 → 어두운 색 변환.
- hue-rotate로 색조 조정하여 보다 자연스러운 색상 연출.
- 버튼 클릭 시 클래스 제거로 밝은 모드 복귀.
5. 장단점 분석
장점
- 간편성: CSS 한 줄로 다크 모드 적용.
- 유지보수 용이: 별도의 색상 팔레트 관리 불필요.
단점
- 색상 정확도 문제: 특정 색상이 원치 않게 변환될 수 있음.
- 이미지 왜곡 가능성: 이미지 색상 반전 문제 발생.
6. 이미지 반전 방지 방법
/* 이미지 필터 해제 */
.dark-mode img {
filter: invert(100%) hue-rotate(180deg);
}- 설명: 이미지에도 반전 및 색조 회전이 적용되므로, 다시 원본 색상으로 되돌림.
7. 결론
CSS의 invert와 hue-rotate 필터를 활용하면 손쉽게 다크 모드를 구현할 수 있습니다. 간단한 코드만으로 다크 모드를 지원하면서도 사용자 경험을 개선할 수 있는 방법을 제공하므로, 유지보수 효율성을 고려한 다크 모드 구현에 적합합니다.
DevSecOps Pentest🚩