macos bugfixes: #151 dark mode detection in night shift + adding menubar to extensions menu + padding-left with tabs to give traffic lights space

repo/core/css/menu.css

@@ -117,6 +117,9 @@ s {
 #titlebar .window-buttons-area:empty {
   display: none;
 }
+[data-platform='darwin'] #titlebar {
+  height: 2.65em;
+}
 
 /* alerts */
 

repo/core/css/tabs.css

@@ -75,6 +75,9 @@ body,
   flex-direction: column;
 }
 
+[data-platform='darwin'] #titlebar {
+  padding-left: 4em;
+}
 #titlebar::before {
   content: '';
   position: absolute;

repo/core/enhancerMenu.js

@@ -14,6 +14,8 @@ const store = require('../../pkg/store.js'),
   { toKeyEvent } = require('keyboardevent-from-electron-accelerator');
 
 window['__start'] = async () => {
+  document.body.setAttribute('data-platform', process.platform);
+
   // mod loader
   const modules = helpers.getEnhancements();
   if (modules.loaded.length)

repo/core/render.js

@@ -972,6 +972,8 @@ module.exports = (store, __exports) => {
 
     window['__start'] = () => {
       document.head.innerHTML += `<link rel="stylesheet" href="${__dirname}/css/tabs.css" />`;
+      document.body.setAttribute('data-platform', process.platform);
+
       const modules = getEnhancements();
       for (let mod of modules.loaded) {
         for (let font of mod.fonts || []) {

repo/night-shift/mod.js

@@ -12,7 +12,7 @@ module.exports = {
   name: 'night shift',
   desc:
     'sync dark/light theme with the system (overrides normal theme setting).',
-  version: '0.1.1',
+  version: '0.1.2',
   author: 'dragonwocky',
   hacks: {
     'renderer/preload.js'(store, __exports) {
@@ -23,19 +23,22 @@ module.exports = {
           const notion_elem = document.querySelector('.notion-app-inner');
           if (!notion_elem) return;
           clearInterval(attempt_interval);
-          process([{ target: notion_elem }]);
+          handle([{ target: notion_elem }]);
-          const observer = new MutationObserver(process);
+          const observer = new MutationObserver(handle);
           observer.observe(notion_elem, {
             attributes: true,
             subtree: true,
           });
-          function process(list, observer) {
+          function handle(list, observer) {
             const mode = `notion-app-inner notion-${
               window.matchMedia('(prefers-color-scheme: dark)').matches
                 ? 'dark'
                 : 'light'
             }-theme`;
             if (notion_elem.className !== mode) notion_elem.className = mode;
+            window
+              .matchMedia('(prefers-color-scheme: dark)')
+              .addEventListener('change', handle);
           }
         }
       });