Skip to main content

nativeTheme

Chromium의 네이티브 컬러 테마를 읽고 변경 사항에 대응한다.

프로세스: Main

이벤트​

nativeTheme 모듈은 다음과 같은 이벤트를 발생시킨다:

이벤트: 'updated'​

기본 NativeTheme에서 무언가 변경되었을 때 발생한다. 일반적으로 이는 shouldUseDarkColors, shouldUseHighContrastColors, 또는 shouldUseInvertedColorScheme 값 중 하나가 변경되었음을 의미한다. 어떤 값이 변경되었는지 확인하려면 이 값들을 직접 확인해야 한다.

속성​

nativeTheme 모듈은 다음과 같은 속성을 가진다:

nativeTheme.shouldUseDarkColors 읽기 전용​

이 속성은 운영체제나 Chromium이 현재 다크 모드를 활성화했는지, 또는 다크 스타일 UI를 표시하도록 설정되었는지 여부를 나타내는 boolean 값이다. 이 값을 수정하려면 아래의 themeSource를 사용해야 한다.

nativeTheme.themeSource는 system, light, dark 중 하나의 값을 가질 수 있는 string 타입의 프로퍼티다. 이 프로퍼티는 Chromium이 내부적으로 사용하는 값을 재정의하고 대체하는 데 활용된다.

이 프로퍼티를 system으로 설정하면 재정의가 제거되고 모든 것이 운영체제의 기본값으로 초기화된다. 기본적으로 themeSource는 system으로 설정되어 있다.

themeSource를 dark로 설정하면 다음과 같은 효과가 발생한다:

  • nativeTheme.shouldUseDarkColors에 접근할 때 true가 반환된다.
  • Linux와 Windows에서 Electron이 렌더링하는 모든 UI(컨텍스트 메뉴, 개발자 도구 등)가 다크 모드로 표시된다.
  • macOS에서 운영체제가 렌더링하는 모든 UI(메뉴, 윈도우 프레임 등)가 다크 모드로 표시된다.
  • prefers-color-scheme CSS 쿼리가 dark 모드와 일치한다.
  • updated 이벤트가 발생한다.

themeSource를 light로 설정하면 다음과 같은 효과가 발생한다:

  • nativeTheme.shouldUseDarkColors에 접근할 때 false가 반환된다.
  • Linux와 Windows에서 Electron이 렌더링하는 모든 UI(컨텍스트 메뉴, 개발자 도구 등)가 라이트 모드로 표시된다.
  • macOS에서 운영체제가 렌더링하는 모든 UI(메뉴, 윈도우 프레임 등)가 라이트 모드로 표시된다.
  • prefers-color-scheme CSS 쿼리가 light 모드와 일치한다.
  • updated 이벤트가 발생한다.

이 프로퍼티는 사용자에게 세 가지 옵션을 제공하는 전형적인 "다크 모드" 상태 머신과 함께 사용해야 한다.

  • 운영체제 설정 따르기 --> themeSource = 'system'
  • 다크 모드 --> themeSource = 'dark'
  • 라이트 모드 --> themeSource = 'light'

응용 프로그램에서는 항상 shouldUseDarkColors를 사용해 어떤 CSS를 적용할지 결정해야 한다.

nativeTheme.shouldUseHighContrastColors macOS Windows Readonly​

boolean 타입으로, 현재 운영체제나 크로미엄에서 고대비 모드가 활성화되었는지, 혹은 고대비 UI를 표시하도록 지시되었는지를 나타낸다.

nativeTheme.shouldUseInvertedColorScheme macOS Windows 읽기 전용​

이 속성은 boolean 타입으로, 현재 운영체제나 Chromium이 반전된 색상 스키마를 사용 중인지, 또는 반전된 색상 스키마를 사용하도록 지시받았는지를 나타낸다.

nativeTheme.inForcedColorsMode Windows 읽기 전용​

이 속성은 Chromium이 시스템 접근성 설정에 의해 제어되는 강제 색상 모드(forced colors mode) 상태인지를 나타내는 불리언 값이다. 현재 Windows의 고대비 모드가 강제 색상 모드를 활성화하는 유일한 시스템 설정이다.

nativeTheme.prefersReducedTransparency 읽기 전용

이 boolean 값은 사용자가 운영체제의 접근성 설정을 통해 투명도 감소 옵션을 선택했는지 여부를 나타낸다.