다크모드3 [Javascript]다크 모드(dark) 적용 후 페이지 전환 시 라이트 배경 깜빡이는 문제 다크모드 적용 후 페이지 전환 시 깜빡이는 문제가 생길 수 있습니다. 원인 근본적인 이유는 페이지를 읽는 순서와 적용시점 때문입니다. 책을 읽을 때 위에서부터 읽듯이 웹페이지도 위에서 부터 순차적으로 코드를 읽고 실행을 시킵니다. 다크모드 적용하는 방법은 다양합니다만, html 혹은 body에 dark 관련 class를 추가해서 제작을 했다면, 스크립가 다크를 감지해서 먼저 코드상에 적용이 되어야 합니다. ex) 그리고 css에 적용을 했을때는 [color-thema="dark"] body {background:var(--background)} 이런 식으로 적용이 되겠죠? 다른 방식으로는 body class="dark-mode" 이렇게 될 수 도 있겠네요. 해결방법은 웹페이지 로딩이 다 되고 나서 적용이.. 2023. 6. 4. [잡담]다크 모드 어떻게 생각하시나요? 요즘 휴대폰, 컴퓨터, 블로그, 사이트, 어플 등 여기저기 다크 모드 기능을 적용 중이다. "다크 모드 어떻게 생각하시나요?"라는 제목의 의미는 여러 가지가 있지만, 묻고자 하는 질문은 '눈'의 피로도와 '글의 가독성'이다. 사실 개인적으로는 다크 모드를 선호하지는 않는다. 별다른 이유는 없고, 나 같은 경우는 어두운 화면에서 눈의 피로도가 더 심하게 느껴졌기 때문이다. 주변이 어두웠을때 다크 모드는 확실히 눈의 피로감을 덜 주는데 주변이 밝은 상태에서의 다크 모드였을 때 그렇다는 이야기다. 다크 모드였을때 편할 때가 있고, 아닐 때가 있다는 뜻이다. 사람마다 개인차이는 있겠지만, 모니터를 계속 보는 직업이고 더군다나 어두운 곳에서 휴대폰을 자주 보는 습관이 있어서 더욱더 안 좋아진 건 사실이다. 물론 .. 2023. 5. 21. [javascript]윈도우(맥OS) or 모바일 다크모드일때 dark-style.css 호출하기 윈도우(맥OS)나 모바일 다크모드일때 자동으로 감지 후 dark-style.css를 호출하는 방법입니다. JAVASCRIPT 위처럼 다크모드일때 웹페이지에서 dark-style.css를 호출하기위해 javascrpt에 아래 코드를 삽입합니다. if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { // 다크 모드이므로 dark.css를 호출합니다. const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'dark.css'; document.head.appendChild(link); } HTML html을 보시면 아래와.. 2023. 5. 11. 이전 1 다음 반응형
