최근의 웹 트렌드는 다양한 컬러 테마를 제공하는 것 입니다.
사용자가 원하는 컬러 테마를 선택할 수 있게 되었는데 그중에서 오늘은 다크 모드를 알아보겠습니다.
다크 모드는 화면의 눈부심을 방지해주어서 사용자의 눈을 편안하게 만들어 웹사이트에 머무르는 시간을 길게 늘릴 수 있다는 장점이 있습니다.
간단하고 쉬운 예제를 통해 다크 모드를 설명해보려고 합니다.
1. 준비물: 기본적인 웹사이트
저는 오늘 아래와 같은 기본적인 테스트 화면을 준비해보았습니다.
헤드라인과 카드로 구성되어있는 심플한 화면입니다.
2. Theme 변수 설정
:root {
--body-bg-color: #fafafa;
--text-color: #111;
--color-text: #111;
--btn-bg-color: #111;
--btn-text-color: #fff;
--card-bg-color: #fff;
--border-color: #111;
--ico-bg-color: #d5f2ec;
}루트에 기본적으로 사용할 색상들에 대해 사용자 지정 속성들을 입력해줍니다.
여기서 입력한 속성들은 스타일시트 내에서 여러번 재사용 가능한 변수로서 역할을 합니다.
body {
background-color: var(--body-bg-color);
}위와 같이 css를 적용할 때 값에 var()함수에 위에서 선언한 변수를 넣어주면 해당 변수에 해당하는 값이 들어가게 됩니다. 즉, background-color: #fafafa;와 같습니다.
:root[theme="dark"] {
--body-bg-color: #2e2e2e;
--text-color: #fff;
--color-text: #0096a9;
--btn-bg-color: #0096a9;
--btn-text-color: #fff;
--card-bg-color: #3c3c3c;
--border-color: #fff;
--ico-bg-color: #2e2e2e;
}다크 모드에 해당하는 속성 선택자를 입력해주고,
내부에 다크 모드일 때 설정할 색상들로 바꾸어줍니다.
변수명은 동일하기 때문에, :root의 속성만 dark로 바꿔줄 경우 해당 색상으로 전체적으로 바뀌게 됩니다.
3. Dom의 root에 theme 속성 추가
<div class="theme-head">
<div>
<h1>CSS Theme Test</h1>
<p>Hi, This is the test for css dark theme.</p>
</div>
<button class="theme-toggle-btn">Dark Mode</button>
</div>기본 모드(라이트모드)일 때는 버튼의 내용을 다크모드로 변경하고, 클릭할 경우 루트에 dark 속성을 추가합니다.
반대로 다크모드일 경우 버튼의 내용을 라이트 모드 바꾸고 클릭할 경우 루트를 기본 설정으로 반전시키는 토글 기능을 넣어보겠습니다.
// 토글 버튼을 검색해서 themeToggleBtn 변수에 담습니다.
const themeToggleBtn = document.querySelector('.theme-toggle-btn');
// 토글 함수
const toggleTheme = (btn, theme = null) => {
const currentTheme = document.documentElement.getAttribute('theme');
// 현재 테마가 라이트 테마이거나 설정된 테마가 없을 경우
if(theme === 'light' || !currentTheme || currentTheme === 'light') {
document.documentElement.setAttribute('theme', 'dark');
btn.textContent = 'Light Mode';
} else {
// 그 외(다크모드)일 경우
document.documentElement.setAttribute('theme', 'light');
btn.textContent = 'Dark Mode';
}
};
// 토글 버튼에 클릭 이벤트가 발생할 경우 위에서 선언한 toggleTheme 이벤트가 호출되도록 등록해줍니다.
themeToggleBtn.addEventListener('click', () => toggleTheme(themeToggleBtn));자, 이제 토글 버튼을 클릭할 때마다 웹사이트의 색상이 반전되게 됩니다.
완성한 다크모드는 아래와 같습니다.
마무리
오늘은 다크모드를 적용하는 방법에 대해서 알아보았습니다.
실제로 웹사이트에 다크모드를 적용할 때도 위와 같은 원리로 적용하게 됩니다.
주의할 점은, 실제 웹사이트에서는 관리할 색상이 굉장히 많아져서 변수 관리를 어떻게 하느냐가 중요해집니다.
(비슷한 색상명은 그룹핑해서 주석을 달아준다면 관리가 좀 수월해집니다.)
또한, 컬러 테마도 동일한 원리로 적용할 수 있습니다.
각 테마명은 기획하기 나름으로 선명한 비비드 색상의 테마로 vivid theme이 있을 수 있겠고, 부드러운 색상이 주를 이루는 soft theme이 있을수도 있겠네요.
네이밍과 디자인하기 나름입니다.
다양한 테마를 만들어서 재미있는 사용자 경험을 제공해봅시다:-)
참고자료 (Reference)
본 글은 하단의 유튜브를 참고해서 작성되었습니다.
- Website Dark & Light Mode - How to Color Theme Website with CSS & Javascript / By. Before Semicolon
