w

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

· 2021-05-21 (금) 18:11:41 · 7643 · 4

<?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개

수고가 많으셨습니다.
좋은정보 감사 드려요.
좋은 팁이네요..
안되는것 같아요 ㅠㅠ
@문선생 css는 직접 만드셔야죠
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
21-06-15 조회 6,856
21-06-15 조회 7,210
21-06-15 조회 7,149
21-06-15 조회 6,545
21-06-14 조회 6,534
21-06-14 조회 5,669
21-06-10 조회 9,649
21-06-09 조회 5,853
21-06-08 조회 7,645
21-06-08 조회 6,151
21-06-08 조회 6,212
21-06-07 조회 6,913
21-06-06 조회 5,976
21-06-04 조회 5,695
21-06-04 조회 6,385
21-06-03 조회 8,483
21-06-02 조회 5,679
21-06-02 조회 6,298
21-06-01 조회 5,753
21-05-31 조회 6,705
21-05-31 조회 6,212
21-05-30 조회 5,197
21-05-28 조회 7,756
21-05-27 조회 6,797
21-05-26 조회 6,572
21-05-23 조회 6,282
21-05-23 조회 7,967
21-05-22 조회 6,264
21-05-21 조회 6,044
21-05-21 조회 7,644