웹사이트 다크 모드 만들기2 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

웹사이트 다크 모드 만들기2

페이지 정보

본문

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

 

1. js폴더에 업로드

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

js/dark-mode-bootstrap

 

2. 적용할 버튼을 보이기

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

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 파일 첨부
 

 

각각의 파일에 적용해 주세요
 

#data-theme-mod:before {font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f699";position:absolute;margin-top:-3px;cursor:pointer}

 

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

 

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

팝업이나 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>

추천0

첨부파일

댓글목록

등록된 댓글이 없습니다.

Total 816건 1 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
816 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 85 0 08-04
815 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 83 0 08-04
814 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 89 0 08-03
813 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 164 0 07-08
812 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 156 0 07-08
811 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 185 0 07-06
810 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 200 0 06-09
809 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 236 0 06-03
808 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 295 0 04-16
807 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 378 0 03-29
806 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 389 0 03-26
805 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 482 0 03-12
804 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 507 0 03-10
803 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 536 0 03-03
802 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 909 0 02-28
801 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 926 0 02-28
800 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 822 0 02-28
799 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1039 0 02-28
798 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1252 0 02-28
열람중 제로 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 550 0 02-27

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
122
어제
190
최대
4,472
전체
180,374
Copyright (c) 株式会社YHPLUS. All rights reserved.