그누보드 다크모드 만들기 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년 전 | 4426 | ||
| 2574 | 10개월 전 | 561 | ||
| 2573 | 10개월 전 | 937 | ||
| 2572 |
두리삼촌v
|
10개월 전 | 609 | |
| 2571 | 10개월 전 | 556 | ||
| 2570 | 10개월 전 | 599 | ||
| 2569 |
두리삼촌v
|
10개월 전 | 638 | |
| 2568 |
두리삼촌v
|
10개월 전 | 666 | |
| 2567 |
두리삼촌v
|
10개월 전 | 462 | |
| 2566 |
두리삼촌v
|
10개월 전 | 443 | |
| 2565 | 10개월 전 | 740 | ||
| 2564 | 10개월 전 | 670 | ||
| 2563 | 10개월 전 | 473 | ||
| 2562 | 10개월 전 | 1030 | ||
| 2561 |
 수평선1203 |
11개월 전 | 675 | |
| 2560 | 11개월 전 | 919 | ||
| 2559 | 11개월 전 | 657 | ||
| 2558 |
 간장게장같은남자 |
11개월 전 | 504 | |
| 2557 | 11개월 전 | 656 | ||
| 2556 | 11개월 전 | 957 | ||
| 2555 | 11개월 전 | 1338 | ||
| 2554 | 11개월 전 | 753 | ||
| 2553 |
수평선1203 |
11개월 전 | 748 | |
| 2552 | 11개월 전 | 676 | ||
| 2551 | 11개월 전 | 864 | ||
| 2550 | 11개월 전 | 766 | ||
| 2549 |
 dkstmdc |
11개월 전 | 717 | |
| 2548 | 11개월 전 | 1031 | ||
| 2547 | 11개월 전 | 673 | ||
| 2546 | 11개월 전 | 1207 | ||
| 2545 | 11개월 전 | 663 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기