diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index f853ca5..ad71710 100644
--- a/DOCUMENTATION.md
+++ b/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,
diff --git a/mods/core/app.css b/mods/core/app.css
index da69ff5..06ffc57 100644
--- a/mods/core/app.css
+++ b/mods/core/app.css
@@ -5,6 +5,5 @@
  */
 
 @import './css/theme.css';
-@import './css/variables.css';
 @import './css/scrollbars.css';
 @import './css/titlebar.css';
diff --git a/mods/core/client.js b/mods/core/client.js
index 9a6b386..03b4265 100644
--- a/mods/core/client.js
+++ b/mods/core/client.js
@@ -140,81 +140,18 @@ module.exports = (store, __exports) => {
       }
     });
 
-    function setThemeVars() {
+    function setAppTheme() {
       electron.ipcRenderer.send(
-        'enhancer:set-menu-theme',
-        [
-          '--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)])
+        'enhancer:set-app-theme',
+        document.querySelector('.notion-dark-theme') ? 'dark' : 'light'
       );
-      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();
-    new MutationObserver(setThemeVars).observe(
+    setAppTheme();
+    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: '' };
diff --git a/mods/core/enhancerMenu.js b/mods/core/enhancerMenu.js
index 906198c..c43b107 100644
--- a/mods/core/enhancerMenu.js
+++ b/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();
-  if (modules.loaded.length)
+  const modules = getEnhancements();
+  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(
-      helpers.createElement('<button class="close-modal"></button>')
-    );
+    .appendChild(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(
-          helpers.createElement(`<link rel="stylesheet" href="${font}">`)
-        );
+        .appendChild(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 ${
diff --git a/mods/core/css/menu.css b/mods/core/menu.css
similarity index 97%
rename from mods/core/css/menu.css
rename to mods/core/menu.css
index 7bf8437..525ed51 100644
--- a/mods/core/css/menu.css
+++ b/mods/core/menu.css
@@ -4,8 +4,8 @@
  * under the MIT license
  */
 
-@import './buttons.css';
-@import './scrollbars.css';
+@import './css/buttons.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%;
diff --git a/mods/core/menu.html b/mods/core/menu.html
index 9f91cd5..c86210d 100644
--- a/mods/core/menu.html
+++ b/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>
diff --git a/mods/core/css/tabs.css b/mods/core/tabs.css
similarity index 99%
rename from mods/core/css/tabs.css
rename to mods/core/tabs.css
index 8711940..6e30263 100644
--- a/mods/core/css/tabs.css
+++ b/mods/core/tabs.css
@@ -4,7 +4,7 @@
  * under the MIT license
  */
 
-@import './buttons.css';
+@import './css/buttons.css';
 
 * {
   box-sizing: border-box;
diff --git a/mods/core/tray.js b/mods/core/tray.js
index e729328..1adb087 100644
--- a/mods/core/tray.js
+++ b/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) => {
-      if (!enhancer_menu) return;
-      enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
-    });
-    electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
+    electron.ipcMain.on('enhancer:set-app-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) => {
diff --git a/mods/core/css/variables.css b/mods/core/variables.css
similarity index 100%
rename from mods/core/css/variables.css
rename to mods/core/variables.css