다크 모드를 CSS만으로 구현해보겠습니다.
구글, 애플, 네이버 등등 알만한 IT기업들이 선택한 다크 모드
내 웹사이트에도 적용해보자
자바스크립트 없이 input의 checked속성을 이용하여 적용해 보았습니다.
먼저 html 큰 틀을 먼저 짜줍니다.
<body>
<input type="checkbox" id="switchInput" />
<label class="switch" for="switchInput"><div class="circle"></div></label>
<div class="wrap"></div>
</body>
wrap안에 헤더랑 section 등등으로 구색을 갖추고
<body>
<input type="checkbox" id="switchInput" />
<label class="switch" for="switchInput"><div class="circle"></div></label>
<div class="wrap">
<div class="header">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>
<div class="section">
<div class="text normal">
<h3>click it turn off the light</h3>
</div>
<div class="text dark">
<h3>dark mode on</h3>
<p>Click it again to turn it back on</p>
</div>
</div>
</div>
</body>
css를 적용합니다.
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
--pink: #f58f7c;
--gray: #4f4f51;
--dark-gray: #2c2b30;
--main-font: "Montserrat", sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: var(--main-font);
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #333;
padding: 0 40px;
text-transform: capitalize;
display: inline-block;
height: 5rem;
line-height: 5rem;
}
a:hover {
background: #fff;
}
.header {
width: 100%;
height: 5rem;
background: var(--pink);
position: absolute;
top: 0;
left: 0;
}
.header ul {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 5rem;
box-sizing: border-box;
}
.switch {
width: 100px;
height: 50px;
position: absolute;
top: 30vh;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.1);
border-radius: 35px;
box-shadow: 0 2px 4px 0 rgba(151, 145, 151, 0.1);
}
.circle {
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 1em;
transform: translateY(-50%);
transition: transform 0.5s;
cursor: pointer;
}
.text {
padding-top:4vh;
text-align: center;
font-size: 3vw;
text-transform: capitalize;
}
.text p {
font-size: 1.5rem;
text-transform: none;
}
.text.dark {
display: none;
}
#switchInput:checked ~ .wrap .section .text.dark {
display: block;
}
#switchInput:checked ~ .wrap .section .text.normal {
display: none;
}
#switchInput:checked ~ .wrap .section {
background: #2c2b30;
color: var(--pink);
}
#switchInput:checked ~ .wrap .header {
background: var(--gray);
}
#switchInput:checked ~ .wrap a {
color: var(--pink);
}
#switchInput:checked + .switch .circle {
transform: translate(40px, -50%);
}완성된 예제입니다.
See the Pen by Euiyeon (@rhdmldus) on CodePen.
반응형
'퍼블리싱' 카테고리의 다른 글
| [CSS] 프로그레스바 circular progess bar 만들기 (0) | 2021.08.20 |
|---|---|
| [Vanilla JS] 스크롤내리면 헤더 고정 header fixed on scroll (1) | 2021.08.18 |
