load tabs.css and variables.css into notion container

mods/core/client.js

@@ -141,10 +141,10 @@ module.exports = (store, __exports) => {
     });
 
     function setAppTheme() {
-      electron.ipcRenderer.send(
+      const theme = document.querySelector('.notion-dark-theme')
-        'enhancer:set-app-theme',
+        ? 'dark'
-        document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
+        : 'light';
-      );
+      electron.ipcRenderer.send('enhancer:set-app-theme', theme);
     }
     setAppTheme();
     new MutationObserver(setAppTheme).observe(

mods/core/render.js

@@ -9,6 +9,7 @@
 const url = require('url'),
   path = require('path'),
   electron = require('electron'),
+  fs = require('fs-extra'),
   {
     __notion,
     getEnhancements,
@@ -422,10 +423,6 @@ module.exports = (store, __exports) => {
 
       communicateWithView(event) {
         switch (event.channel) {
-          case 'enhancer:set-tab-theme':
-            for (const style of event.args[0])
-              document.body.style.setProperty(style[0], style[1]);
-            break;
           case 'enhancer:set-tab-title':
             if (this.state.tabs.get(+event.target.id)) {
               this.setState({
@@ -978,7 +975,7 @@ module.exports = (store, __exports) => {
     }
 
     window['__start'] = () => {
-      document.head.innerHTML += `<link rel="stylesheet" href="${__dirname}/css/tabs.css" />`;
+      document.body.className = 'notion-dark-theme';
       document.body.setAttribute('data-platform', process.platform);
 
       const modules = getEnhancements();
@@ -992,6 +989,27 @@ module.exports = (store, __exports) => {
         }
       }
 
+      for (let mod of modules.loaded) {
+        if (
+          mod.alwaysActive ||
+          store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled
+        ) {
+          const fileExists = (file) => fs.pathExistsSync(path.resolve(file));
+          for (let sheet of ['tabs', 'variables']) {
+            if (fileExists(`${__dirname}/../${mod.dir}/${sheet}.css`)) {
+              document.head.appendChild(
+                createElement(
+                  `<link rel="stylesheet" href="enhancement://${mod.dir}/${sheet}.css">`
+                )
+              );
+            }
+          }
+        }
+      }
+      electron.ipcRenderer.on('enhancer:set-app-theme', (event, theme) => {
+        document.body.className = `notion-${theme}-theme`;
+      });
+
       // open menu on hotkey toggle
       document.addEventListener('keyup', (event) => {
         const hotkey = toKeyEvent(store().menu_toggle);
@@ -1096,4 +1114,4 @@ module.exports = (store, __exports) => {
       }
     };
   }
-};
+};

mods/core/tabs.css

@@ -32,22 +32,7 @@
   }
 }
 
-body:not([style*='--theme']):not(.error) > * {
+body:not(.error)::after {
-  opacity: 0;
-}
-body:not([style*='--theme']):not(.error)::after {
-  content: '';
-  position: absolute;
-  left: calc(50% - 15px);
-  top: calc(50% + 10px);
-  width: 18px;
-  height: 18px;
-  border: 4px solid rgb(34, 34, 34, 0.5);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-body[style*='--theme']::after {
   z-index: 1;
   content: '';
   position: absolute;