다크모드?

다크모드는 평소 밝은 디자인이 위주였던 근래(?)의 디자인을 기기의 수명과 사용자의 눈 건강을 위하여 어두운 디자인으로 고려된 모드를 의미하는데요 오늘은 간단한 방법을 통해 각자의 사이트에 손쉽게 적용 할 수 있는 방법을 가져와봤어요!

CSS : 적용법

사용자의 모바일/컴퓨터의 시스템 테마에 맞춰 각 css 스타일이 적용될 수 있도록prefers-color-scheme를 사용합니다.

@media(prefers-color-scheme: dark){
    background-color: #12121a; /* !important는 사용자 개개인의 적용 가능 여부에 따라 사용하세요 ^^b! */
}

CODEPEN : 적용예시

벌써 끝이네요! 생각보다 어려운것이 없습니다. 상단의 css만 적용해준다면 그 이후는 각자의 블로그에 맞는 클래스/id에 맞는 스타일을 적용시켜준다면 끝입니다.