Implement auto dark mode

src/index.css

@@ -27,7 +27,16 @@ body,
     width: 100%;
     padding: 0;
     margin: 0;
-    background: #F7FFF7;
+}
+
+#app.dark {
+  background: #333;
+  color: #f2f2f2;
+}
+
+#app.light {
+  background: #F7FFF7;
+  color: #3B252C;
 }
 
 hr {
@@ -136,4 +145,4 @@ input[type="checkbox"]:focus {
 input[type="checkbox"]:checked {
     background-color: #3F8EFC;
     border-color: #3473CC;
-}
+}

src/index.js

@@ -3,6 +3,7 @@ const {
   shell,
   remote
 } = require('electron')
+const darkMode = require('dark-mode')
 
 let rangeSlider
 let autoLaunch
@@ -14,6 +15,14 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('close').addEventListener('click', () => {
     remote.getCurrentWindow().hide()
   })
+
+  darkMode.isDark().then((dark) => {
+    if (dark) {
+      document.querySelector('#app').classList.add('dark')
+    } else {
+      document.querySelector('#app').classList.add('light')
+    }
+  })
 })
 
 function iniSlider() {
@@ -58,4 +67,4 @@ ipcRenderer.on('launch', (event, checked) => {
 
 ipcRenderer.on('battery', (event, value) => {
   document.getElementById('currentBattery').innerText = `${value}%`
-})
+})

src/main.js

@@ -4,6 +4,7 @@ const {
   ipcMain,
   Tray,
   nativeImage,
+  nativeTheme,
   Notification,
   electron
 } = require('electron')
@@ -40,17 +41,32 @@ app.on('window-all-closed', () => {
   app.quit()
 })
 
-const createTray = () => {
-  const icon = nativeImage.createFromPath(path.join(__dirname, 'battery.png')).resize({
+const createIcon = (image) => {
+  return nativeImage.createFromPath(path.join(__dirname, image)).resize({
     width: 24,
     height: 24
   })
+}
+
+const createTray = () => {
+  let icon
+  if (nativeTheme.shouldUseDarkColors) {
+    icon = createIcon('battery_dark.png')
+  } else {
+    icon = createIcon('battery_light.png')
+  }
   tray = new Tray(icon)
   tray.on('right-click', toggleWindow)
   tray.on('double-click', toggleWindow)
   tray.on('click', toggleWindow)
 }
 
+nativeTheme.on('updated', function() {
+  tray.destroy()
+  createTray()
+  window.reload()
+})
+
 const getWindowPosition = () => {
   const windowBounds = window.getBounds()
   const trayBounds = tray.getBounds()
@@ -72,7 +88,10 @@ const createWindow = () => {
     frame: false,
     fullscreenable: false,
     resizable: false,
-    transparent: true
+    transparent: true,
+    webPreferences: {
+      nodeIntegration: true
+    }
   })
   window.loadURL(`file://${path.join(__dirname, 'index.html')}`)
 
@@ -82,9 +101,9 @@ const createWindow = () => {
 
   window.webContents.on('did-finish-load', sendCurrentValues)
 
-  // window.openDevTools({
-  //   mode: 'detach'
-  // })
+  window.openDevTools({
+    mode: 'detach'
+  })
 }
 
 const toggleWindow = () => {
@@ -150,4 +169,4 @@ setInterval(() => {
 
     window.webContents.send('battery', level)
   }).catch(() => console.log('Could not get Battery level'))
-}, 3000)
+}, 3000)