웹사이트 다크 모드 만들기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 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11974 2 04-23
824 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12413 2 03-06
823 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12615 2 03-06
822 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11703 2 12-07
821 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12042 1 02-27
820 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14595 1 04-01
819 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11723 1 05-21
818 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12332 1 01-27
817 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11663 1 10-22
816 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11772 1 04-18
815 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12148 1 05-06
814 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13341 1 05-10
813 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20686 1 05-11
812 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 30524 1 05-30
811 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 25966 1 06-10
810 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12860 1 11-14
809 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14139 0 06-24
808 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12745 0 09-29
807 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 19312 0 03-20
806 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14128 0 03-20

검색

회원로그인

회원가입

사이트 정보

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

접속자집계

오늘
369
어제
4,566
최대
6,509
전체
1,065,030
Copyright (c) 株式会社YHPLUS. All rights reserved.