css를 활용한 다크모드 이미지 자동 대응How to.2024. 4. 22. 18:10
Table of Contents
소개
다음 영상을 보시면 무슨 말인지 쉽게 이해할 수 있습니다.
아이디어
https://github.com/joonas-yoon/boj-extended?tab=readme-ov-file
코드
아래 코드는 본인이 사용하고 있는 블로그 스킨에 맞게 수정해서 사용하세요.
저는 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>
아래 글을 참고하세요.
반응형
'How to.' 카테고리의 다른 글
[개발자 세팅 공유] 집에서 누워서 코딩하기 (0) | 2024.04.08 |
---|---|
티스토리 특정 게시글 광고 제거하는 법 (0) | 2024.03.14 |
vim adventue 6 - 3 solution (0) | 2023.10.28 |
vim adventure 6 - 1 solution (0) | 2023.10.28 |
Github Convention 깃헙 컨벤션 정리/모음 (0) | 2023.08.21 |
@임채성 :: 푸르고 개발 블로그
취미로 쓰는 개발 블로그입니다. 문의: puleugo@gmail.com