진스
웹에서 다크 모드로 토글 (css 변수 이용) 본문
css에서도 변수를 선언하고 사용할 수 있다는 사실!
이를 이용해서 다크모드 기능을 만들어보자
(디폴트가 다크모드)
1. toggle 버튼 생성
📃 html 파일
<head>
<!-- ... -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- ... -->
<label class="switch">
<input id="toggleBtn" type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="flexbox">
<img src="./bjm.jpg" alt="사진">
<div class="boxwrap">
<h3>BaeJM</h3>
<p>신입 프론트 엔드 / 직장인</p>
<div class="popular">
<p>연결 21</p>
<p>팔로잉 8</p>
<p>팔로워 5</p>
</div>
<ul class="favorite">
<li>JavaScript</li>
<li>jQuery</li>
<li>MySQL</li>
<li>Vue</li>
<li>Ajax</li>
<li>HTML5</li>
<li>Git</li>
<li>Css</li>
</ul>
</div>
</div>
<!-- ... -->
<script src="mode.js"></script>
<script src="main.js"></script>
📃 css 파일
/* 토글버튼 */
.switch {
position: absolute;
top: 20px;
right: 20px;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* 기본값 설정 */
:root {
--background: #1b1d21;
--backgrounds: #3c3b3b;
--input: #24272b;
--inputTxt: #b6b7b8;
--card: #2c3035;
--infoTxt: #e5e6e7;
--liBgColor:#252525;
--repo: #393c42;
--border: #646568;
}
body { background-color: var(--background); /* ... */ }
/* transition 효과 주기 */
* { transition: background-color 1s, color 0.1s, border 0.5s; }
2. js파일에 컬러 값 선언
📃 mode.js 파일
const darkColors = {
background: '#1b1d21',
backgrounds: '#3c3b3b',
input: '#24272b',
inputTxt: '#b6b7b8',
card: '#2c3035',
infoTxt: '#e5e6e7',
liTxt:'#fff',
liBgColor:'#252525',
repo: '#393c42',
border: '#646568'
}
const whiteColors = {
background: '#ffffff',
backgrounds: '#e8e8e8',
input: '#f3f3f3',
inputTxt: '#000000',
card: '#ffffff',
infoTxt: '#000000',
liBgColor:'#9c9c9c',
liTxt:'#fff',
repo: '#f3f3f3',
border: '#393c42'
}
3. js 이벤트 등록
📃 main.js 파일
// 컬러 모드
const setColorType = (colors) =>{
for (const [key, value] of Object.entries(colors)){
document.documentElement.style.setProperty(`--${key}`, `${value}`);
}
}
const addEventListenerToToggle = ($toggleBtn) => {
$toggleBtn.addEventListener("click", (e) => {
const isDarkMode = e.target.checked
isDarkMode ? setColorType(darkColors) : setColorType(whiteColors)
})
}
// IIFE 이용 초기화 함수 선언
const basicInit = (() => {
const $toggleBtn = document.getElementById("toggleBtn");
addEventListenerToToggle($toggleBtn)
})()
'JavaScript' 카테고리의 다른 글
| 주민번호 마스킹 처리 및 그외 마스킹 처리 (0) | 2021.04.27 |
|---|---|
| ssr (서버 사이드 랜더링) csr (클라이언트 사이드 랜더링)차이 (0) | 2021.04.24 |
| 12. async / await (0) | 2021.04.09 |
| 11. Promise (0) | 2021.04.09 |
| 10. Callback 지옥 (0) | 2021.04.09 |
