코드 두 줄로 다크모드 지원하기

코드 두 줄로 다크모드 지원하기

다크 모드를 지원하려다 보면 예상보다 많은 공수가 드는 경우가 많습니다.
기존 컬러에 맞춰 다크 모드용 색상을 정의해야 하는데, 디자이너님에게 일일이 요청해 컬러를 정리하고, 그걸 또 코드에 녹여 컬러 맵을 만들고 적용하는 과정이 복잡하고 시간이 많이 걸리죠.

아래 두줄을 개발자도구 콘솔란에 입력해보세요!

document.documentElement.style.filter = "invert(100%) hue-rotate(180deg)";
document.documentElement.style.webkitFilter = "invert(100%) hue-rotate(180deg)";

이 코드만 추가하면 웹 페이지 전체의 색상이 반전되어, 기본적인 다크 모드처럼 보이게 됩니다. 컬러맵이나 복잡한 설정 없이도, 지금 바로 다크 모드를 적용해보세요!

코드설명 ✨
1. invert(100%): invert 필터는 색상을 반전시킵니다. 즉, 흰색은 검정색으로, 밝은 색은 어두운 색으로 변환됩니다.
2. hue-rotate(180deg): 색상의 색조를 180도 회전시키는 필터입니다.

AS_IS

TO_BE