Mojave 로 탑재된 「Dark Mode」의 대응에 대해서, 억제해 두는 곳의 메모입니다.

디자인으로 억제하는 곳

Dark Mode와 Light Mode 각각의 색 구성표를 고려해야합니다

복잡한 색 구성표 자산을 피하는 것도 하나

디자인 자산이 늘어나면 관리 비용도 늘어나므로 하나의 자산을 프로그래밍 방식으로 그 색 구성표에 칠할 수 있습니다

.

Human Interface Guideline에서 예제에 올라있는 "자산을 별도로 만들어야합니다"예제

Light Mode 때 이너 그림자로 표현하고 있는 곳은, Dark Mode 때 이너 글로우로 표현하도록(듯이) 한다

Dark Mode에서 내부 그림자를 사용하면 에셋이 어두운 배경에 녹아 버립니다

HIG에서 설명했으므로 자세한 내용은 필수 확인

소극적인 해결책 : 앱에 "Dark Mode를 지원하지 않음"이라는 설정을 할 수 있으므로 일단은 이것으로 낫다

구현으로 억제하는 곳

이미지를 Dark Mode와 Light Mode로 전환

Assets.xcassets에서 관리하는 이미지의 경우 Appearance를 Any, Dark로 설정하여 각 슬롯에 이미지를 할당합니다 (Dark Appearance = Dark Mode 용, Any Appearance = 현재 Light Mode 용).



현재 모양 모드(다크 모드 여부) 확인

let appearanceName = NSApplication.shared.effectiveAppearance.name

switch appearanceName {
case .aqua:
    print("Light Mode")
    label.textColor = NSColor.red
case .darkAqua:
    print("Dark Mode")
    label.textColor = NSColor.blue
default:
    assertionFailure()
}

코드로 전환하는 경우는 외관 모드를 확인한 후 적용합니다.

외관 모드가 변경되었음을 감지

NSView.viewDidChangeEffectiveAppearance()를 override 합니다.

override func viewDidChangeEffectiveAppearance() {
    print(NSApplication.shared.effectiveAppearance.name)
}

macOS 설정 화면에서 [모양 모드]를 변경하면 앱에서의 표시도 전환되는지 확인할 수 있습니다.

소극적인 해결책: 외관 모드를 조명만 지원

NSApplication.shared.appearance = NSAppearance(named: .aqua)

OS에서 Dark Mode로 설정해도 앱은 Light Mode 느낌으로 표시됩니다.
OS가 Dark Mode로 설정되어 있는 경우, 이 코드가 실행되고 나서 화면에 반영될 때까지 일순간 Dark Mode로 표시되어 버리므로, 버그하고 있는 것처럼 보여 버릴지도….

샘플

여기에 위를 시도 할 수있는 샘플 코드를 넣었습니다.
htps : // 기주 b. 코 m / 훗 b19 / 다 rk 모시 mp ぇ 아 p 마코 S

읽어 보면 좋은 자원

디자인: Human Interface Guideline - Dark Mode

디자인: Dark Mode List (iOS에서 어두운 모드를 직접 구현하는 앱의 UI 아카이브 카탈로그 사이트)

디자인: Material Design - Dark theme (Material Design의 색 구성표를 참조하는 것도 좋을 것 같음)

구현: Apple Developer Documentation - Supporting Dark Mode in Your Interface