다크 모드 만들기 - 1 > 그누보드5 팁자료실

그누보드5 팁자료실

다크 모드 만들기 - 1 정보

다크 모드 만들기 - 1

첨부파일

default.css (26.3K) 41회 다운로드 2022-02-27 23:53:56
default_dark.css (34.0K) 31회 다운로드 2022-02-27 23:53:56

본문

테마적용을 기준으로 합니다.

 

1. js폴더에 업로드

링크에서 다운받아서 업로드 합니다.

js/dark-mode-bootstrap

 

2. 적용할 버튼을 보이기

fontawesome-free-6.0.0-web을 다운받아서 업로드 후 적용해 줍니다.

https://fontawesome.com/download

head.sub.php

add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/font-awesome/css/font-awesome.min.css">', 0);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/fontawesome-free-6.0.0-web/css/all.min.css">', 0); 

 

3. 버튼추가

head.php추가

 

<li><a href="<?php echo G5_BBS_URL ?>/current_connect.php" class="visit">접속자<strong class="visit-num"><?php echo connect('theme/basic'); // 현재 접속자수, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정  ?></strong></a></li>
<li>
<input type="checkbox" class="" id="darkSwitch" style="display:none">
<label class="custom-control-label text-center" for="darkSwitch"><span id="data-theme-mod"></span></label>
<script src="<?php echo G5_JS_URL?>/dark-mode-bootstrap/dark-mode-switch.js"></script>
</li>

**************************

참고

dark-mode-switch.js의 파일 내부

var darkSwitch = document.getElementById("darkSwitch");
//window.addEventListener("load", function () {
  if (darkSwitch) {
    initTheme();
    darkSwitch.addEventListener("change", function () {
      resetTheme();
    });
  }
//});

사이트 변화에 따른 속도 향샹을 위해 load를 주석해 줍니다.

 

3. 스킨의 CSS파일을 추가 합니다

default.css 상단에 추가

@charset "utf-8";
@import url("./default_dark.css");

 

default_dark.css 파일을 만든후

[data-theme="dark"] 모든스타일에 붙여주기
 

각각의 모든 스킨을 만들어서 적용해 주세요.

참조 : 미완성된 css 파일 첨부

 

**********************************

팝업이나 head가 없는 페이지 적용을 위해 위치를 수정합니다.

head.sub.php

<body<?php echo isset($g5['body_script']) ? $g5['body_script'] : ''; ?>>
<?php
if ($is_member) { // 회원이라면 로그인 중이라는 메세지를 출력해준다.
    $sr_admin_msg = '';
    if ($is_admin == 'super') $sr_admin_msg = "최고관리자 ";
    else if ($is_admin == 'group') $sr_admin_msg = "그룹관리자 ";
    else if ($is_admin == 'board') $sr_admin_msg = "게시판관리자 ";

    echo '<div id="hd_login_msg">'.$sr_admin_msg.get_text($member['mb_nick']).'님 로그인 중 ';
    echo '<a href="'.G5_BBS_URL.'/logout.php">로그아웃</a></div>';
}
?>

<input type="checkbox" class="" id="darkSwitch" style="display:none">

<script src="<?php echo G5_JS_URL?>/dark-mode-bootstrap/dark-mode-switch.js"></script>

*********

head.sub.php

페이지이동시 반짝이는 현상때문에 스크립 파일을 이동합니다.

 

tail.sub.php

<script src="<?php echo G5_JS_URL?>/dark-mode-bootstrap/dark-mode-switch.js"></script>
<?php run_event('tail_sub'); ?>

추천
9

댓글 20개

팁을 사용하여 다크모드를 하고자 하시는 분들이 있으시면
제가 적용한 다크모드용 CSS파일을 올려드리겠습니다.
제로나라 사이트는 최대한 기본그누만을 사용하고 있습니다.
감사합니다 잘적용했습니다 다크모드 일때 태양아이콘이 보이는데 다크모드아닐때 달아이콘이 안뜰땐 어떡해야할까요? css파일 받을수 있을까요?
default.css
#data-theme-mod:before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f699";position:absolute;margin-top:-3px;cursor:pointer;color:#ddd}

default_dark.css
[data-theme="dark"] #data-theme-mod:before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f185";position:absolute;margin-top:-3px;cursor:pointer}

이걸 확인해 보세요
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT