이번엔 다크모드 버튼을 만들어보자.
상단바의 검색버튼 옆에다 만들 것이고, 이번엔 기능만 구현하고 디자인은 다음에 하도록 하자.
상단바 태그 <header> 안에 버튼 태그를 만들자.
<button id="darkModeButton">
다크모드
</button>
해당 태그의 CSS를 추가해 버튼의 위치를 검색버튼 옆으로 위치시키자.
버튼을 만들 동안 배경색을 넣어서 편하게 편집하도록 하겠다.
#darkModeButton {
position: absolute;
top: 20px;
right: 80px;
cursor: pointer;
background-color: red;
}
이제 button에 JavaScript를 추가해 다크모드 기능을 만들어 보자.
1. button을 누르면 태그의 class를 변경하는 함수를 실행시키도록 한다.
2. 해당 class의 배경색, 글자색을 정의함으로써 다크모드를 적용시킨다.
3. button을 다시 누르면 원래 상태로 돌아온다.
태그를 클릭했을 때 함수를 실행시키는 것은 onClick 속성을 통해 설정할 수 있다.
GlobalEventHandlers.onclick - Web API | MDN
GlobalEventHandlers 믹스인mixin의 onclick 속성은 주어진 요소의 click 이벤트를 처리하기 위한 event handler입니다.
developer.mozilla.org
HTML 파일 </body> 앞에 버튼을 눌렀을 때 호출되는 함수를 정의해보자.
<body>
...
<script>
let darkModeButton = document.getElementById("darkModeButton");
darkModeButton.onclick = toggleDarkMode;
function toggleDarkMode() {
var wrap = document.getElementById("wrap");
wrap.classList.toggle("darkMode");
};
</script>
</body>
변수 darkModeButton은 id가 darkModeButton인 태그를 가르킨다. (여기선 다크모드 버튼!)
-> 해당 변수가 가르키는 태그(다크모드 버튼)가 클릭되면 함수 toggleDarkMode를 실행한다.
--- 함수 toggleDarkMode ---
-> 변수 wrap은 id가 wrap인 태그를 가르킨다. (티스토리에서 모든 내용은 해당 태그안에 있다.)
-> 해당 태그의 class를 "darkMode"로 변경한다.
개발자 도구를 사용하여 함수가 잘 실행되었는지 확인해보자.
버튼을 눌렀을 때 wrap 태그 안에 class="darkMode"가 추가된 것을 확인할 수 있다.
이제 다크모드일 때의 CSS를 추가하면 끝이다.
다크모드에서 배경색과 글자색은 내 깃허브 페이지의 색상을 이용하겠다.
그림판을 이용하면 쉽게 RGB값을 가져올 수 있다.
왼쪽 사진에서 빨갛게 표시한 도구를 클릭하고 원하는 색깔을 누른 뒤, 색 편집을 누르면 색깔의 RGB 값을 확인할 수 있다.
추출한 RGB값으로 다크모드의 CSS를 추가한 뒤, 확인해보자
.darkMode {
background-color: rgb(34, 39, 46);
color: rgb(205, 217, 229);
}
사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN
사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;)
developer.mozilla.org
해당 문서를 읽으며 색깔을 변수로 지정하던 중에, 이런 식으로 조건을 추가할 수 있었다.
.two {
color: var(--my-var, red);
/* --my-var가 정의되지 않았을 경우 red로 표시됨 */
}
.three {
background-color: var(--my-var, var(--my-background, pink));
/* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
}
.three {
background-color: var(--my-var, --my-background, pink);
/* 유효하지 않음: "--my-background, pink" */
}그래서 생각한 것이 색깔을 변경하고 싶은 모든 태그를 다크모드일 때를 추가하는 것이 아니라, 다크모드 CSS안에 다크모드의 색깔을 정의해놓고 태그의 색깔을 위의 코드 처럼 대체 변수로 지정해 놓는 것이다.
그러면 다크모드일 때는 .darkMode안에서 색깔이 변수로 정의되니까, 정의된 색깔이 적용되고 다크모드 아닐때는 색깔이 정의되지 않으므로 대체 변수로 지정한 색깔이 적용되지 않을까? 한번 적용해봤다.
.darkMode {
--dark-bg: rgb(34, 39, 46);
--dark-main: white;
--dark-sub: rgb(205, 217, 229);
--dark-header: #B57FB3;
background-color: var(--dark-bg);
color: var(--dark-main);
}
#header {
position: fixed;
z-index: 2;
top: 0px;
width: 100%;
background-color: var(--dark-header, #F8DAE2);
}
다크모드 버튼을 누르면 .darkMode가 활성화되고 안에서 다크모드에 해당하는 색깔이 정의된다. 그래서 #header의 background-color의 --dark-header가 잘 적용된다.
다크모드가 아닐 때는 .darkMode가 활성화되지 않고, 따라서 --dark-header도 정의되지 않았으므로 대체 색깔인 기존의 #F8DAE2가 적용된다.(원래 상단바 색깔)
이렇게 색깔을 변수로 지정하는 방법으로 간단하게 다크모드 버튼을 만들었다!!
'프로젝트 > 티스토리 꾸미기' 카테고리의 다른 글
| [티스토리 꾸미기] 프로젝트 중단 (0) | 2022.04.23 |
|---|---|
| [티스토리 꾸미기 3편] 이미지 테두리 만들기 (0) | 2022.02.21 |
| [티스토리 꾸미기 2편] 고정된 상단바 만들기 (0) | 2022.02.19 |
| [티스토리 꾸미기 1편] HTML, CSS 분석 (0) | 2022.02.18 |
| [티스토리 꾸미기 0편] 시작하며 (2) | 2022.02.18 |