Hello, World!
이전 목록 다음
채택완료

다크보드 전환 버튼 추가 질문입니다

이현진44
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 3,255

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

 

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

 

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

 

감사합니다. 

그누보드5 영카트5 php
|

답변 6개 / 댓글 10개

채택된 답변
+20 포인트
마마르스컴퍼니
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

Copy 
<?php
// head.sub.php 하단에 추가
$darkreader = get_cookie('darkreader');
?>

<!-- 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>

 

* head.php or tail.php

Copy 
<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>

<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;
}

.btn_dark_mode:hover {
  background: #eee;
}

/* 다크모드일 때 */
.darkreader .btn_dark_mode {
  background: #333;
  border-color: #666;
  color: #fff;
}
</style>

답변에 대한 댓글 7개

이현진44
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
위에 코드를 각 파일에 추가 하라는 말씀이신가요 ? 제가 코린이라 이해가 잘안가네요 죄송합니다 ㅜ
마르스컴퍼니
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
첫번째 코드는 head.sub.php 하단에 추가입니다.
두번째 코드는 <전환 버튼> 샘플이고, head.php 또는 tail.php 에 아무곳에나 넣어본 후, 적당한 위치를 찾아가면 됩니다.
이현진44
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
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) 이런 에러 나오는데 왜 그럴까요 ㅜ
마르스컴퍼니
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
새 코드입니다.
[code]
<?php
// head.sub.php 하단에 추가
$darkreader = get_cookie('darkreader');
?>

<!-- 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
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
아래 버튼을 추가하면 원래 있던 상단으로 올려주는 버튼이랑 겹쳐서 오류가 나는데 그건 왜그럴까요 ?
이현진44
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
안녕하세요 코드를 사용해서 버튼만들고 작동은하는데 헤드배경과 바디배경은 변경이 안되는데 어딜 수정 봐야될까요 ?
마르스컴퍼니
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
버튼이 겹치는 부분은,

.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 적용된 부분을 찾아..
이런 부분들을 하나씩 빼보거나 값을 변경해가면서 살펴볼 수 있을 듯 합니다.
케빈엉클
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

이거 참고 함 해보세요..

Copy 
/* 다크모드 전체 배경 스타일 추가 */

.darkreader body {

  background-color: #1a1a1a !important;

  color: #ffffff !important;

}

 

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

.darkreader #hd {

  background-color: #2d2d2d !important;

}

 

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

.darkreader #gnb {

  background-color: #2d2d2d !important;

}

 

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

.darkreader #aside {

  background-color: #2d2d2d !important;

}

 

/* 푸터 다크모드 스타일 */

.darkreader #ft {

  background-color: #2d2d2d !important;

  color: #ffffff !important;

}

 

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

.darkreader a {

  color: #9ecaed !important;

}

 

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

.darkreader .box {

  background-color: #2d2d2d !important;

  border-color: #404040 !important;

}

 

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

케빈엉클
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

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

 

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

$darkreader = isset($_COOKIE['darkreader']) ? $_COOKIE['darkreader'] : '';

 

test :

https://atlanta.infinityfreeapp.com/

우측 하단부에 dark mode button 있슴

답변에 대한 댓글 3개

이현진44
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
와 어떻게 만드셨는지 설명 한번 부탁드려요 버튼도 안생기네요 저는 ㅠ 버튼 코드 넣으니까 기존에 아래서 위로 올려주는 스크롤버튼까지 고장내네요
케빈엉클
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
theme의 head.sub.php </head>전에
이 part를 넣어주세요.
[code]
<!---dark mode/light mode(head part)-->
<?php
// head.sub.php 하단에 추가
//$darkreader = get_cookie('darkreader');//not working as null cookie, so use below code.
$darkreader = isset($_COOKIE['darkreader']) ? $_COOKIE['darkreader'] : '';
?>
<!-- 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>
<!---dark mode/light mode(head part)-->
[/code]

그리고 theme의 tail.php <div id="aside">바로 다음으로
이 part를 넣어주세요.
[code]
<!-- darkmode/lightmode tail part-->
<button type="button" onclick="toggleDarkMode()" class="btn_dark_mode">
<span class="sound_only">다크모드 전환</span>
<!--<i class="fa fa-moon-o" aria-hidden="true"></i>-->
<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>
<!-- darkmode/lightmode tail part-->
[/code]

전 이렇게 했습니다.
test :

https://atlanta.infinityfreeapp.com/

우측 하단부에 dark mode button 있슴
이현진44
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전
와! 버튼 생겼습니다 선생님 근데 버튼 누르니까 게시글 쪽 은 어둡게 변하는데 배경은 그대로네요 어떤걸 손봐야될까요 ㅜ 선생님 링크 들어가서 봤는데 선생님 사이트는 배경 화면 흰색에서 검은색으로 전체가 바뀌더라고요 위젯이나 게시판쪽은 바뀌는데 바디 배경이랑 헤드 배경이 안바뀌네요 흠
sinbi
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

설설국열차
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

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

 

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