w

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

수고가 많으셨습니다.
좋은정보 감사 드려요.
좋은 팁이네요..
안되는것 같아요 ㅠㅠ
@문선생 css는 직접 만드셔야죠
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
21-05-23 조회 9,099
21-05-22 조회 7,387
21-05-21 조회 7,167
21-05-21 조회 8,920
21-05-20 조회 1.1만
21-05-20 조회 1만
21-05-17 조회 9,193
21-05-16 조회 1.2만
21-05-15 조회 6,757
21-05-12 조회 7,594
21-05-10 조회 8,585
21-05-09 조회 7,764
21-05-07 조회 7,427
21-05-03 조회 9,564
21-05-03 조회 6,581
21-05-03 조회 1.2만
21-05-02 조회 9,358
21-04-30 조회 7,995
21-04-29 조회 9,663
21-04-28 조회 1만
21-04-26 조회 1만
21-04-26 조회 8,459
21-04-23 조회 8,972
21-04-23 조회 7,062
21-04-22 조회 7,703
21-04-21 조회 8,917
21-04-16 조회 1.2만
21-04-15 조회 8,749
21-04-12 조회 8,025
21-04-09 조회 1.7만