그누보드 다크모드 만들기
그누보드의 다크모드 입니다.
순정설치후에 다운로드된 파일을 덮어만 써도 기본은 동작할 것 같습니다.
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로 접속을 하면 위치를 물어봅니다.

다크모드에서 화면이 바뀔때마다 번쩍이는 현상은 남아 있습니다.
첫 로딩시 body에 태그가 없이 로드된 후에 자바스크립트가 돌면서 모드를 변경하다 보니 그 순간 번쩍하게 보입니다.
이것은 쿠키로 해결하면 될 것 같습니다. 각 모드가 변경될때 (onToggle, onChange, onAuto)에서
쿠키에 값을 설정하고, PHP가 읽어서 초기에 body에 해당 태그를 먼저 집어 넣으면 될 것 같습니다.
색상은 생각나는 데로 넣어서 통일된 느낌은 나지 않으니, 각자 변경해서 사용하세요
댓글 15개
2. 올려주신 그대로 업
적용해보니
메인은 잘 되구요
게시판 이동을 햇을때
3.1 게시판 목록
3.2 게시판 상세
3.3 게시판 쓰기/수정
올려주신 영상처럼 3가지에서 일부 적용이 안돼보이는 부분이 나왔습니다.
(하얀색 배경에 글자도 연해서 안보이는 영역)
말씀하신대로 style_dark.css 는 각 스킨마다 다 올린 상태였구요.
이건 style_dark.css를 수정하면 되나요?
게시판 목록
그누보드5 플러그인
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 381 | 4년 전 | 3501 | ||
| 380 | 4년 전 | 5912 | ||
| 379 | 4년 전 | 2924 | ||
| 378 | 4년 전 | 4476 | ||
| 377 | 4년 전 | 6807 | ||
| 376 |
|
4년 전 | 5124 | |
| 375 | 4년 전 | 3390 | ||
| 374 |
|
4년 전 | 4629 | |
| 373 | 4년 전 | 3581 | ||
| 372 |
|
4년 전 | 6828 | |
| 371 | 4년 전 | 5214 | ||
| 370 | 4년 전 | 5678 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기