load menu.css and variables.css into enhancer menu

repo/core/app.css

@@ -5,6 +5,5 @@
  */
 
 @import './css/theme.css';
-@import './css/variables.css';
 @import './css/scrollbars.css';
 @import './css/titlebar.css';

repo/core/client.js

@@ -140,81 +140,18 @@ module.exports = (store, __exports) => {
       }
     });
 
-    function setThemeVars() {
+    function setAppTheme() {
       electron.ipcRenderer.send(
-        'enhancer:set-menu-theme',
+        'enhancer:set-app-theme',
-        [
+        document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
-          '--theme--main',
-          '--theme--sidebar',
-          '--theme--overlay',
-          '--theme--dragarea',
-          '--theme--box-shadow_strong',
-          '--theme--font_sans',
-          '--theme--font_code',
-          '--theme--font_label-size',
-          '--theme--scrollbar',
-          '--theme--scrollbar-border',
-          '--theme--scrollbar_hover',
-          '--theme--card',
-          '--theme--table-border',
-          '--theme--interactive_hover',
-          '--theme--interactive_hover-border',
-          '--theme--button_close',
-          '--theme--button_close-fill',
-          '--theme--selected',
-          '--theme--primary',
-          '--theme--primary_click',
-          '--theme--option-color',
-          '--theme--option-background',
-          '--theme--option_active-background',
-          '--theme--option_active-color',
-          '--theme--option_hover-color',
-          '--theme--option_hover-background',
-          '--theme--text',
-          '--theme--text_ui',
-          '--theme--text_ui_info',
-          '--theme--select_yellow',
-          '--theme--select_green',
-          '--theme--select_blue',
-          '--theme--select_red',
-          '--theme--line_text',
-          '--theme--line_yellow',
-          '--theme--line_yellow-text',
-          '--theme--line_green',
-          '--theme--line_green-text',
-          '--theme--line_blue',
-          '--theme--line_blue-text',
-          '--theme--line_red',
-          '--theme--line_red-text',
-          '--theme--code_inline-text',
-          '--theme--code_inline-background',
-        ].map((rule) => [rule, getStyle(rule)])
       );
-      if (tabsEnabled) {
-        electron.ipcRenderer.sendToHost(
-          'enhancer:set-tab-theme',
-          [
-            '--theme--main',
-            '--theme--dragarea',
-            '--theme--font_sans',
-            '--theme--table-border',
-            '--theme--interactive_hover',
-            '--theme--interactive_hover-border',
-            '--theme--button_close',
-            '--theme--button_close-fill',
-            '--theme--option_active-background',
-            '--theme--selected',
-            '--theme--text',
-          ].map((rule) => [rule, getStyle(rule)])
-        );
-      }
     }
-    setThemeVars();
+    setAppTheme();
-    new MutationObserver(setThemeVars).observe(
+    new MutationObserver(setAppTheme).observe(
       document.querySelector('.notion-app-inner'),
       { attributes: true }
     );
-    electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars);
+    electron.ipcRenderer.on('enhancer:get-app-theme', setAppTheme);
 
     if (tabsEnabled) {
       let tab_title = { img: '', emoji: '', text: '' };

repo/core/enhancerMenu.js

@@ -7,7 +7,7 @@
 'use strict';
 
 const store = require('../../pkg/store.js'),
-  helpers = require('../../pkg/helpers.js'),
+  { createElement, getEnhancements } = require('../../pkg/helpers.js'),
   fs = require('fs-extra'),
   path = require('path'),
   electron = require('electron'),
@@ -17,13 +17,14 @@ window['__start'] = async () => {
   document.body.setAttribute('data-platform', process.platform);
 
   // mod loader
-  const modules = helpers.getEnhancements();
+  const modules = getEnhancements();
-  if (modules.loaded.length)
+  if (modules.loaded.length) {
     console.info(
       `<notion-enhancer> enhancements loaded: ${modules.loaded
         .map((mod) => mod.name)
         .join(', ')}.`
     );
+  }
   if (modules.invalid.length) {
     createAlert(
       'error',
@@ -43,6 +44,28 @@ window['__start'] = async () => {
       : store(args[0], { ...mod.defaults, ...args[1] });
   };
 
+  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 ['menu', 'variables']) {
+        if (fileExists(`${__dirname}/../${mod.dir}/${sheet}.css`)) {
+          document.head.appendChild(
+            createElement(
+              `<link rel="stylesheet" href="enhancement://${mod.dir}/${sheet}.css">`
+            )
+          );
+        }
+      }
+    }
+  }
+  electron.ipcRenderer.send('enhancer:get-app-theme');
+  electron.ipcRenderer.on('enhancer:set-app-theme', (event, theme) => {
+    document.body.className = `notion-${theme}-theme`;
+  });
+
   const buttons = require('./buttons.js')(() => ({
     '72886371-dada-49a7-9afc-9f275ecf29d3': {
       enabled: (store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
@@ -53,16 +76,10 @@ window['__start'] = async () => {
   }));
   document.querySelector('#titlebar').appendChild(buttons.element);
 
-  electron.ipcRenderer.send('enhancer:get-menu-theme');
-  electron.ipcRenderer.on('enhancer:set-menu-theme', (event, theme) => {
-    for (const style of theme)
-      document.body.style.setProperty(style[0], style[1]);
-  });
-
   function createAlert(type, message) {
     if (!type)
       throw Error('<notion-enhancer> @ createAlert: no alert type specified');
-    const el = helpers.createElement(`
+    const el = createElement(`
       <section class="${type}" role="alert">
         <p>${message}</p>
       </section>
@@ -182,9 +199,7 @@ window['__start'] = async () => {
     .update();
   document
     .querySelector('#colorpicker')
-    .appendChild(
+    .appendChild(createElement('<button class="close-modal"></button>'));
-      helpers.createElement('<button class="close-modal"></button>')
-    );
   document.querySelectorAll('#popup .close-modal').forEach((el) =>
     el.addEventListener('click', (event) => {
       $popup.classList.remove('visible');
@@ -325,7 +340,7 @@ window['__start'] = async () => {
       throw Error('<notion-enhancer> @ createTag: no tagname specified');
     if (!onclick)
       throw Error('<notion-enhancer> @ createTag: no action specified');
-    const el = helpers.createElement(
+    const el = createElement(
       `<span class="selected" ${
         color ? `style="--tag_color: ${color}" ` : ''
       }tabindex="0">${tagname}</span>`
@@ -470,7 +485,7 @@ window['__start'] = async () => {
           </label>
         `;
     }
-    $opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
+    $opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
     if (opt.type === 'color') {
       $opt
         .querySelector(`#${opt.type}_${id}--${opt.key}`)
@@ -498,9 +513,7 @@ window['__start'] = async () => {
     for (let font of mod.fonts || []) {
       document
         .querySelector('head')
-        .appendChild(
+        .appendChild(createElement(`<link rel="stylesheet" href="${font}">`));
-          helpers.createElement(`<link rel="stylesheet" href="${font}">`)
-        );
     }
 
     const enabled =
@@ -516,7 +529,7 @@ window['__start'] = async () => {
               link: `https://github.com/${mod.author}`,
               avatar: `https://github.com/${mod.author}.png`,
             };
-    mod.elem = helpers.createElement(`
+    mod.elem = createElement(`
     <section class="${enabled ? 'enabled' : 'disabled'}" id="${mod.id}">
         <div class="meta">
         <h3 ${

repo/core/menu.css

@@ -4,8 +4,8 @@
  * under the MIT license
  */
 
-@import './buttons.css';
+@import './css/buttons.css';
-@import './scrollbars.css';
+@import './css/scrollbars.css';
 
 @keyframes spin {
   from {
@@ -44,22 +44,6 @@ body {
   color: var(--theme--text);
 }
 
-body:not([style]) > * {
-  display: none !important;
-}
-body:not([style])::after {
-  content: '';
-  position: absolute;
-  left: calc(50% - 13px);
-  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;
-}
-
 main {
   padding: 1em 1em 2.9em 1em;
   height: 100%;

repo/core/menu.html

@@ -6,9 +6,8 @@
     <title>notion-enhancer menu</title>
     <script src="./colorjoe/min.js"></script>
     <link rel="stylesheet" href="./colorjoe/picker.css" />
-    <link rel="stylesheet" href="./css/menu.css" />
   </head>
-  <body>
+  <body class="notion-dark-theme">
     <header id="titlebar"></header>
     <main>
       <div id="alerts"></div>

repo/core/tabs.css

@@ -4,7 +4,7 @@
  * under the MIT license
  */
 
-@import './buttons.css';
+@import './css/buttons.css';
 
 * {
   box-sizing: border-box;

repo/core/tray.js

@@ -57,15 +57,18 @@ module.exports = (store, __exports) => {
     // menu
 
     electron.ipcMain.on('enhancer:open-menu', openEnhancerMenu);
-    electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => {
+    electron.ipcMain.on('enhancer:set-app-theme', (event, arg) => {
-      if (!enhancer_menu) return;
-      enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
-    });
-    electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
       electron.webContents
         .getAllWebContents()
         .forEach((webContents) =>
-          webContents.send('enhancer:get-menu-theme', arg)
+          webContents.send('enhancer:set-app-theme', arg)
+        );
+    });
+    electron.ipcMain.on('enhancer:get-app-theme', (event, arg) => {
+      electron.webContents
+        .getAllWebContents()
+        .forEach((webContents) =>
+          webContents.send('enhancer:get-app-theme', arg)
         );
     });
     electron.ipcMain.on('enhancer:close-tab', (event, target, tab) => {