html darkmode1 [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. 이전 1 다음