Examples Overview | Electron

💡 Electron 공식 문서에서 위와 같이 다양한 기능들에 대한 예제가 준비되어 있습니다. 프로젝트 기획이 실제 어디까지 반영될 수 있는지 감을 잡기 위해 리서치합니다. 개인적으로 볼만한 기능에는 ⭐️을 붙여놨습니다.

⭐️ Dark Mode

Dark Mode | Electron

💡 OS의 Theme에 맞춰 자동으로 앱의 모드를 변환합니다.

Native Interfaces에는 다음과 같은 것들이 포함됩니다: File Picker, Window Border, Dialogs, Context Menus…

macOS 10.14 Mojave부터: system-wide dark mode가 가능해 졌습니다. nativeTheme api를 이용해 이를 사용할 수 있습니다.

CSS의 [prefers-color-scheme](<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme>) 미디어 쿼리와, Electron 모듈의 nativeTheme을 활용함.

// style.css@media (prefers-color-scheme: dark) {  body { background: #333; color: white; }}@media (prefers-color-scheme: light) {  body { background: #ddd; color: black; }}

ipcMain.handle('dark-mode:toggle', () => {
  if (nativeTheme.shouldUseDarkColors) {
    nativeTheme.themeSource = 'light'
  } else {
    nativeTheme.themeSource = 'dark'
  }
  return nativeTheme.shouldUseDarkColors
})

ipcMain.handle('dark-mode:system', () => {
  nativeTheme.themeSource = 'system'
})

Device Access

Device Access | Electron

💡 Electron 역시 web API를 이용해 디바이스 하드웨어에 대한 접근을 제공합니다.

다른 크로미움 기반 브라우저들처럼, Electron 역시 web API를 이용해 디바이스 하드웨어에 대한 접근을 제공합니다. 디바이스 접근에 대해 요청되었을 때, 브라우저에선 유저에게 팝업을 띄워 개별 기기 접근에 대한 권한을 부여받지만, Electron 앱에선 개발자가 직접 선택할 수 있습니다. (자동으로 기기를 고르거나, 개발자가 만든 인터페이스를 통해 특정 디바이스를 유저가 고르게 하거나.)