load menu.css and variables.css into enhancer menu

DOCUMENTATION.md

@@ -181,7 +181,7 @@ notion's html structure needs some complex selectors to properly modify it,
 and it means theme authors don't have to worry about separately updating their theme every time something changes.
 
 the full/up-to-date list of variables and their default values can be found in the
-[`variables.css` source file](mods/core/css/variables.css). each variable is named something along the lines of
+[core `variables.css` file](mods/core/variables.css). each variable is named something along the lines of
 `--theme_mode--target_name-property`. still not sure what a variable does? try changing it and seeing what happens.
 
 these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,

mods/core/app.css

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

mods/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: '' };

mods/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 ${

mods/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%;

mods/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>

mods/core/tabs.css

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

mods/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) => {