css를 활용한 다크모드 이미지 자동 대응

소개

다음 영상을 보시면 무슨 말인지 쉽게 이해할 수 있습니다.

아이디어

https://github.com/joonas-yoon/boj-extended?tab=readme-ov-file

GitHub - joonas-yoon/boj-extended: 백준 온라인 저지(BOJ)를 확장된 기능과 함께 사용해보세요. 기능 요청

 

코드

아래 코드는 본인이 사용하고 있는 블로그 스킨에 맞게 수정해서 사용하세요.

저는 berry skin v4를 사용하고 있어서 다음과 같은 코드로 작성했습니다.

/* 특정 경우에 이미지 색을 반전시키는 스타일 */
img {
    filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%);
    -webkit-filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%);
    -moz-filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(72.5%);
    transition: 0.2s ease-out;
}

/* 이미지 색 반전이 되면 안되는 클래스 목록 */
.dark img,
.img-wrapper img,
.desktop-header img,
.intro-card__img-wrapper img {
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    transition: none;
}

 

참고할 사항

회고록 같이 사람 얼굴이 나오는 경우에 좀 무섭게 변합니다.

 

그런 경우에는 게시글의 html 수정에서 다음과 같은 코드를 삽입하면 됩니다.

<style> 
  img { 
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    transition: none; 
  } 
</style>

 

아래 글을 참고하세요.

티스토리 특정 게시글 광고 제거하는 법