<?php $themeClass = ''; if (!empty($_COOKIE['theme'])) { if ($_COOKIE['theme'] == 'dark') { $themeClass = 'dark-theme'; } else if ($_COOKIE['theme'] == 'light') { $themeClass = 'light-theme'; } } ?>
위 소스코드를 head.php 에 넣어주시고
<body class="<?php echo $themeClass; ?>">
테마의 head.php 나 head.sub.php 에 body 태그를 찾아서 class 에 넣어주세요.
원하는 다크모드 on off 하는 버튼 넣어주세요.
<script> const btn = document.querySelector(".btn-toggle"); const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); btn.addEventListener("click", function() { if (prefersDarkScheme.matches) { document.body.classList.toggle("light-mode"); var theme = document.body.classList.contains("light-mode") ? "light" : "dark"; } else { document.body.classList.toggle("dark-mode"); var theme = document.body.classList.contains("dark-mode") ? "dark" : "light"; } document.cookie = "theme=" + theme; }); </script>
css 에서 light 나 dark 속성을 이용해서 만드시면 됩니다..
ex)
.light button { .... }
.light .calendar { ... }
댓글 4개
게시글 목록
| 번호 | 제목 |
|---|---|
| 24318 | |
| 24317 | |
| 24315 | |
| 24309 | |
| 24294 | |
| 24293 | |
| 24277 | |
| 24262 | |
| 24260 | |
| 24253 | |
| 24251 | |
| 24236 | |
| 24233 | |
| 24228 | |
| 24226 | |
| 24221 | |
| 24214 | |
| 24203 | |
| 24201 | |
| 24199 | |
| 24196 | |
| 24195 | |
| 24194 | |
| 24192 | |
| 24191 | |
| 24187 | |
| 24185 | |
| 24183 | |
| 24172 | |
| 24168 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기