다크모드를 구체적으로 아미나에서 어떻게 적용해야할지 몰라
기존의 colorset.css 과, 임의로 만든 다크모드용 dark_colorset.css (기존의 컬러셋 내용에 body.dark-mode 클래스명을 붙여서 구분)
을 토글버튼으로 로컬스토리지를 이용해서 스왑하려고 일단 계획을 잡았어요
이걸 하려다보니 id가 필요할듯 싶어서,
thema.php
에서
기존에 쓰이던 컬러셋부분에
$add_stylesheet .= PHP_EOL.'';
id를 하나 추가했고
다크모드는 dark-mode-css id를 부여해서, 스크립트로 제어를 해보고자 했는데요.
1.head.php에서
const darkModeEnabled = localStorage.getItem('darkMode') === 'enabled';
const themeCss = document.getElementById('light-mode-css');
if (darkModeEnabled) {
if (themeCss) {
themeCss.href = '/dark_colorset.css';
themeCss.id = 'dark-mode-css';
}
document.body.classList.add('dark-mode');
}
2.tail.php
$(document).ready(function() {
$('#darkModeToggle').on('click', function() {
const darkModeEnabled = localStorage.getItem('darkMode') === 'enabled';
const themeCss = document.getElementById(darkModeEnabled ? 'dark-mode-css' : 'light-mode-css');
if (darkModeEnabled) {
// 다크 모드 해제할때 다크제거
if (themeCss) {
themeCss.href = '/colorset.css';
themeCss.id = 'light-mode-css';
}
localStorage.removeItem('darkMode');
$('body').removeClass('dark-mode');
} else {
// 다크 모드 활성화
if (themeCss) {
themeCss.href = '/dark_colorset.css';
themeCss.id = 'dark-mode-css';
}
localStorage.setItem('darkMode', 'enabled');
$('body').addClass('dark-mode');
}
});
});
로 해서 만들고 있는데요. 일딴 동작도 하고, 스왑도 잘 이루어지긴 하는데요.
컬러셋을 다크모드로 만들다보니, 고민이 생긴것이
부트스트랩, 위젯, apms.css나, 각 보드스킨, 멤버스킨등에 들어가 있는 부분들에 대해서도, 노출되는 부분들에 대해서, 다크모드가 필요하다보니
일딴, 필요한 부분들만 모아서 dark_colorset.css 에서 때려넣어서 클래스 붙이고 덮어쓰기로 하면 일딴 작동은 하는것으로 보여집니다.
그런데 각종 css등이 합류하다보니 점점 css양이 많아지고, 복잡해져서, 필요한것들만 가져와서 붙여넣고 클래스 설정하고 색상설정하다보니
3천줄이 훌쩍 넘어가버려서..
dark_colorset.css에선 일딴 이곳에서나마 css변수로 :root 로 css를 최대한 간략하게
잡아볼까하고 다시 정리해 나가보고 있는데..
그럼에도 개발자모드에서 볼때마다, 많은 덮어쓰기가 이루어지는것을 볼수가 있고
이게 지금 할수 있는 최선의 방법인가 의문점이 들어서요.
검색해서 주먹구구식으로 하는데다, 아미나에서 쓰시는분들을 본적이 없어서(플러그인으로 쓰는분들만 간혹봄),
이게 맞으려나 싶은 의문점이 자꾸 들어서 조언을 얻어보려고 글을 남겨봅니다.