그누보드 다크모드 만들기 정보
그누보드 다크모드 만들기첨부파일
본문
그누보드의 다크모드 입니다.
순정설치후에 다운로드된 파일을 덮어만 써도 기본은 동작할 것 같습니다.
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에 해당 태그를 먼저 집어 넣으면 될 것 같습니다.
색상은 생각나는 데로 넣어서 통일된 느낌은 나지 않으니, 각자 변경해서 사용하세요
21
댓글 전체
2. 올려주신 그대로 업
적용해보니
메인은 잘 되구요
게시판 이동을 햇을때
3.1 게시판 목록
3.2 게시판 상세
3.3 게시판 쓰기/수정
올려주신 영상처럼 3가지에서 일부 적용이 안돼보이는 부분이 나왔습니다.
(하얀색 배경에 글자도 연해서 안보이는 영역)
말씀하신대로 style_dark.css 는 각 스킨마다 다 올린 상태였구요.
이건 style_dark.css를 수정하면 되나요?