다크 모드

다크 모드 (Dark)

다크 모드는 모든 UI 요소가 어둡게 표현되는 테마를 말해요.

출처: 문서

본문

언제 사용하나요

  • 어두운 환경에 있을 때 다크 모드를 권장해요. 눈의 피로를 줄여 주거든요.
  • 다크 모드는 중요한 콘텐츠를 강조하는 데 아주 좋아요.

    영화관에서 불을 끄는 것과 비슷한 효과예요.

디자인 원칙

  1. 콘텐츠의 편안함 (Comfort of content)

    다크 모드에서 대비가 너무 강한 색이나 콘텐츠는 피하세요. 계속 쓰다 보면 피로감이 오거든요.

  2. 정보의 일관성 (Consistency of Information)

    다크 모드의 정보 내용은 라이트 모드와 일관성을 유지해야 해요. 초기화된 계층 관계를 깨뜨리면 안 돼요.

색 (Color)

색을 적용할 때 12세트의 기본 스와치를 기준으로 삼고, 더 긴 규칙 처리를 결합해 서로 다른 환경색 아래에서 색이 더 잘 어우러지도록 해요.

색 팔레트 (Color Palette)

색 팔레트 생성기 (Color Palette Generator)

추가로 다크 색상의 색 팔레트를 만들어 주는 도구 세트도 제공하고 있어요. 기본 색과 페이지의 배경색을 선택하면, 다크 모드용 색 팔레트가 생성돼요.

더 알아보기 (Learn more)