다크보드 전환 버튼 추가 질문입니다
본문
현재 밝은 모드만있어서 다크모드 전환 버튼을 추가해서
전환가능하게 사이트를 만들고 싶은데
어떻게 해야 가능할까요 검색해보니 완전 테마를 다크모드로만 바꾸는거밖에 안나오네요 ㅜㅠ
감사합니다.
답변 6
darkreader 플러그인을 사용하는 방법이 있습니다. https://www.npmjs.com/package/darkreader
* head.sub.php
<?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
<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>
위에 코드를 각 파일에 추가 하라는 말씀이신가요 ? 제가 코린이라 이해가 잘안가네요 죄송합니다 ㅜ
첫번째 코드는 head.sub.php 하단에 추가입니다.
두번째 코드는 <전환 버튼> 샘플이고, head.php 또는 tail.php 에 아무곳에나 넣어본 후, 적당한 위치를 찾아가면 됩니다.
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) 이런 에러 나오는데 왜 그럴까요 ㅜ
새 코드입니다.
<?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>
아래 버튼을 추가하면 원래 있던 상단으로 올려주는 버튼이랑 겹쳐서 오류가 나는데 그건 왜그럴까요 ?
안녕하세요 코드를 사용해서 버튼만들고 작동은하는데 헤드배경과 바디배경은 변경이 안되는데 어딜 수정 봐야될까요 ?
버튼이 겹치는 부분은,
.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 적용된 부분을 찾아..
이런 부분들을 하나씩 빼보거나 값을 변경해가면서 살펴볼 수 있을 듯 합니다.
<body 태그에 자바스크립트로 쿠키로 구현하거나 로칼스토리지에서 밝은 모드와 다크모드 값이 저장되게 햔 후 <body 에 클래스가 적용되게 한 후
기존의 css 를 밝은 클래스와 다크 클래스가 앞에 들어가는 것으로 2가지를 만들여서 적용하면 될 것입니다.
작업양이 만만치 않을 것입니다.
.
신)나리야빌더가 다크모드 전환 기능 지원합니다.
마르스컴파니님 2-16일자 쏘스에서 get_cookie가 undefined 에러가 생겨 cookie가 생성되지 않는 오류가 생겨서 전 이렇게 바꿨습니다.
참고로, cookie가 없으면 페이지바꿀때마다 다크모드 버튼을 매번 눌러주는 불편함이 생겨요.
//$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 있슴
와 어떻게 만드셨는지 설명 한번 부탁드려요 버튼도 안생기네요 저는 ㅠ 버튼 코드 넣으니까 기존에 아래서 위로 올려주는 스크롤버튼까지 고장내네요
theme의 head.sub.php </head>전에
이 part를 넣어주세요.
<!---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)-->
그리고 theme의 tail.php <div id="aside">바로 다음으로
이 part를 넣어주세요.
<!-- 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-->
전 이렇게 했습니다.
test :
https://atlanta.infinityfreeapp.com/
우측 하단부에 dark mode button 있슴
와! 버튼 생겼습니다 선생님 근데 버튼 누르니까 게시글 쪽 은 어둡게 변하는데 배경은 그대로네요 어떤걸 손봐야될까요 ㅜ 선생님 링크 들어가서 봤는데 선생님 사이트는 배경 화면 흰색에서 검은색으로 전체가 바뀌더라고요 위젯이나 게시판쪽은 바뀌는데 바디 배경이랑 헤드 배경이 안바뀌네요 흠
아마 theme가 좀 다른 거 같은데...
이거 참고 함 해보세요..
/* 다크모드 전체 배경 스타일 추가 */
.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;
}
참고해서 조금씩 수정해보세요...