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

그누보드5 플러그인

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

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

그누보드 다크모드 만들기

첨부파일

다크모드.zip (13.6K) 83회 다운로드 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를 수정하면 되나요?
전체 503
그누보드5 플러그인 내용 검색

회원로그인

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