티스토리 웹페이지 다크모드 적용 방법

안녕하세요. RootKR입니다.

마이크로소프트 윈도우 10와 애플 macOS 운영체제에서 다크 모드 기능을 지원하는데, 웹페이지에서 감지해서 다크모드로 바꿀 수 있습니다.

평상시 제 블로그 화면입니다. 이제 MS 윈도우 10 운영체제 설정에서 다크모드를 활성화해보도록 하겠습니다.

윈도우 10 다크모드를 활성화하면 위 사진처럼 어두운 계열 화면이 나옵니다. 운영체제 다크모드 감지 및 배경&텍스트 컬러 변경 설정을 해보도록 하겠습니다.

다크 모드를 감지하면 어두운 계열 배경과 밝은 계열 텍스트로 바뀌도록 설정을 해줘야 합니다.

CSS를 잘 모르시는 분들을 위해서 간단하게 예를 들어서 설명해드리겠습니다. "운전 면허증 발급 방법과 사용가능 국가"  제목 컬러를 바꿔보도록 하겠습니다.

"운전 면허증 발급 방법과 사용가능 국가" 제목을 마우스 우클릭 눌러서 검사를 클릭해주세요. 우측 Style부분에서 제목 부분 컬러 HEX 코드가 나오는데 임의로 파란색(컬러 HEX값 #3449eb)으로 수정해보겠습니다.

파란색(컬러 HEX값 #3449eb)으로 바꾸었더니 메인 페이지 제목 부분이 모두 파란색으로 바뀌었습니다.

이 방법을 이용해서 일반모드에서 검은색 텍스트와 밝은 배경, 다크 모드에서는 하얀색 텍스트와 어두운 배경이 나오도록 해줘야 합니다.

CSS 편집 페이지에서 아래 소스를 넣어주신 후 중괄호 안에 다크모드가 되면 바뀔 클래스/아이디 값을 넣어주시고 적용해주시면 됩니다.

JB Factory의 JB Skin 103 스킨을 사용 중이시면 2번째 소스를 적용해주세요.

/* 운영체제 다크 모드 감지 */
@media (prefers-color-scheme: dark) {

}

/* 운영체제 다크 모드 감지(JB SKIN 103 전용) */
@media (prefers-color-scheme: dark) {
	.jb-background-main {
		background-color: #000000;
	}
	.jb-cell-content {
		background-color: #222;
		border: 0px;
	}
	.jb-index-table a {
		color: #E0E0E0;
	}
	.jb-index-table:hover a {
		color: #ffffff;
	}
	h3.jb-index-title a {
		color: #E0E0E0;
	}
	h3.jb-index-title:hover a {
		color: #ffffff;
	}
	.jb-pagination ul li a {
		background-color: #222;
		color: #E0E0E0;
	}
	.jb-cell-sidebar {
		background-color: #222;
		border: 1px solid #222;
		color : #E0E0E0;
	}
	.jb-cell-sidebar a {
		color : #E0E0E0;
	}
	.jb-cell-sidebar:hover a {
		color: #ffffff;
	}
	.jb-content-title h2 a {
		color : #E0E0E0;
	}
	.jb-content-title:hover h2 a {
		color: #ffffff;
	}
	body {
		color : #E0E0E0;
	}
	.jb-discuss-table {
		background-color: #333;
		border: 0px;
	}
	.jb-article-tag a {
		background-color: #333;
		color : #E0E0E0;
	}
	.jb-form-textarea, .jb-form-input-text {
		background-color: #333;
	}
	input.jb-form-input-text {
		border: 0px;
	}
	.jb-form-discuss-icon {
		border: 0px;
		background-color: #424242;
	}
	p.jb-discuss-count a {
		background-color: #333;
		border: 0px;
		color : #E0E0E0;
	}
	#name_, #password_, .jb-form-textarea {
		color : #ffffff;
	}
}

윈도우 10 운영체제는 Windows 설정 → '개인 설정' → '색' 순서대로 들어가주신 후 기본 앱 모드 선택에서 '어둡게' 선택해주시면 다크모드가 활성화됩니다.

macOS 운영체제(Mojave 이상부터 가능)는 Apple 메뉴 → 일반 → 화면 모드 옵션 순서대로 들어가주신 후 '다크모드'를 활성화해주시면 됩니다.