CSS로 만드는 간단한 다크 모드 - 다크 모드 스타일링 기법

DevMaster!! 2024. 8. 10. 23:15

2024. 8. 10. 23:15

다크 모드는 사용자 인터페이스에서 어두운 색상 테마를 사용하는 것으로, 눈의 피로를 줄이고 배터리 수명을 연장하는 데 도움이 됩니다. CSS만으로 간단하게 다크 모드를 구현할 수 있으며, 이 글에서는 다크 모드를 적용하는 기본적인 방법과 스타일링 기법을 소개하겠습니다.

1. 다크 모드의 기본 개념

다크 모드는 기본적으로 밝은 색상 테마를 어두운 색상 테마로 전환하는 것을 의미합니다. 이를 위해 body 또는 최상위 요소에 다크 모드를 위한 클래스를 추가하고, 이 클래스에 따라 스타일을 전환하는 방식으로 구현할 수 있습니다.

2. CSS 변수(CSS Custom Properties)를 사용한 다크 모드 설정

CSS 변수를 사용하면 다크 모드와 라이트 모드를 쉽게 전환할 수 있습니다. 변수로 색상을 정의하고, 다크 모드 클래스가 적용되면 해당 변수를 업데이트하는 방식으로 스타일을 변경합니다.

1. 기본 스타일 정의

먼저, CSS 변수로 기본 색상 테마를 정의합니다.

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --link-color: #1a73e8;
    --button-bg-color: #4CAF50;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

설명:

:root: 전역적으로 사용할 CSS 변수를 정의합니다. 기본 색상은 밝은 테마에 맞게 설정합니다.
body, a, button: 각 요소에 CSS 변수를 사용하여 색상을 적용합니다. 이는 다크 모드에서 색상을 쉽게 변경할 수 있도록 합니다.

2. 다크 모드 스타일 추가

이제, 다크 모드 스타일을 정의하고, 다크 모드 클래스가 적용되었을 때 CSS 변수를 업데이트합니다.

body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --link-color: #8ab4f8;
    --button-bg-color: #333333;
    --button-text-color: #e0e0e0;
}

설명:

body.dark-mode: dark-mode 클래스가 body에 적용되면, CSS 변수를 다크 모드에 맞게 업데이트합니다.
어두운 배경색, 밝은 텍스트 색상, 버튼 및 링크 색상 등을 다크 모드에 맞게 설정합니다.

3. 다크 모드 전환 버튼 추가

JavaScript를 사용하여 다크 모드를 활성화하거나 비활성화할 수 있는 버튼을 추가합니다. 이 버튼을 통해 사용자는 다크 모드를 켜고 끌 수 있습니다.

HTML 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다크 모드 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button id="dark-mode-toggle">다크 모드 전환</button>

    <h1>다크 모드 적용 예제</h1>
    <p>이 페이지는 다크 모드와 라이트 모드 간에 전환할 수 있습니다.</p>
    <a href="#">링크 예제</a>

    <script>
        const toggleButton = document.getElementById('dark-mode-toggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
        });
    </script>
</body>
</html>

설명:

#dark-mode-toggle: 다크 모드를 전환하는 버튼입니다. 이 버튼을 클릭하면 body에 dark-mode 클래스가 추가되거나 제거됩니다.
JavaScript: 버튼 클릭 시 dark-mode 클래스를 body 요소에 토글(toggle)합니다. 이로 인해 다크 모드와 라이트 모드 간에 전환이 이루어집니다.

4. 운영체제 다크 모드 감지 (Optional)

사용자의 운영체제가 다크 모드인 경우 이를 감지하여 자동으로 다크 모드를 적용할 수 있습니다. CSS의 미디어 쿼리 기능을 활용해 이를 구현할 수 있습니다.

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #e0e0e0;
        --link-color: #8ab4f8;
        --button-bg-color: #333333;
        --button-text-color: #e0e0e0;
    }
}

설명:

@media (prefers-color-scheme: dark): 사용자의 운영체제가 다크 모드로 설정된 경우, 자동으로 다크 모드 색상 변수를 적용합니다.

결론

다크 모드는 사용자 경험을 향상시키는 중요한 기능 중 하나로, CSS와 JavaScript를 사용해 쉽게 구현할 수 있습니다. CSS 변수를 활용해 라이트 모드와 다크 모드를 간단하게 전환할 수 있으며, 사용자 인터페이스를 시각적으로 일관성 있게 유지할 수 있습니다.

이 글에서 소개한 다크 모드 스타일링 기법을 바탕으로, 여러분의 웹사이트에 다크 모드를 추가해보세요. 이를 통해 사용자에게 더 나은 경험을 제공할 수 있으며, 현대적인 웹 디자인 트렌드에 발맞출 수 있습니다.

'CSS' 카테고리의 다른 글

CSS로 배너 광고 디자인하기 - 배너 광고를 위한 간단한 레이아웃 (0)	2024.08.10
CSS로 폼(Form) 요소 스타일링 - 입력란, 버튼, 체크박스 등을 꾸미는 방법 (0)	2024.08.10
CSS 변수(CSS Custom Properties) 사용법 - 반복 사용을 줄이는 변수 설정법 (0)	2024.08.10
CSS로 만드는 이미지 갤러리 - 반응형 이미지 갤러리 디자인 (0)	2024.08.10
CSS로 테이블 스타일링 - 테이블의 셀, 헤더, 보더 등을 꾸미는 방법 (0)	2024.08.10

CodeCrafted