그누보드 다크모드 만들기 PHP & Javascript > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드 다크모드 만들기 PHP & Javascript 정보

그누보드 다크모드 만들기 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 { ... }

추천
7

댓글 4개

전체 25 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT