목록으로

다크보드 전환 버튼 추가 질문입니다 채택완료

이현진44 8개월 전 조회 2,584

답변 6

현재 밝은 모드만있어서 다크모드 전환 버튼을 추가해서

전환가능하게 사이트를 만들고 싶은데

어떻게 해야 가능할까요 검색해보니 완전 테마를 다크모드로만 바꾸는거밖에 안나오네요 ㅜㅠ

감사합니다.

#그누보드5 #영카트5 #php

댓글을 작성하려면 로그인이 필요합니다.

답변 6개

정렬:

채택된 답변

+20 포인트

마르스컴퍼니 Expert

8개월 전

darkreader 플러그인을 사용하는 방법이 있습니다. https://www.npmjs.com/package/darkreader
* head.sub.php

</p>

<p><?php

// head.sub.php 하단에 추가

$darkreader = get_cookie('darkreader');

?></p>

<p><!-- darkreader 스크립트 추가 -->

<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js"></script></a>

<script>

// 다크모드 토글 함수

function toggleDarkMode() {

  if (DarkReader.isEnabled()) {

    DarkReader.disable();

    set_cookie('darkreader', '', 365); 

  } else {

    DarkReader.enable({

      brightness: 100,

      contrast: 90,

      sepia: 10

    });

    set_cookie('darkreader', 'enabled', 365);

  }

}</p>

<p>// 초기 다크모드 상태 설정

window.addEventListener('DOMContentLoaded', () => {

  if('<?php echo $darkreader?>' === 'enabled') {

    DarkReader.enable({

      brightness: 100,

      contrast: 90, 

      sepia: 10

    });

  }

});

</script></p>

<p>

* head.php or tail.php

</p>

<p><button type="button" onclick="toggleDarkMode()" class="btn_dark_mode">

  <span class="sound_only">다크모드 전환</span>

  <i class="fa fa-moon-o" aria-hidden="true"></i>

</button></p>

<p><style>

.btn_dark_mode {

  position: fixed;

  right: 20px; 

  bottom: 20px;

  width: 50px;

  height: 50px;

  border: 1px solid #ddd;

  border-radius: 50%;

  background: #fff;

  font-size: 20px;

  z-index: 999;

  cursor: pointer;

  transition: all 0.3s ease;

}</p>

<p>.btn_dark_mode:hover {

  background: #eee;

}</p>

<p>/* 다크모드일 때 */

.darkreader .btn_dark_mode {

  background: #333;

  border-color: #666;

  color: #fff;

}

</style></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 7개

�

이현진44

8개월 전

위에 코드를 각 파일에 추가 하라는 말씀이신가요 ? 제가 코린이라 이해가 잘안가네요 죄송합니다 ㅜ

�

마르스컴퍼니

8개월 전

첫번째 코드는 head.sub.php 하단에 추가입니다.
두번째 코드는 <전환 버튼> 샘플이고, head.php 또는 tail.php 에 아무곳에나 넣어본 후, 적당한 위치를 찾아가면 됩니다.

�

이현진44

8개월 전

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')
at c.slide (bootstrap.min.js:6:5828)
at c.next (bootstrap.min.js:6:4983)
at e (jquery-1.11.3.min.js:2:3959)
(index):157 Uncaught ReferenceError: toggleDarkMode is not defined
at HTMLButtonElement.onclick ((index):157:76) 이런 에러 나오는데 왜 그럴까요 ㅜ

�

마르스컴퍼니

8개월 전

새 코드입니다.
[code]
<?php
// head.sub.php 하단에 추가
$darkreader = get_cookie('darkreader');
?>


<script src="https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js"></script>
<script>
// 쿠키 설정 함수
function setCookie(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
}

// 다크모드 토글 함수
function toggleDarkMode() {
if (DarkReader.isEnabled()) {
DarkReader.disable();
setCookie('darkreader', '', 365);
} else {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
setCookie('darkreader', 'enabled', 365);
}
}

// 초기 다크모드 상태 설정
window.addEventListener('DOMContentLoaded', () => {
if('<?php echo $darkreader?>' === 'enabled') {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
}
});
</script>
[/code]

�

이현진44

8개월 전

아래 버튼을 추가하면 원래 있던 상단으로 올려주는 버튼이랑 겹쳐서 오류가 나는데 그건 왜그럴까요 ?

�

이현진44

8개월 전

안녕하세요 코드를 사용해서 버튼만들고 작동은하는데 헤드배경과 바디배경은 변경이 안되는데 어딜 수정 봐야될까요 ?

�

마르스컴퍼니

8개월 전

버튼이 겹치는 부분은,

.btn_dark_mode {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
~

의 설정에서 bottom 의 위치를 50px 등으로 조정해주면 될 듯 합니다.

head 와 body 부분이 적용안되는 것은 잘 모르겠습니다만..
약간 자동화식으로 적용되는 특성이니..
head 와 body 배경색 css 설정 부분을 살펴..
<body style="background:#f00" 식으로 들어가 있다면..
또는 body, head 관련 background 적용된 부분을 찾아..
이런 부분들을 하나씩 빼보거나 값을 변경해가면서 살펴볼 수 있을 듯 합니다.

댓글을 작성하려면 로그인이 필요합니다.

케빈엉클

8개월 전

아마 theme가 좀 다른 거 같은데...

이거 참고 함 해보세요..

</p>

<p>/* 다크모드 전체 배경 스타일 추가 */</p>

<p>.darkreader body {</p>

<p>  background-color: #1a1a1a !important;</p>

<p>  color: #ffffff !important;</p>

<p>}</p>

<p> </p>

<p>/* 헤더 배경 다크모드 스타일 */</p>

<p>.darkreader #hd {</p>

<p>  background-color: #2d2d2d !important;</p>

<p>}</p>

<p> </p>

<p>/* 메뉴 배경 다크모드 스타일 */</p>

<p>.darkreader #gnb {</p>

<p>  background-color: #2d2d2d !important;</p>

<p>}</p>

<p> </p>

<p>/* 사이드바 다크모드 스타일 */</p>

<p>.darkreader #aside {</p>

<p>  background-color: #2d2d2d !important;</p>

<p>}</p>

<p> </p>

<p>/* 푸터 다크모드 스타일 */</p>

<p>.darkreader #ft {</p>

<p>  background-color: #2d2d2d !important;</p>

<p>  color: #ffffff !important;</p>

<p>}</p>

<p> </p>

<p>/* 링크 색상 다크모드 스타일 */</p>

<p>.darkreader a {</p>

<p>  color: #9ecaed !important;</p>

<p>}</p>

<p> </p>

<p>/* 박스 및 컨테이너 다크모드 스타일 */</p>

<p>.darkreader .box {</p>

<p>  background-color: #2d2d2d !important;</p>

<p>  border-color: #404040 !important;</p>

<p>}</p>

<p>

참고해서 조금씩 수정해보세요...

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

케빈엉클

8개월 전

마르스컴파니님 2-16일자 쏘스에서 get_cookie가 undefined 에러가 생겨 cookie가 생성되지 않는 오류가 생겨서 전 이렇게 바꿨습니다.

참고로, cookie가 없으면 페이지바꿀때마다 다크모드 버튼을 매번 눌러주는 불편함이 생겨요.

</p>

<p>//$darkreader = get_cookie('darkreader');//not working as null cookie, so use below code.</p>

<p>$darkreader = isset($_COOKIE['darkreader']) ? $_COOKIE['darkreader'] : '';</p>

<p>

test :

https://atlanta.infinityfreeapp.com/

우측 하단부에 dark mode button 있슴

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

�

이현진44

8개월 전

와 어떻게 만드셨는지 설명 한번 부탁드려요 버튼도 안생기네요 저는 ㅠ 버튼 코드 넣으니까 기존에 아래서 위로 올려주는 스크롤버튼까지 고장내네요

�

케빈엉클

8개월 전

theme의 head.sub.php </head>전에
이 part를 넣어주세요.
[code]

<?php
// head.sub.php 하단에 추가
//$darkreader = get_cookie('darkreader');//not working as null cookie, so use below code.
$darkreader = isset($_COOKIE['darkreader']) ? $_COOKIE['darkreader'] : '';
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js"></script>
<script>
// 다크모드 토글 함수
function toggleDarkMode() {
if (DarkReader.isEnabled()) {
DarkReader.disable();
set_cookie('darkreader', '', 365);
} else {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
set_cookie('darkreader', 'enabled', 365);
}
}
// 초기 다크모드 상태 설정
window.addEventListener('DOMContentLoaded', () => {
if('<?php echo $darkreader?>' === 'enabled') {
DarkReader.enable({
brightness: 100,
contrast: 90,
sepia: 10
});
}
});
</script>

