다크 모드 만들기 - 1

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

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'); ?>