diff --git a/src/battery_dark.png b/src/battery_dark.png new file mode 100644 index 0000000..856702e Binary files /dev/null and b/src/battery_dark.png differ diff --git a/src/battery.png b/src/battery_light.png similarity index 100% rename from src/battery.png rename to src/battery_light.png diff --git a/src/index.css b/src/index.css index ed92011..2861382 100755 --- a/src/index.css +++ b/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; -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 9bbf4ab..f6199fc 100755 --- a/src/index.js +++ b/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}%` -}) \ No newline at end of file +}) diff --git a/src/main.js b/src/main.js index 34e92eb..3e82a21 100755 --- a/src/main.js +++ b/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) \ No newline at end of file +}, 3000)