From 94bac96245112893020e2461c647b2a60ecb2b0f Mon Sep 17 00:00:00 2001 From: "3m5.Danny Spina" Date: Wed, 4 Mar 2020 17:18:57 +0100 Subject: [PATCH] Implement auto dark mode --- src/battery_dark.png | Bin 0 -> 2800 bytes src/{battery.png => battery_light.png} | Bin src/index.css | 13 ++++++++-- src/index.js | 11 ++++++++- src/main.js | 33 +++++++++++++++++++------ 5 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 src/battery_dark.png rename src/{battery.png => battery_light.png} (100%) diff --git a/src/battery_dark.png b/src/battery_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..856702ef1404c784ff63aa9c6fe2fe41648a335b GIT binary patch literal 2800 zcmeHHi&s-;5}$i>As0wUqC6s|c$S9=PgySBD#adp)ad`7`weI9i!Rz#xcDk~^Tlxz&i&JAt%pXfa&Cv)e1GxM9@ z{N}65%9twl4)O*7aaw9}HUNz#4Xh{rS&RQ=2cXt3PD;v3OG@H&D+>!2FZ~lh*tW85 zQ&L+rigS54rlrhL^m6yN?(wehm=XTjoDHEl?9s&izTF@J_H|u)FhQTW73hQO?c+k8zORbh&6!NWrT8`ThRo zjMOZ@Kk0CFOxm|%`dn<&??J6bnD!-z{A_Wm1T~cIx~G=X-G%@p9caK zHfAsATlXTc@`e4vr1r(WW2#anBvh~-?|nYQutnZDIXvL{k%s<$NppGCJn!ZU+6TEB z|DccCB~Ib#<43*!SlhTai+;RzMO}@IGx|h6`D~!9H~R8OlS?$O=MDW)>Qd?U`Og+z z8?#$K+Gu>b=t8irSs;oZ_0RC*+Z(>l3WH}0t?4mZOTgo~OJ4qXx2;F8bFU*%xc{>P?Q72WQ%|6*v~p{OMDZArG=4``Zu07of*Wm-@jfoM1cu zqY}fuEJmlWC@noj_&~sj-<%v)y0Zj;?Mq8e$SJH zhCSPkv`L~2On{Gd_^AyRK>kr3%75As~7Vb;^8egVhiQ(6Zlr4E7039KOt zXwi9UZ<2Emb#+tzd-5hJH> zX=tKP`MSe$Ypw!p%~4yP1}i`cUwj<88+(GSbn+x#3UvlcWkb*k^WG*33 zF1ZHEYe$lg9$pdG_ig^zO0|-DuTF$UJTmI_c^5mqMMVPDe*#)8?bIGOJoOPN)J&7 zeXflLK$hN=5ZT~IFD3Lb3Lpy6K=Gt@7u@o4+W-uJN)N?(LYV((jvOz7rt&R868zOd#J7A$dN9ERUvc~z=k-B9gP^jCy%prxD>-eM^V z2b3GeFwnm}&`W!{10yqB8kN-p{Albx! z3)KL*p(cRiDk`KHct6e=5A2=SB^&^k3Z}jL^rY(!&7wjyDjF%^vskUq1jJN0Uy0|V zov<8G6%Jc~200rIrXFP&AFxyBCZWscnnxRO|H44iH8))Lo!k@Ue6f_yb!2-QV^+{|=A zO_8E4gwLHYTS8rW$GK2gc~xP$jruYpV3qxcJ2nJS%{N`=L>4n#W~CIgjxB08A{xF~ zX-6Qfyq`fo9{DcLi9@MyA3t>C^m8GD9Amq0)nFFF?L%ABYb|sb1`h<&#Y5VXk@cXGa|h=-3{hS~gA?9B~S3b?1d;{MUp5IX`?rl`N( z;G0!B5jK=R8*2O;z&<^SM(Z$O*ED$A3nHDopb%Gv%TyMBY=s|RB8ty6OFiV{9>9rX z=j)w@!}FIgAiBWQk37ZoS|fnhABw~;gHQF^JeRyk>?a~LePyooz5-c0g_ z`g@jyIFd&HyFN5DsUK!k0qrsE1|#{4Fvzdc7ClW>^+7 zfXfw1+UMclSlqGURm;uLHO3_j#ms`1%rJ;AIqOZ67|*UJM#VV}uvK8{=@OHONYtMU$P_7@dJN2(-Tkj@ z@we4E{2cS6U>5`C1|8lT__}M!=%LM)Ha|*qx)blO6J-_OBtds(ucxUI$hD@3OkeWB z{`aLIFI_i6goAdf567kpG&O3W2ojXLUY+y@O@ZjsrmhC(rzxmiefnJ*NWQJ~rPAnu z>(PZkvy7C^2Nzf$3CVaw9R#7c$)|lAkh3UQPT>Rs-L8n?@4@aDrI>Hwd5tH*HM30> zXjstNS}2a+%xfT}K<-)uECnKc^e<@>0a}#45CY_$L`bAy>fb2Ph(K%Yra0Uw$32iT n;HjiI5s0RsK!1CFWnlbkfsFWH@GsWH@V>N^jN}7}+KT@Hb}2B% literal 0 HcmV?d00001 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)