그누보드 다크모드 만들기 PHP & Javascript
<?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개
좋은정보 감사 드려요.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 1854 | 4년 전 | 3697 | ||
| 1853 | 4년 전 | 2857 | ||
| 1852 |
 마르스컴퍼니 |
4년 전 | 6311 | |
| 1851 | 4년 전 | 3007 | ||
| 1850 |
마르스컴퍼니 |
4년 전 | 4591 | |
| 1849 | 4년 전 | 3334 | ||
| 1848 | 4년 전 | 3223 | ||
| 1847 | 4년 전 | 3900 | ||
| 1846 | 4년 전 | 3161 | ||
| 1845 | 4년 전 | 2953 | ||
| 1844 | 4년 전 | 3482 | ||
| 1843 | 4년 전 | 5601 | ||
| 1842 |
jaykjayk5
|
4년 전 | 2867 | |
| 1841 |
jaykjayk5
|
4년 전 | 3540 | |
| 1840 | 4년 전 | 2978 | ||
| 1839 | 4년 전 | 3693 | ||
| 1838 | 4년 전 | 3407 | ||
| 1837 | 4년 전 | 2445 | ||
| 1836 | 4년 전 | 4851 | ||
| 1835 | 4년 전 | 3971 | ||
| 1834 | 4년 전 | 3591 | ||
| 1833 | 4년 전 | 3571 | ||
| 1832 |
 Innisfree |
4년 전 | 4852 | |
| 1831 | 4년 전 | 3442 | ||
| 1830 |
몰라무서워
|
4년 전 | 3360 | |
| 1829 |
welcome
|
4년 전 | 4684 | |
| 1828 | 4년 전 | 6041 | ||
| 1827 |
jaykjayk5
|
4년 전 | 5646 | |
| 1826 | 4년 전 | 4743 | ||
| 1825 |
Innisfree |
4년 전 | 7018 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기