그누보드 다크모드 전환 토글 버튼 만들기

728x90

그누보드에서 다크모드와 기본모드를 토글하는 버튼을 만드는 방법에 대해 자세히 설명하겠습니다. 이 과정은 HTML, CSS, JavaScript를 활용하여 구현할 수 있습니다.

다크모드와 기본모드의 필요성

다크모드는 사용자에게 눈의 피로를 줄이고, 배터리 소모를 줄이는 등의 장점을 제공합니다. 따라서 블로그나 웹사이트에 다크모드를 추가하는 것은 사용자 경험을 향상시키는 좋은 방법입니다.

HTML 구조 만들기

먼저, 다크모드와 기본모드를 전환할 수 있는 버튼을 HTML에 추가합니다. 아래는 기본적인 HTML 코드입니다.

<button id="mode-toggle">다크모드 전환</button>

이 버튼을 클릭하면 다크모드와 기본모드가 전환됩니다.

CSS 스타일 정의하기

다음으로, 다크모드와 기본모드에 대한 CSS 스타일을 정의합니다. 아래는 예시입니다.

body {
    background-color: white; /* 기본 모드 배경색 */
    color: black; /* 기본 모드 글자색 */
    transition: background-color 0.3s, color 0.3s; /* 부드러운 전환 효과 */
}

body.dark-mode {
    background-color: black; /* 다크 모드 배경색 */
    color: white; /* 다크 모드 글자색 */
}

위의 CSS 코드는 기본 모드와 다크 모드의 배경색과 글자색을 정의합니다. transition 속성을 사용하여 모드 전환 시 부드러운 효과를 줍니다.

JavaScript로 모드 전환 기능 구현하기

이제 JavaScript를 사용하여 버튼 클릭 시 모드를 전환하는 기능을 추가합니다. 아래는 JavaScript 코드입니다.

const toggleButton = document.getElementById('mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode'); // 다크모드 클래스 토글
    toggleButton.textContent = body.classList.contains('dark-mode') ? '기본모드 전환' : '다크모드 전환'; // 버튼 텍스트 변경
});

위의 JavaScript 코드는 버튼 클릭 시 dark-mode 클래스를 토글하고, 버튼의 텍스트를 변경합니다.

전체 코드 통합하기

이제 모든 코드를 통합하여 완전한 예제를 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다크모드 토글 예제</title>
    <style>
        body {
            background-color: white; /* 기본 모드 배경색 */
            color: black; /* 기본 모드 글자색 */
            transition: background-color 0.3s, color 0.3s; /* 부드러운 전환 효과 */
        }

        body.dark-mode {
            background-color: black; /* 다크 모드 배경색 */
            color: white; /* 다크 모드 글자색 */
        }
    </style>
</head>
<body>
    <button id="mode-toggle">다크모드 전환</button>

    <script>
        const toggleButton = document.getElementById('mode-toggle');
        const body = document.body;

        toggleButton.addEventListener('click', () => {
            body.classList.toggle('dark-mode'); // 다크모드 클래스 토글
            toggleButton.textContent = body.classList.contains('dark-mode') ? '기본모드 전환' : '다크모드 전환'; // 버튼 텍스트 변경
        });
    </script>
</body>
</html>

결론

위의 방법을 통해 그누보드에서 다크모드와 기본모드를 토글할 수 있는 버튼을 쉽게 만들 수 있습니다. 이 기능은 사용자에게 더 나은 경험을 제공하며, 웹사이트의 접근성을 높이는 데 기여합니다. 추가적인 질문이 있으시면 언제든지 문의해 주세요