DARK MODE!!!

Booligoosh · Dec 19, 2018 · 5b72b43 · 5b72b43
1 parent 7c4f857
commit 5b72b43
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <script src="vue.min.js"></script>
 <link rel="stylesheet" href="style.css">
 
-<div id="app" v-on:dragover="dragover = true" v-on:dragenter="dragover = true" v-on:dragleave="dragover = false" v-on:dragend="dragover = false" v-on:drop="dragover = false; dropEvent($event)" v-bind:style="typeof taskComposer.attachment !== 'undefined' ? `background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url(${taskComposer.attachmentURL})` : ''">
+<div id="app" v-bind:class="darkMode ? 'dark-mode' : ''" v-on:dragover="dragover = true" v-on:dragenter="dragover = true" v-on:dragleave="dragover = false" v-on:dragend="dragover = false" v-on:drop="dragover = false; dropEvent($event)" v-bind:style="typeof taskComposer.attachment !== 'undefined' ? `background-image: linear-gradient(rgba(${darkMode?'23,27,33':'255,255,255'},0.75),rgba(${darkMode?'23,27,33':'255,255,255'},0.75)), url(${taskComposer.attachmentURL})` : ''">
     <div class="drag-overlay" v-show="dragover">Drop your image here!</div>
     <form class="composer" action="javascript:void(0)" v-on:submit="createTask(taskComposer.content, taskComposer.done, taskComposer.in_progress, taskComposer.attachment)">
         <select class="status" v-on:input="taskComposer.done = $event.target.value == 'done'; taskComposer.in_progress = $event.target.value == 'in_progress'" v-bind:style="taskComposer.done ? '' : 'background: #f39c12'">
@@ -18,10 +18,13 @@
 </div>
 
 <script>
-    require('electron').remote.getGlobal('goNormalSize')();
+    var electron = require('electron');
+    var ipcRenderer = electron.ipcRenderer;
+
+    electron.remote.getGlobal('goNormalSize')();
 
     var client_id = 'YBKDIKB3DJbyZdwkFsRCIuJscq4Xy5YNuIyAwqPG';
-    var token = require('electron').remote.getGlobal('token');
+    var token = electron.remote.getGlobal('token');
 
 
     if(typeof token === 'undefined') {
@@ -32,8 +35,13 @@
         setInterval(checkForNewUpdate,10*60*1000); // Every 10 minutes
     }
 
+    ipcRenderer.on('darkModeChange', (event, arg) => {
+        data.darkMode = electron.remote.getGlobal('darkMode');
+    })
+
     var data = {
         dragover: false,
+        darkMode: electron.remote.getGlobal('darkMode'),
         taskComposer: {
             content: '',
             done: true,
@@ -86,17 +94,17 @@
         document.body.innerHTML = '';
         document.body.style.background = 'linear-gradient(#000a12 60px, #ecf0f1 60px)';
 
-        var storeAppHref = require('electron').remote.getGlobal('storeAppHref');
+        var storeAppHref = electron.remote.getGlobal('storeAppHref');
         storeAppHref(window.location.href);
-        require('electron').remote.getGlobal('goFullscreen')();
+        electron.remote.getGlobal('goFullscreen')();
 
         window.location = `https://api.getmakerlog.com/oauth/authorize/?client_id=${client_id}&scope=tasks:write&response_type=token`;
     }
 
     function checkForNewUpdate() {
         return myFetch('https://api.github.com/repos/Booligoosh/makerlog-menubar/releases/latest')
         .then(latest => {
-            var currentNum = Number(require('electron').remote.getGlobal('appVersion').replace(/\./g,''));
+            var currentNum = Number(electron.remote.getGlobal('appVersion').replace(/\./g,''));
             var latestNum = Number(latest.tag_name.replace('v','').replace(/\./g,''));
 
             if(latestNum > currentNum) {

diff --git a/main.js b/main.js
@@ -2,6 +2,8 @@ const electron = require('electron')
 const menubar = require('menubar')
 const Menu = electron.Menu;
 const globalShortcut = electron.globalShortcut;
+const systemPreferences = electron.systemPreferences;
+const ipcMain = electron.ipcMain;
 
 var mb = menubar({
     height: 16*1.5*3,
@@ -12,6 +14,16 @@ var mb = menubar({
 })
 
 global.appVersion = electron.app.getVersion();
+
+global.darkMode = (systemPreferences.isDarkMode() === true);
+systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => darkModeChange());
+
+function darkModeChange() {
+    console.log('CHANGE!');
+    global.darkMode = (systemPreferences.isDarkMode() === true);
+    mb.window.webContents.send('darkModeChange', '');
+}
+
 global.storeToken = function(token) {
     global.token = token;
 }

diff --git a/style.css b/style.css
@@ -19,6 +19,10 @@ body {
     background-position: center center;
 }
 
+#app.dark-mode {
+    background-color: #171b21; /* rgb(23, 27, 33) */
+}
+
 .composer {
     position: relative;
     height: 3em;
@@ -47,6 +51,10 @@ body {
     border: none;
 }
 
+#app.dark-mode .composer .content {
+    color: white;
+}
+
 .composer .status {
     left: 0;
 }