[/code]

그리고 theme의 tail.php <div id="aside">바로 다음으로
이 part를 넣어주세요.
[code]

<button type="button" onclick="toggleDarkMode()" class="btn_dark_mode">
<span class="sound_only">다크모드 전환</span>

<i class="fa-solid fa-moon fa-beat" style="color:#ffd700"></i>
<i class="fa-solid fa-sun fa-beat" style="color:#ff0000"></i>
</button>
<style>
.btn_dark_mode {
position: fixed;
right: 20px;
bottom: 80px;
width: 50px;
height: 50px;
border: 1px solid #ddd;
border-radius: 50%;
background: #fff;
font-size: 20px;
z-index: 999;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn_dark_mode:hover {
/*background: #eee;*/
background: #f5f5f5;
transform: scale(1.05);
}
/* 다크모드일 때 */
/*
.darkreader .btn_dark_mode {
background: #333;
border-color: #666;
color: #fff;
}
*/
.darkreader .btn_dark_mode {
background: #2d2d2d;
border-color: #404040;
color: #ffffff;
box-shadow: 0 2px 5px rgb(255, 255, 255);
}

.darkreader .btn_dark_mode:hover {
background: #3d3d3d;
}
</style>

[/code]

전 이렇게 했습니다.
test :

https://atlanta.infinityfreeapp.com/

우측 하단부에 dark mode button 있슴

그리고 theme의 tail.php <div id="aside">바로 다음으로
이 part를 넣어주세요.
[code]

  <button type="button" onclick="toggleDarkMode()" class="btn_dark_mode">
  <span class="sound_only">다크모드 전환</span>
  
  <i class="fa-solid fa-moon fa-beat" style="color:#ffd700"></i>
  <i class="fa-solid fa-sun fa-beat" style="color:#ff0000"></i>   
</button>
<style>
.btn_dark_mode {   
  position: fixed;
  right: 20px; 
  bottom: 80px;
  width: 50px;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn_dark_mode:hover {
  /*background: #eee;*/
  background: #f5f5f5;
  transform: scale(1.05);
}
/* 다크모드일 때 */
/*
.darkreader .btn_dark_mode {   
  background: #333;
  border-color: #666;
  color: #fff;
}
*/
.darkreader .btn_dark_mode {   
  background: #2d2d2d;
  border-color: #404040;
  color: #ffffff;
  box-shadow: 0 2px 5px rgb(255, 255, 255);
}

.darkreader .btn_dark_mode:hover {
  background: #3d3d3d;
}
</style>

[/code]

전 이렇게 했습니다.
test :

https://atlanta.infinityfreeapp.com/

우측 하단부에 dark mode button 있슴

�

이현진44

8개월 전

와! 버튼 생겼습니다 선생님 근데 버튼 누르니까 게시글 쪽 은 어둡게 변하는데 배경은 그대로네요 어떤걸 손봐야될까요 ㅜ 선생님 링크 들어가서 봤는데 선생님 사이트는 배경 화면 흰색에서 검은색으로 전체가 바뀌더라고요 위젯이나 게시판쪽은 바뀌는데 바디 배경이랑 헤드 배경이 안바뀌네요 흠

댓글을 작성하려면 로그인이 필요합니다.

푸른산타

8개월 전

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

sinbi Expert

8개월 전

신)나리야빌더가 다크모드 전환 기능 지원합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

설국열차

8개월 전

<body 태그에 자바스크립트로 쿠키로 구현하거나 로칼스토리지에서 밝은 모드와 다크모드 값이 저장되게 햔 후 <body 에 클래스가 적용되게 한 후
기존의 css 를 밝은 클래스와 다크 클래스가 앞에 들어가는 것으로 2가지를 만들여서 적용하면 될 것입니다.
작업양이 만만치 않을 것입니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

다크보드 전환 버튼 추가 질문입니다 채택완료

답변 6개

답변에 대한 댓글 7개

답변에 대한 댓글 3개

공유하기