그누보드 다크모드 만들기 PHP & Javascript > 솔루션(그누/영카트) 팁자료실

본문 바로가기
사이트 내 전체검색

회원로그인

회원가입

오늘 본 상품 0

없음


솔루션(그누/영카트) 팁자료실

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

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 1,872회 작성일 22-05-13 11:04

본문

welcome님의 자료인용되었습니다


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

댓글목록

등록된 댓글이 없습니다.


네이버블로그 인스타그램 네이버까페 유튜브 네이버밴드 페이스북 트위터 카카오스토리

사이트 정보

회사명 : 회사명 / 대표 : 대표자명
주소 : OO도 OO시 OO구 OO동 123-45
사업자 등록번호 : 123-45-67890
전화 : 02-123-4567 팩스 : 02-123-4568
통신판매업신고번호 : 제 OO구 - 123호
개인정보관리책임자 : 정보책임자명

접속자집계

오늘
107
어제
104
최대
331
전체
30,397
Copyright © 소유하신 도메인. All rights reserved.