웹사이트 다크 모드 만들기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 825건 1 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
825 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 4121 0 11-02
824 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5072 0 08-04
823 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5158 0 06-09
822 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5424 0 12-31
821 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5475 0 12-04
820 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5508 0 07-10
819 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5756 0 10-02
818 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5794 0 03-26
817 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5866 0 12-24
816 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6083 0 04-16
815 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6106 0 03-10
814 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6154 0 02-21
813 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6166 0 10-17
812 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6262 0 08-03
811 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6343 0 08-04
810 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6434 0 06-03
809 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6606 0 03-03
808 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6940 0 03-29
807 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6989 0 04-06
806 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7123 0 07-08
805 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7300 0 10-31
804 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7334 0 07-08
열람중 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7388 0 02-27
802 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7495 0 01-01
801 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7531 0 06-20

검색

회원로그인

회원가입

사이트 정보

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

접속자집계

오늘
3,162
어제
5,045
최대
9,679
전체
2,617,540
Copyright (c) 株式会社YHPLUS. All rights reserved.