그누보드 다크모드 만들기 > 그누보드5 플러그인

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

그누보드 다크모드 만들기 정보

그누보드 다크모드 만들기

첨부파일

다크모드.zip (13.6K) 84회 다운로드 2021-06-01 04:18:34 포인트 차감100
테스트한 버전5.4.5.5
호환 가능 버전5.x

본문

그누보드의 다크모드 입니다. 

 

순정설치후에 다운로드된 파일을 덮어만 써도 기본은 동작할 것 같습니다.

 

style_dark.css 파일은 각 스킨마다 추가해 주세요.

 

default_dark.css와 night2.min.js 파일은

 

head.sub.php 에서 읽어 올수 있게 넣어 주세요.

 

<link rel="stylesheet" href="<?php echo run_replace('head_css_url', G5_THEME_CSS_URL.'/'.(G5_IS_MOBILE ? 'mobile_dark' : 'default_dark').'.css?ver='.G5_CSS_VER, G5_THEME_URL); ?>">

 

add_javascript('<script src="'.G5_THEME_JS_URL.'/night2.min.js"></script>', 0);

 

각 skin에 넣어주세요.

add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style_dark.css">', 0);

 

tail.sub.php에

<script type="text/javascript">

      const night = new Night2({

        lightClass: 'light',

        darkClass: 'dark',

        auto: true,

        intervalForCheckSun: 5, // 5분마다 체크

        intervalForTime: 60, // 60분마다 체크

        offset: 30, // 분

        onToggle(darkmode) {

        },

        onChange(darkmode) { //darkmode: true or false

        },

        onAuto() {

 

        },

        onLight() {},

        onDark() {}

      });

</script>

 

https로 접속을 하면 위치를 물어봅니다.

 

800597403_1622488238.7652.png

 

다크모드에서 화면이 바뀔때마다  번쩍이는 현상은 남아 있습니다.

첫 로딩시 body에 태그가 없이 로드된 후에 자바스크립트가 돌면서 모드를 변경하다 보니 그 순간 번쩍하게 보입니다.

 

이것은 쿠키로 해결하면 될 것 같습니다.  각 모드가 변경될때 (onToggle, onChange, onAuto)에서 

쿠키에 값을 설정하고,  PHP가 읽어서 초기에 body에 해당 태그를 먼저 집어 넣으면 될 것 같습니다.

 

색상은 생각나는 데로 넣어서 통일된 느낌은 나지 않으니,  각자 변경해서 사용하세요

 

 

추천
21

댓글 전체

1. 그누5.4.5.1 순정
2. 올려주신 그대로 업

적용해보니

메인은 잘 되구요

게시판 이동을 햇을때

3.1 게시판 목록
3.2 게시판 상세
3.3 게시판 쓰기/수정

올려주신 영상처럼 3가지에서 일부 적용이 안돼보이는 부분이 나왔습니다.
(하얀색 배경에 글자도 연해서 안보이는 영역)

말씀하신대로 style_dark.css 는 각 스킨마다 다 올린 상태였구요.

이건 style_dark.css를 수정하면 되나요?
전체 504
그누보드5 플러그인 내용 검색

회원로그인

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