그누보드 다크모드 만들기

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

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

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에 해당 태그를 먼저 집어 넣으면 될 것 같습니다.

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