css darkmode3 [css] 망할 놈의 다크 모드 대응하기 3부: Chrome으로 확인 1. 개발자도구(F12)를 열어, 더보기 > More tools > Render 선택 2. 하단에 추가된 Render에서 Emulate CSS media feature prefers-color-scheme의 옵션을 dark로 변경 [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' fresh-mint.tistory.com [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통.. 2023. 8. 25. [css] 망할 놈의 다크 모드 대응하기 2부: 이미지 1. 이미지 전환 'prefers-color-scheme: dark'이 지원되는 브라우저에서는 아래와 같이 picture를 통해 간단히 이미지 전환할 수 있다 부수적인 이야기로, 다크모드 관련하여 검색해 보면, 순수한 흰색 배경의 이미지는 피하자는 글을 만날 수 있다. 어두운 배경으로 인해 빛 번짐 현상이 발생하며, 무엇보다 사용자의 눈의 피로도를 높이기 때문이다. 덧붙여, 이미지의 밝기를 줄이고 대비를 높이거나 그레이스케일을 낮춰 보다 피로도를 낮추자는 글들도 심심치 않게 찾을 수 있다. body.dark img { filter: brightness(.8) contrast(1.2); } @media (prefers-color-scheme: dark) { img { filter: brightness(.8.. 2023. 8. 25. [css] 망할 놈의 다크 모드 대응하기 1부 간혹 QA 중 '화면이 완전 다르게 나온다'며 비상모드로 달려오는 경우가 있다. 망할 놈의 다크 모드이다. 급히 코드를 검색해 보면 아래의 코드를 stackoverflow에서 심심치 않게 볼 수 있다. '올레!' 를 외치며 dev에 올려보면, '내가 이제 복붙도 못하는 지경인가' 싶을 것이다. 아니다. 지원율이 너무나 낮을 뿐이다. 현재로서 스크립트 없이 우리가 선택할 수 있는 방법은 prefers-color-scheme 이다. 'prefers-color-scheme' 은 { } 안에 모든 컬러를 재정의하면 된다. .link { color: blue; } @media (prefers-color-scheme: dark) { .link { color: yellow; } } 다만 위와 같이 작성하면, 불필요하.. 2023. 8. 25. 이전 1 다음
