[JavaScript] 자바스크립트 다크모드, 화이트모드 토글 버튼 만들기

🌐WEB

[JavaScript] 자바스크립트 다크모드, 화이트모드 토글 버튼 만들기

Cocoon_ 2021. 4. 13. 06:59

곧 시작할 프로젝트들에서 필요한 주간, 야간모드 기능을 미리 공부해봤습니다. 먼저 input 태그를 통해 버튼을 만들고 onclick의 속성 값으로 자바스크립트 function을 만들어서 버튼을 클릭할 때마다 버튼의 글자가 바뀌고 배경과 글자색이 이 바뀌는 것을 구현해봤습니다.

<day_night.html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>day_night</title>
    <script>
        // 링크 색 바꾸기
        function LinkSetColor(color){
            var alist = document.querySelectorAll('a');
            for(var i = 0; i < alist.length; i++)
                alist[i].style.color = color;
        }

        // 바디 글자색 바꾸기
        function BodySetColor(color){
            document.querySelector('body').style.color = color;
        }

        // 바디 배경색 바꾸기
        function BodySetBackgroundColor(color){
            document.querySelector('body').style.backgroundColor = color;
        }

        // 주간, 야간모드
        function day_night_handler(self) {
            var target = document.querySelector('body');
            if (self.value == 'day') {
                BodySetBackgroundColor('RGB(26,36,54)');
                BodySetColor('white');
                LinkSetColor('powderblue')
                self.value = 'night';
            }
            else {
                BodySetBackgroundColor('white');
                BodySetColor('black');
                LinkSetColor('blue')
                self.value = 'day';
            }
        }
    </script>
</head>

<body>
    <h1>TEST</h1>
    <input type="button" value="day" onclick="day_night_handler(this)">
<br><br>
    <li><a href="https://cocoon1787.tistory.com">BLOG</a></li>
    <ol>
        <li><a href="https://naver.com">NAVER</a></li>
        <li><a href="https://google.com">GOOGLE</a></li>
        <li><a href="https://yotube.com">YOUTUBE</a></li>
    </ol>

    <article>
        Naver (Hangul: 네이버) is a South Korean online platform operated by Naver Corporation. It debuted in 1999 as the first web portal in South Korea to develop and use its own search engine. It was also the world's first operator to introduce the comprehensive search feature, which compiles search results from various categories and presents them in a single page. Naver has since added a multitude of new services ranging from basic features such as e-mail and news to the world's first online Q&A platform Knowledge iN.
        <br><br>
        As of September 2017, the search engine handled 74.7% of all web searches in South Korea and had 42 million enrolled users. More than 25 million Koreans have Naver as the start page on their default browser and the mobile application has 28 million daily visitors. Naver is also frequently referred to as 'the Google of South Korea'
    </article>
</body>

</html>

<Code explanation>

// 링크 색 바꾸기
function LinkSetColor(color){
    var alist = document.querySelectorAll('a');
    for(var i = 0; i < alist.length; i++)
        alist[i].style.color = color;
}

color라는 파라미터를 받아와서 모든 링크들의 글자 색을 color로 바꾸는 함수입니다. 모든 a태그를 가져오기 위해 querySelectorAll 메서드를 사용하였습니다.

// 바디 글자색 바꾸기
function BodySetColor(color){
    document.querySelector('body').style.color = color;
}

// 바디 배경색 바꾸기
function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor = color;
}

body태그의 style중 글자색(color)과 배경색(backgroundColor)을 바꾸는 함수입니다.

// 주간, 야간모드
function day_night_handler(self) {
    var target = document.querySelector('body');
    if (self.value == 'day') {
        BodySetBackgroundColor('RGB(26,36,54)');
        BodySetColor('white');
        LinkSetColor('powderblue')
        self.value = 'night';
    }
    else {
        BodySetBackgroundColor('white');
        BodySetColor('black');
        LinkSetColor('blue')
        self.value = 'day';
    }
}

가장 중요한 부분입니다. target을 querySelector 메서드를 이용해 body로 잡고

만약 value(쉽게말해 버튼에 적힌 글자) 값이 'day'라면

버튼의 값을 'night'로 변경
배경색 어둡게
글자색 white
링크색 powder blue

그렇지 않고 value값이 'night'라면

버튼의 값을 'day'로 변경
배경색 밝게
글자색 black
링크색 blue

로 if문을 작성하였습니다.

저작자표시 비영리