From 6c7e1cec9d4ec566d73ad336e94d5ce822817bfe Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 08:49:38 +1000
Subject: [PATCH 01/11] halved selectors for better perf., added wip littlepig
 themes

---
 CHANGELOG.md                    |  33 +-
 README.md                       |   3 +-
 mods/core/client.js             |  82 ++--
 mods/core/css/dark.css          | 345 -----------------
 mods/core/css/light.css         | 366 ------------------
 mods/core/css/localised.css     | 229 ------------
 mods/core/css/menu.css          |  49 ++-
 mods/core/css/shared.css        | 247 ------------
 mods/core/css/theme.css         | 640 ++++++++++++++++++++++++++++++++
 mods/core/css/variables.css     | 222 +++++++++++
 mods/core/css/variables.json    |  96 -----
 mods/core/menu.js               |  20 +-
 mods/core/styles.css            |   6 +-
 mods/core/tray.js               |  10 +-
 mods/littilepig-dark/mod.js     |  22 ++
 mods/littilepig-dark/styles.css | 627 +++++++++++++++++++++++++++++++
 mods/littlepig-light/mod.js     |  22 ++
 mods/littlepig-light/styles.css | 607 ++++++++++++++++++++++++++++++
 package.json                    |   4 +-
 19 files changed, 2276 insertions(+), 1354 deletions(-)
 delete mode 100644 mods/core/css/dark.css
 delete mode 100644 mods/core/css/light.css
 delete mode 100644 mods/core/css/localised.css
 delete mode 100644 mods/core/css/shared.css
 create mode 100644 mods/core/css/theme.css
 delete mode 100644 mods/core/css/variables.json
 create mode 100644 mods/littilepig-dark/mod.js
 create mode 100644 mods/littilepig-dark/styles.css
 create mode 100644 mods/littlepig-light/mod.js
 create mode 100644 mods/littlepig-light/styles.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6299e0a..f24ff66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,36 @@
 - [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk)
 - [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc)
 
-### v0.8.5 (wip)
+### v0.9.0 (wip)
+
+a feature and cleanup update.
+
+- improved: halved the number of css rules used -> much better performance.
+- bugfix: enhancer settings should no longer reset on update (though this will not have
+  effect until the release after this one).
+  bugfix: blue select tags are no longer purple.
+- themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
+- extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
+  or leave it blank to not change anything.
+
+// todo
+
+<!-- - improved: extension menu will now receive style rules from extensions (prev. only got css vars) = necessary for
+  custom fonts. javascript is still not executable in the menu. (e.g. the "font chooser" will work, but only
+  because all it thing it does is change variables - if it were to try dynamically adding new font import rules
+  things things would break). -->
+
+- improved: added individual text-colour rules for different background colours.
+- improved: added variables for callout backgrounds.
+- bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e`
+  to remove conflict with the inline code highlight shortcut.
+- bugfix: block-level text colours are now changed properly.
+- bugfix: page titles now respond to small-text mode.
+- bugfix: update property-layout to match notion changes again.
+
+notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
+
+### v0.8.5 (2020-08-29)
 
 - bugfix: separate text highlight and select tag variables.
 - bugfix: bypass CSP for the `enhancement://` protocol - was failing on some platforms?
@@ -35,7 +64,7 @@ to use `./bin.js` instead of `notion-enhancer`
 
 a clarity and stability update.
 
-- improved: more informative error messages.
+- improved: more informative cli error messages (original ones can be accessed with the `-d/--dev` flag).
 - bugfix: gallery variable didn't apply on fullpage.
 - bugfix: date picker hid current date number.
 - bugfix: small-text pages should now work as expected.
diff --git a/README.md b/README.md
index dc54d00..518da63 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,6 @@ for support, join the [discord server](https://discord.gg/sFWPXtA).
 - the [official windows/mac releases](https://notion.so/desktop).
 - the arch linux AUR [notion-app](https://aur.archlinux.org/packages/notion-app/) package.
 - the linux [notion-app](https://github.com/jaredallard/notion-app) installer.
-- the debian [notion-deb-builder](https://github.com/davidbailey00/notion-deb-builder/).
 
 (it can also be run from the wsl to apply enhancements to the windows app.)
 
@@ -30,7 +29,7 @@ a chrome extension may be coming soon for web client support.
 
 ## installation
 
-> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md)\*\*
+> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md)
 > before following these instructions.
 
 during installation/removal, make sure no notion processes are running! (check your task manager.)
diff --git a/mods/core/client.js b/mods/core/client.js
index 25744ba..5e2f874 100644
--- a/mods/core/client.js
+++ b/mods/core/client.js
@@ -33,21 +33,8 @@ module.exports = (store, __exports) => {
     clearInterval(attempt_interval);
 
     // scrollbars
-    if (store().smooth_scrollbars) {
+    if (store().smooth_scrollbars)
       document.body.classList.add('smooth-scrollbars');
-      // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100);
-      // function patchScrollbars() {
-      //   const sidebar = document.querySelector(
-      //     '.notion-scroller.vertical[style*="overflow: hidden auto;"]'
-      //   );
-      //   if (!sidebar) return;
-      //   clearInterval(interval_attempts.patchScrollbars);
-      //   sidebar.style.overflow = '';
-      //   setTimeout(() => {
-      //     sidebar.style.overflow = 'hidden auto';
-      //   }, 10);
-      // }
-    }
 
     // frameless
     if (store().frameless) {
@@ -83,7 +70,7 @@ module.exports = (store, __exports) => {
 
     // ctrl+f theming
     document.defaultView.addEventListener('keydown', (event) => {
-      if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'f') {
         notionIpc.sendNotionToIndex('search:set-theme', {
           'mode': document.querySelector('.notion-dark-theme')
             ? 'dark'
@@ -111,24 +98,63 @@ module.exports = (store, __exports) => {
     });
 
     // enhancer menu
-    function setMenuTheme() {
-      electron.ipcRenderer.send('enhancer:set-menu-theme', {
-        mode: document.querySelector('.notion-dark-theme') ? 'dark' : 'light',
-        rules: require('./css/variables.json').map((rule) => [
-          rule,
-          getStyle(rule),
-        ]),
-      });
+    function setThemeVars() {
+      electron.ipcRenderer.send(
+        'enhancer:set-theme-vars',
+        [
+          '--theme--main',
+          '--theme--sidebar',
+          '--theme--overlay',
+          '--theme--dragarea',
+          '--theme--font_sans',
+          '--theme--font_code',
+          '--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--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_green',
+          '--theme--line_blue',
+          '--theme--line_red',
+          '--theme--code_inline-text',
+          '--theme--code_inline-background',
+        ].map((rule) => [rule, getStyle(rule)])
+      );
     }
-    setMenuTheme();
-    electron.ipcRenderer.on('enhancer:get-menu-theme', setMenuTheme);
+    setThemeVars();
+    const theme_observer = new MutationObserver(setThemeVars);
+    theme_observer.observe(document.querySelector('.notion-app-inner'), {
+      attributes: true,
+    });
+    electron.ipcRenderer.on('enhancer:get-theme-vars', setThemeVars);
 
-    const observer = new MutationObserver(setSidebarWidth);
-    observer.observe(document.querySelector('.notion-sidebar'), {
+    const sidebar_observer = new MutationObserver(setSidebarWidth);
+    sidebar_observer.observe(document.querySelector('.notion-sidebar'), {
       attributes: true,
     });
     let sidebar_width;
-    function setSidebarWidth(list, observer) {
+    function setSidebarWidth(list) {
       if (!store().frameless) return;
       const new_sidebar_width =
         list[0].target.style.height === 'auto'
diff --git a/mods/core/css/dark.css b/mods/core/css/dark.css
deleted file mode 100644
index f7d44a4..0000000
--- a/mods/core/css/dark.css
+++ /dev/null
@@ -1,345 +0,0 @@
-/*
- * notion-enhancer
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (c) 2020 TarasokUA
- * (c) 2020 Arecsu
- * (c) 2020 u/zenith_illinois
- * under the MIT license
- */
-
-/** general ui **/
-
-.dark [style*='background: rgb(55, 60, 63)'],
-.dark [style*='background: rgba(69, 75, 78, 0.3)'],
-.dark [style*='background: rgb(120, 123, 123)'] {
-  background: var(--theme--sidebar) !important;
-}
-.notion-body.dark,
-.dark [style*='background: rgb(47, 52, 55)'],
-.dark [style*='background-color: rgb(47, 52, 55)'] {
-  background: var(--theme--main) !important;
-}
-
-.dark
-  .notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
-.dark
-  .notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
-  img {
-  height: var(--theme--preview_banner-height) !important;
-}
-.dark
-  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
-.dark
-  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
-  img {
-  height: var(--theme--page_banner-height) !important;
-}
-
-/** databases **/
-
-.dark [style*='background: rgb(63, 68, 71)'],
-.dark [style*='background-color: rgb(64, 68, 71);'] {
-  background: var(--theme--card) !important;
-}
-.dark
-  .notion-page-block.notion-collection-item
-  [style*='background: rgba(255, 255, 255, 0.05)'] {
-  background: var(--theme--gallery) !important;
-}
-
-.dark
-  [style*='box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px'] {
-  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
-    rgba(15, 15, 15, 0.1) 0px 2px 4px !important;
-}
-
-.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
-  box-shadow: var(--theme--main) -3px 0px 0px !important;
-}
-.dark
-  [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
-  box-shadow: var(--theme--main) -3px 0px 0px,
-    var(--theme--table-border) 0px 1px 0px !important;
-}
-
-.dark [style*='border-top: 1px solid rgba(255, 255, 255,'] {
-  border-top: 1px solid var(--theme--table-border) !important;
-}
-.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
-  box-shadow: var(--theme--table-border) -1px 0px 0px !important;
-}
-.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'] {
-  border-bottom: 1px solid var(--theme--table-border) !important;
-}
-.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] {
-  box-shadow: var(--theme--table-border) 0px 1px 0px !important;
-}
-.dark [style*='border-right: 1px solid rgba(255, 255, 255,'] {
-  border-right: 1px solid var(--theme--table-border) !important;
-}
-.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
-.dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
-  box-shadow: var(--theme--table-border) 0px -1px 0px !important;
-}
-.dark [style*='border-left: 1px solid rgba(255, 255, 255,'],
-.dark
-  .notion-block-permission-settings-public-access
-  [role='button'][style*='border-left: none'] {
-  border-left: 1px solid var(--theme--table-border) !important;
-}
-.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] {
-  box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
-}
-.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 1px 0px 0px inset'] {
-  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
-}
-
-.dark
-  [style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'] {
-  background-image: linear-gradient(
-    to right,
-    var(--theme--bg_gray) 0%,
-    var(--theme--bg_gray) 100%
-  ) !important;
-}
-
-.dark [style*='background: rgb(71, 76, 80)'],
-.dark [style*='background: rgb(80, 85, 88)'],
-.dark [style*='background: rgb(98, 102, 104)'] {
-  background: var(--theme--interactive_hover) !important;
-  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
-}
-
-/** ui colours **/
-
-.dark ::selection,
-.dark
-  [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
-.dark
-  [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
-  background: var(--theme--selected) !important;
-}
-
-.dark [style*=' color: rgb(46, 170, 220)'] {
-  color: var(--theme--primary) !important;
-}
-.dark [style*='fill: rgb(46, 170, 220)'] {
-  fill: var(--theme--primary) !important;
-}
-.dark [style*='background: rgb(46, 170, 220)'],
-.dark [style*='background-color: rgb(46, 170, 220)'] {
-  background: var(--theme--primary) !important;
-}
-.dark [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
-  box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
-}
-.dark [style*='background: rgb(6, 156, 205)'] {
-  background: var(--theme--primary_hover) !important;
-}
-.dark [style*='background: rgb(0, 141, 190)'] {
-  background: var(--theme--primary_click) !important;
-}
-.dark
-  .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
-.dark [style*='background: rgb(235, 87, 87)'] {
-  background: var(--theme--primary_indicator) !important;
-}
-
-.dark
-  [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
-  color: var(--theme--danger_text) !important;
-  border: 1px solid var(--theme--danger_border) !important;
-}
-
-/* content colours */
-
-.dark,
-.dark .notion-page-content [style*='color: inherit;'],
-.dark .notion-frame .notion-page-block,
-.dark [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark [style*='color: rgba(255, 255, 255, 0.7)'] {
-  color: var(--theme--text) !important;
-}
-.dark [style*='color: rgba(255, 255, 255, 0.6)'] {
-  color: var(--theme--text_ui) !important;
-}
-.dark [style*='color: rgba(255, 255, 255, 0.4)'] {
-  color: var(--theme--text_ui_info) !important;
-}
-.dark [style*='fill: rgb(202, 204, 206)'] {
-  fill: var(--theme--text) !important;
-}
-.dark [style*='fill: rgba(202, 204, 206,'] {
-  fill: var(--theme--text_ui) !important;
-}
-.dark [style*='caret-color: rgba(255, 255, 255, 0.9)'] {
-  caret-color: var(--theme--text) !important;
-}
-
-.dark [style*='color:rgba(151,154,155,0.95)'] {
-  color: var(--theme--text_gray) !important;
-}
-.dark [style*='background: rgba(151, 154, 155, 0.5)'] {
-  background: var(--theme--select_gray) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(69,75,78)'] {
-  background: var(--theme--bg_gray) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(69, 75, 78)'] {
-  background: var(--theme--line_gray) !important;
-}
-.dark [style*='color:rgb(147,114,100)'] {
-  color: var(--theme--text_brown) !important;
-}
-.dark [style*='background: rgba(147, 114, 100, 0.5)'] {
-  background: var(--theme--select_brown) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(67,64,64)'] {
-  background: var(--theme--bg_brown) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(67, 64, 64)'] {
-  background: var(--theme--line_brown) !important;
-}
-.dark [style*='color:rgb(255,163,68)'] {
-  color: var(--theme--text_orange) !important;
-}
-.dark [style*='background: rgba(255, 163, 68, 0.5)'] {
-  background: var(--theme--select_orange) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(89,74,58)'] {
-  background: var(--theme--bg_orange) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(89, 74, 58)'] {
-  background: var(--theme--line_orange) !important;
-}
-.dark [style*='color:rgb(255,220,73)'] {
-  color: var(--theme--text_yellow) !important;
-}
-.dark [style*='background: rgba(255, 220, 73, 0.5)'] {
-  background: var(--theme--select_yellow) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(89,86,59)'] {
-  background: var(--theme--bg_yellow) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(89, 86, 59)'] {
-  background: var(--theme--line_yellow) !important;
-}
-.dark [style*='color:rgb(77,171,154)'] {
-  color: var(--theme--text_green) !important;
-}
-.dark [style*='background: rgba(77, 171, 154, 0.5)'] {
-  background: var(--theme--select_green) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(53,76,75)'] {
-  background: var(--theme--bg_green) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(53, 76, 75)'] {
-  background: var(--theme--line_green) !important;
-}
-.dark [style*='color:rgb(82,156,202)'] {
-  color: var(--theme--text_blue) !important;
-}
-.dark [style*='background: rgba(82, 156, 202, 0.5)'] {
-  background: var(--theme--select_purple) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(54,73,84)'] {
-  background: var(--theme--bg_blue) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(54, 73, 84)'] {
-  background: var(--theme--line_blue) !important;
-}
-.dark [style*='color:rgb(154,109,215)'] {
-  color: var(--theme--text_purple) !important;
-}
-.dark [style*='background: rgba(154, 109, 215, 0.5)'] {
-  background: var(--theme--select_purple) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(68,63,87)'] {
-  background: var(--theme--bg_purple) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(68, 63, 87)'] {
-  background: var(--theme--line_purple) !important;
-}
-.dark [style*='color:rgb(226,85,161)'] {
-  color: var(--theme--text_pink) !important;
-}
-.dark [style*='background: rgba(226, 85, 161, 0.5)'] {
-  background: var(--theme--select_pink) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(83,59,76)'] {
-  background: var(--theme--bg_pink) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(83, 59, 76)'] {
-  background: var(--theme--line_pink) !important;
-}
-.dark [style*='color:rgb(255,115,105)'] {
-  color: var(--theme--text_red) !important;
-}
-.dark [style*='background: rgba(255, 115, 105, 0.5);'] {
-  background: var(--theme--select_red) !important;
-  color: var(--theme--select_text) !important;
-}
-.dark [style*='background:rgb(89,65,65)'] {
-  background: var(--theme--bg_red) !important;
-  color: var(--theme--bg_text) !important;
-}
-.dark [style*='background: rgb(89, 65, 65)'] {
-  background: var(--theme--line_red) !important;
-}
-
-.dark
-  [style*='background: rgb(69, 75, 78)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(67, 64, 64)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(89, 74, 58)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(89, 86, 59)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(53, 76, 75)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(54, 73, 84)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(68, 63, 87)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(83, 59, 76)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'],
-.dark
-  [style*='background: rgb(89, 65, 65)']
-  [style*=' color: rgba(255, 255, 255, 0.9)'] {
-  color: var(--theme--line_text) !important;
-}
-
-/* code */
-
-.dark [style*='color:#EB5757'] {
-  color: var(--theme--code_inline-text) !important;
-  background: var(--theme--code_inline-background) !important;
-}
diff --git a/mods/core/css/light.css b/mods/core/css/light.css
deleted file mode 100644
index 6dab07b..0000000
--- a/mods/core/css/light.css
+++ /dev/null
@@ -1,366 +0,0 @@
-/*
- * notion-enhancer
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (c) 2020 TarasokUA
- * (c) 2020 Arecsu
- * (c) 2020 u/zenith_illinois
- * under the MIT license
- */
-
-/** general ui **/
-
-.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
-.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'],
-.notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] {
-  background: var(--theme--sidebar) !important;
-}
-.notion-body:not(.dark),
-.notion-body:not(.dark)
-  [style*='background: white']:not(.notion-help-button):not([style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;']),
-.notion-body:not(.dark) [style*='background-color: white'] {
-  background: var(--theme--main) !important;
-}
-
-.notion-body:not(.dark) [style*='background: rgba(15, 15, 15, 0.6)'] {
-  background: var(--theme--overlay) !important;
-}
-
-.notion-body:not(.dark)
-  .notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
-.notion-body:not(.dark)
-  .notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
-  img {
-  height: var(--theme--preview_banner-height) !important;
-}
-.notion-body:not(.dark)
-  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
-.notion-body:not(.dark)
-  [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
-  img {
-  height: var(--theme--page_banner-height) !important;
-}
-
-/** databases **/
-
-.notion-body:not(.dark)
-  .notion-scroller.horizontal.vertical
-  .notion-selectable
-  > a[style*='background: white'],
-.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'] {
-  background: var(--theme--card) !important;
-}
-.notion-body:not(.dark)
-  .notion-page-block.notion-collection-item
-  [style*='background: rgba(55, 53, 47, 0.024)'] {
-  background: var(--theme--gallery) !important;
-}
-
-.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] {
-  box-shadow: var(--theme--main) -3px 0px 0px !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'],
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
-  box-shadow: var(--theme--main) -3px 0px 0px,
-    var(--theme--table-border) 0px 1px 0px !important;
-}
-
-.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] {
-  border-top: 1px solid var(--theme--table-border) !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'],
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.16) -1px 0px 0px'] {
-  box-shadow: -1px -1px 0 var(--theme--table-border) !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px'] {
-  box-shadow: 0px 1px 0 var(--theme--table-border) !important;
-}
-.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
-  border-bottom: 1px solid var(--theme--table-border) !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] {
-  box-shadow: var(--theme--table-border) 0px 1px 0px !important;
-}
-.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47,'] {
-  border-right: 1px solid var(--theme--table-border) !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
-  box-shadow: var(--theme--table-border) 0px -1px 0px !important;
-}
-.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47,'] {
-  border-left: 1px solid var(--theme--table-border) !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] {
-  box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset'] {
-  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
-}
-
-.notion-body:not(.dark)
-  [style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
-  background-image: linear-gradient(
-    to right,
-    var(--theme--bg_gray) 0%,
-    var(--theme--bg_gray) 100%
-  ) !important;
-}
-
-.notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'],
-.notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'],
-.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] {
-  background: var(--theme--interactive_hover) !important;
-  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
-}
-
-/** ui colours **/
-
-.notion-body:not(.dark) ::selection,
-.notion-body:not(.dark)
-  [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
-.notion-body:not(.dark)
-  [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
-  background: var(--theme--selected) !important;
-}
-
-.notion-body:not(.dark) [style*=' color: rgb(46, 170, 220)'] {
-  color: var(--theme--primary) !important;
-}
-.notion-body:not(.dark) [style*='fill: rgb(46, 170, 220)'] {
-  fill: var(--theme--primary) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'],
-.notion-body:not(.dark) [style*='background-color: rgb(46, 170, 220)'] {
-  background: var(--theme--primary) !important;
-}
-.notion-body:not(.dark)
-  [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
-  box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(6, 156, 205)'] {
-  background: var(--theme--primary_hover) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(0, 141, 190)'] {
-  background: var(--theme--primary_click) !important;
-}
-.notion-body:not(.dark)
-  .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
-.notion-body:not(.dark) [style*='background: rgb(235, 87, 87)'] {
-  background: var(--theme--primary_indicator) !important;
-}
-
-.notion-body:not(.dark) .notion-to_do-block .checkboxSquare {
-  background: var(--theme--option-background) !important;
-}
-.notion-body:not(.dark) .notion-to_do-block .checkboxSquare path {
-  fill: var(--theme--option-color) !important;
-}
-
-.notion-body:not(.dark)
-  [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
-  color: var(--theme--danger_text) !important;
-  border: 1px solid var(--theme--danger_border) !important;
-}
-
-/* content colours */
-
-.notion-body:not(.dark),
-.notion-body:not(.dark) .notion-page-content [style*='color: inherit;'],
-.notion-body:not(.dark) .notion-frame .notion-page-block,
-.notion-body:not(.dark) [style*=' color: rgb(55, 53, 47);'] {
-  color: var(--theme--text) !important;
-}
-.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6)'],
-.notion-body:not(.dark) [style*='color: rgba(25, 23, 17, 0.6)'] {
-  color: var(--theme--text_ui) !important;
-}
-.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] {
-  color: var(--theme--text_ui_info) !important;
-}
-.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] {
-  fill: var(--theme--text_ui) !important;
-}
-.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'] {
-  fill: var(--theme--text) !important;
-}
-.notion-body:not(.dark) [style*='caret-color: rgb(55, 53, 47)'] {
-  caret-color: var(--theme--text) !important;
-}
-
-.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] {
-  color: var(--theme--text_gray) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
-  background: var(--theme--select_gray) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
-  background: var(--theme--bg_gray) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] {
-  background: var(--theme--line_gray) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] {
-  color: var(--theme--text_brown) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
-  background: var(--theme--select_brown) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
-  background: var(--theme--bg_brown) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] {
-  background: var(--theme--line_brown) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] {
-  color: var(--theme--text_orange) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
-  background: var(--theme--select_orange) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
-  background: var(--theme--bg_orange) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] {
-  background: var(--theme--line_orange) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] {
-  color: var(--theme--text_yellow) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
-  background: var(--theme--select_yellow) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
-  background: var(--theme--bg_yellow) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] {
-  background: var(--theme--line_yellow) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] {
-  color: var(--theme--text_green) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
-  background: var(--theme--select_green) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
-  background: var(--theme--bg_green) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] {
-  background: var(--theme--line_green) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] {
-  color: var(--theme--text_blue) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
-  background: var(--theme--select_purple) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
-  background: var(--theme--bg_blue) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] {
-  background: var(--theme--line_blue) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] {
-  color: var(--theme--text_purple) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
-  background: var(--theme--select_purple) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
-  background: var(--theme--bg_purple) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] {
-  background: var(--theme--line_purple) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] {
-  color: var(--theme--text_pink) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
-  background: var(--theme--select_pink) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
-  background: var(--theme--bg_pink) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] {
-  background: var(--theme--line_pink) !important;
-}
-.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] {
-  color: var(--theme--text_red) !important;
-}
-.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {
-  background: var(--theme--select_red) !important;
-  color: var(--theme--select_text) !important;
-}
-.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
-  background: var(--theme--bg_red) !important;
-  color: var(--theme--bg_text) !important;
-}
-.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] {
-  background: var(--theme--line_red) !important;
-}
-
-.notion-body:not(.dark)
-  [style*='background: rgb(235, 236, 237)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(233, 229, 227)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(250, 235, 221)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(251, 243, 219)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(221, 237, 234)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(221, 235, 241)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(234, 228, 242)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(244, 223, 235)']
-  [style*=' color: rgb(55, 53, 47);'],
-.notion-body:not(.dark)
-  [style*='background: rgb(251, 228, 228)']
-  [style*=' color: rgb(55, 53, 47);'] {
-  color: var(--theme--line_text) !important;
-}
-
-/* code */
-
-.notion-body:not(.dark) [style*='color:#EB5757'] {
-  color: var(--theme--code_inline-text) !important;
-  background: var(--theme--code_inline-background) !important;
-}
diff --git a/mods/core/css/localised.css b/mods/core/css/localised.css
deleted file mode 100644
index 390c0f6..0000000
--- a/mods/core/css/localised.css
+++ /dev/null
@@ -1,229 +0,0 @@
-/*
- * notion-enhancer
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * under the MIT license
- */
-
-@import './variables.css';
-
-.notion-dark-theme {
-  --theme--main: var(--theme_dark--main);
-  --theme--sidebar: var(--theme_dark--sidebar);
-  --theme--overlay: var(--theme_dark--overlay);
-  --theme--dragarea: var(--theme_dark--dragarea);
-  --theme--preview-width: var(--theme_dark--preview-width);
-  --theme--preview-padding: var(--theme_dark--preview-padding);
-  --theme--preview_banner-height: var(--theme_dark--preview_banner-height);
-  --theme--page_banner-height: var(--theme_dark--page_banner-height);
-  --theme--font_sans: var(--theme_dark--font_sans);
-  --theme--font_serif: var(--theme_dark--font_serif);
-  --theme--font_mono: var(--theme_dark--font_mono);
-  --theme--font_code: var(--theme_dark--font_code);
-  --theme--font_title-size: var(--theme_dark--font_title-size);
-  --theme--font_heading1-size: var(--theme_dark--font_heading1-size);
-  --theme--font_heading2-size: var(--theme_dark--font_heading2-size);
-  --theme--font_heading3-size: var(--theme_dark--font_heading3-size);
-  --theme--font_label-size: var(--theme_dark--font_label-size);
-  --theme--font_body-size: var(--theme_dark--font_body-size);
-  --theme--font_body-size_small: var(--theme_dark--font_body-size_small);
-  --theme--font_code-size: var(--theme_dark--font_code-size);
-  --theme--font_sidebar-size: var(--theme_dark--font_sidebar-size);
-  --theme--scrollbar: var(--theme_dark--scrollbar);
-  --theme--scrollbar-border: var(--theme_dark--scrollbar-border);
-  --theme--scrollbar_hover: var(--theme_dark--scrollbar_hover);
-  --theme--card: var(--theme_dark--card);
-  --theme--gallery: var(--theme_dark--gallery);
-  --theme--table-border: var(--theme_dark--table-border);
-  --theme--interactive_hover: var(--theme_dark--interactive_hover);
-  --theme--interactive_hover-border: var(
-    --theme_dark--interactive_hover-border
-  );
-  --theme--button_close: var(--theme_dark--button_close);
-  --theme--button_close-fill: var(--theme_dark--button_close-fill);
-  --theme--selected: var(--theme_dark--selected);
-  --theme--primary: var(--theme_dark--primary);
-  --theme--primary_hover: var(--theme_dark--primary_hover);
-  --theme--primary_click: var(--theme_dark--primary_click);
-  --theme--primary_indicator: var(--theme_dark--primary_indicator);
-  --theme--option-color: var(--theme_dark--option-color);
-  --theme--option-background: var(--theme_dark--option-background);
-  --theme--option_active-color: var(--theme_dark--option_active-color);
-  --theme--option_active-background: var(
-    --theme_dark--option_active-background
-  );
-  --theme--option_hover-color: var(--theme_dark--option_hover-color);
-  --theme--option_hover-background: var(--theme_dark--option_hover-background);
-  --theme--danger_text: var(--theme_dark--danger_text);
-  --theme--danger_border: var(--theme_dark--danger_border);
-  --theme--text: var(--theme_dark--text);
-  --theme--text_ui: var(--theme_dark--text_ui);
-  --theme--text_ui_info: var(--theme_dark--text_ui_info);
-  --theme--text_gray: var(--theme_dark--text_gray);
-  --theme--text_brown: var(--theme_dark--text_brown);
-  --theme--text_orange: var(--theme_dark--text_orange);
-  --theme--text_yellow: var(--theme_dark--text_yellow);
-  --theme--text_green: var(--theme_dark--text_green);
-  --theme--text_blue: var(--theme_dark--text_blue);
-  --theme--text_purple: var(--theme_dark--text_purple);
-  --theme--text_pink: var(--theme_dark--text_pink);
-  --theme--text_red: var(--theme_dark--text_red);
-  --theme--select_text: var(--theme_dark--select_text);
-  --theme--select_gray: var(--theme_dark--select_gray);
-  --theme--select_brown: var(--theme_dark--select_brown);
-  --theme--select_orange: var(--theme_dark--select_orange);
-  --theme--select_yellow: var(--theme_dark--select_yellow);
-  --theme--select_green: var(--theme_dark--select_green);
-  --theme--select_blue: var(--theme_dark--select_blue);
-  --theme--select_purple: var(--theme_dark--select_purple);
-  --theme--select_pink: var(--theme_dark--select_pink);
-  --theme--select_red: var(--theme_dark--select_red);
-  --theme--bg_text: var(--theme_dark--bg_text);
-  --theme--bg_gray: var(--theme_dark--bg_gray);
-  --theme--bg_brown: var(--theme_dark--bg_brown);
-  --theme--bg_orange: var(--theme_dark--bg_orange);
-  --theme--bg_yellow: var(--theme_dark--bg_yellow);
-  --theme--bg_green: var(--theme_dark--bg_green);
-  --theme--bg_blue: var(--theme_dark--bg_blue);
-  --theme--bg_purple: var(--theme_dark--bg_purple);
-  --theme--bg_pink: var(--theme_dark--bg_pink);
-  --theme--bg_red: var(--theme_dark--bg_red);
-  --theme--line_text: var(--theme_dark--line_text);
-  --theme--line_gray: var(--theme_dark--line_gray);
-  --theme--line_brown: var(--theme_dark--line_brown);
-  --theme--line_orange: var(--theme_dark--line_orange);
-  --theme--line_yellow: var(--theme_dark--line_yellow);
-  --theme--line_green: var(--theme_dark--line_green);
-  --theme--line_blue: var(--theme_dark--line_blue);
-  --theme--line_purple: var(--theme_dark--line_purple);
-  --theme--line_pink: var(--theme_dark--line_pink);
-  --theme--line_red: var(--theme_dark--line_red);
-  --theme--code_inline-text: var(--theme_dark--code_inline-text);
-  --theme--code_inline-background: var(--theme_dark--code_inline-background);
-  --theme--code_text: var(--theme_dark--code_text);
-  --theme--code-background: var(--theme_dark--code-background);
-  --theme--code_function: var(--theme_dark--code_function);
-  --theme--code_keyword: var(--theme_dark--code_keyword);
-  --theme--code_tag: var(--theme_dark--code_tag);
-  --theme--code_operator: var(--theme_dark--code_operator);
-  --theme--code_important: var(--theme_dark--code_important);
-  --theme--code_property: var(--theme_dark--code_property);
-  --theme--code_builtin: var(--theme_dark--code_builtin);
-  --theme--code_attr-name: var(--theme_dark--code_attr-name);
-  --theme--code_comment: var(--theme_dark--code_comment);
-  --theme--code_punctuation: var(--theme_dark--code_punctuation);
-  --theme--code_doctype: var(--theme_dark--code_doctype);
-  --theme--code_number: var(--theme_dark--code_number);
-  --theme--code_string: var(--theme_dark--code_string);
-  --theme--code_attr-value: var(--theme_dark--code_attr-value);
-}
-
-.notion-light-theme {
-  --theme--main: var(--theme_light--main);
-  --theme--sidebar: var(--theme_light--sidebar);
-  --theme--overlay: var(--theme_light--overlay);
-  --theme--dragarea: var(--theme_light--dragarea);
-  --theme--preview-width: var(--theme_light--preview-width);
-  --theme--preview-padding: var(--theme_light--preview-padding);
-  --theme--preview_banner-height: var(--theme_light--preview_banner-height);
-  --theme--page_banner-height: var(--theme_light--page_banner-height);
-  --theme--font_sans: var(--theme_light--font_sans);
-  --theme--font_serif: var(--theme_light--font_serif);
-  --theme--font_mono: var(--theme_light--font_mono);
-  --theme--font_code: var(--theme_light--font_code);
-  --theme--font_title-size: var(--theme_light--font_title-size);
-  --theme--font_heading1-size: var(--theme_light--font_heading1-size);
-  --theme--font_heading2-size: var(--theme_light--font_heading2-size);
-  --theme--font_heading3-size: var(--theme_light--font_heading3-size);
-  --theme--font_label-size: var(--theme_light--font_label-size);
-  --theme--font_body-size: var(--theme_light--font_body-size);
-  --theme--font_body-size_small: var(--theme_light--font_body-size_small);
-  --theme--font_code-size: var(--theme_light--font_code-size);
-  --theme--font_sidebar-size: var(--theme_light--font_sidebar-size);
-  --theme--scrollbar: var(--theme_light--scrollbar);
-  --theme--scrollbar-border: var(--theme_light--scrollbar-border);
-  --theme--scrollbar_hover: var(--theme_light--scrollbar_hover);
-  --theme--card: var(--theme_light--card);
-  --theme--gallery: var(--theme_light--gallery);
-  --theme--table-border: var(--theme_light--table-border);
-  --theme--interactive_hover: var(--theme_light--interactive_hover);
-  --theme--interactive_hover-border: var(
-    --theme_light--interactive_hover-border
-  );
-  --theme--button_close: var(--theme_light--button_close);
-  --theme--button_close-fill: var(--theme_light--button_close-fill);
-  --theme--selected: var(--theme_light--selected);
-  --theme--primary: var(--theme_light--primary);
-  --theme--primary_hover: var(--theme_light--primary_hover);
-  --theme--primary_click: var(--theme_light--primary_click);
-  --theme--primary_indicator: var(--theme_light--primary_indicator);
-  --theme--option-color: var(--theme_light--option-color);
-  --theme--option-background: var(--theme_light--option-background);
-  --theme--option_hover-color: var(--theme_light--option_hover-color);
-  --theme--option_hover-background: var(--theme_light--option_hover-background);
-  --theme--option_active-color: var(--theme_light--option_active-color);
-  --theme--option_active-background: var(
-    --theme_light--option_active-background
-  );
-  --theme--danger_text: var(--theme_light--danger_text);
-  --theme--danger_border: var(--theme_light--danger_border);
-  --theme--text: var(--theme_light--text);
-  --theme--text_ui: var(--theme_light--text_ui);
-  --theme--text_ui_info: var(--theme_light--text_ui_info);
-  --theme--text_gray: var(--theme_light--text_gray);
-  --theme--text_brown: var(--theme_light--text_brown);
-  --theme--text_orange: var(--theme_light--text_orange);
-  --theme--text_yellow: var(--theme_light--text_yellow);
-  --theme--text_green: var(--theme_light--text_green);
-  --theme--text_blue: var(--theme_light--text_blue);
-  --theme--text_purple: var(--theme_light--text_purple);
-  --theme--text_pink: var(--theme_light--text_pink);
-  --theme--text_red: var(--theme_light--text_red);
-  --theme--select_text: var(--theme_light--select_text);
-  --theme--select_gray: var(--theme_light--select_gray);
-  --theme--select_brown: var(--theme_light--select_brown);
-  --theme--select_orange: var(--theme_light--select_orange);
-  --theme--select_yellow: var(--theme_light--select_yellow);
-  --theme--select_green: var(--theme_light--select_green);
-  --theme--select_blue: var(--theme_light--select_blue);
-  --theme--select_purple: var(--theme_light--select_purple);
-  --theme--select_pink: var(--theme_light--select_pink);
-  --theme--select_red: var(--theme_light--select_red);
-  --theme--bg_text: var(--theme_light--bg_text);
-  --theme--bg_gray: var(--theme_light--bg_gray);
-  --theme--bg_brown: var(--theme_light--bg_brown);
-  --theme--bg_orange: var(--theme_light--bg_orange);
-  --theme--bg_yellow: var(--theme_light--bg_yellow);
-  --theme--bg_green: var(--theme_light--bg_green);
-  --theme--bg_blue: var(--theme_light--bg_blue);
-  --theme--bg_purple: var(--theme_light--bg_purple);
-  --theme--bg_pink: var(--theme_light--bg_pink);
-  --theme--bg_red: var(--theme_light--bg_red);
-  --theme--line_text: var(--theme_light--line_text);
-  --theme--line_gray: var(--theme_light--line_gray);
-  --theme--line_brown: var(--theme_light--line_brown);
-  --theme--line_orange: var(--theme_light--line_orange);
-  --theme--line_yellow: var(--theme_light--line_yellow);
-  --theme--line_green: var(--theme_light--line_green);
-  --theme--line_blue: var(--theme_light--line_blue);
-  --theme--line_purple: var(--theme_light--line_purple);
-  --theme--line_pink: var(--theme_light--line_pink);
-  --theme--line_red: var(--theme_light--line_red);
-  --theme--code_inline-text: var(--theme_light--code_inline-text);
-  --theme--code_inline-background: var(--theme_light--code_inline-background);
-  --theme--code_text: var(--theme_light--code_text);
-  --theme--code-background: var(--theme_light--code-background);
-  --theme--code_function: var(--theme_light--code_function);
-  --theme--code_keyword: var(--theme_light--code_keyword);
-  --theme--code_tag: var(--theme_light--code_tag);
-  --theme--code_operator: var(--theme_light--code_operator);
-  --theme--code_important: var(--theme_light--code_important);
-  --theme--code_property: var(--theme_light--code_property);
-  --theme--code_builtin: var(--theme_light--code_builtin);
-  --theme--code_attr-name: var(--theme_light--code_attr-name);
-  --theme--code_comment: var(--theme_light--code_comment);
-  --theme--code_punctuation: var(--theme_light--code_punctuation);
-  --theme--code_doctype: var(--theme_light--code_doctype);
-  --theme--code_number: var(--theme_light--code_number);
-  --theme--code_string: var(--theme_light--code_string);
-  --theme--code_attr-value: var(--theme_light--code_attr-value);
-}
diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css
index 339c09e..59c1a3d 100644
--- a/mods/core/css/menu.css
+++ b/mods/core/css/menu.css
@@ -123,7 +123,8 @@ s {
 #alerts [role='alert'] {
   display: flex;
   padding: 0.75em;
-  /* border: 1px solid var(--theme--text_ui_info); */
+  background: var(--theme--interactive_hover);
+  border: 1px solid var(--theme--interactive_hover-border);
 }
 #alerts [role='alert']::before {
   content: '!';
@@ -132,30 +133,43 @@ s {
   font-weight: bold;
   font-size: 1.2em;
   padding-right: 0.5rem;
-  color: var(--theme--bg_text);
+  color: var(--theme--interactive_hover-border);
 }
 #alerts [role='alert'] p {
   font-size: 1rem;
   margin: auto 0;
   padding-left: 0.5em;
-  color: var(--theme--bg_text);
+  color: var(--theme--line_text);
 }
 
+#alerts .error::before {
+  color: var(--theme--select_red);
+}
 #alerts .error {
-  background: var(--theme--bg_red);
+  background: var(--theme--line_red);
+  border-color: var(--theme--select_red);
+}
+#alerts .warning::before {
+  color: var(--theme--select_yellow);
 }
 #alerts .warning {
-  background: var(--theme--bg_yellow);
+  background: var(--theme--line_yellow);
+  border-color: var(--theme--select_yellow);
+}
+#alerts .info::before {
+  color: var(--theme--select_blue);
 }
 #alerts .info {
-  background: var(--theme--bg_blue);
+  background: var(--theme--line_blue);
+  border-color: var(--theme--select_blue);
 }
-
 #alerts .success::before {
   content: '✓';
+  color: var(--theme--select_green);
 }
 #alerts .success {
-  background: var(--theme--bg_green);
+  background: var(--theme--line_green);
+  border-color: var(--theme--select_green);
 }
 
 #alerts code {
@@ -188,7 +202,7 @@ s {
 #search > input {
   width: 100%;
   padding: 1em 1.4em 1em 2.8em;
-  font: 1em var(--font);
+  font: 1em var(--theme--font_sans);
   background: var(--theme--card);
   border: 1px solid var(--theme--table-border);
   color: var(--theme--text);
@@ -249,21 +263,6 @@ s {
   font-size: 1rem;
 }
 
-/* #modules section .meta .toggle input + label .switch::before {
-  background: linear-gradient(
-    90deg,
-    var(--theme--text_green),
-    var(--theme--bg_green)
-  );
-}
-#modules section .meta .toggle input + label .switch {
-  background: linear-gradient(
-    90deg,
-    var(--theme--text_red),
-    var(--theme--bg_red)
-  );
-} */
-
 #modules section .desc {
   margin: 0.3em 0 0.4em 0;
   font-size: 0.9em;
@@ -439,7 +438,7 @@ s {
   transform: translateX(var(--menu--toggle_offset, 0));
   transition: transform 350ms, box-shadow 350ms;
   background: var(--theme--option_active-color);
-  box-shadow: 2px 1px 4px var(--theme--table-border);
+  /* box-shadow: 2px 1px 4px var(--theme--table-border); */
 }
 .toggle input[type='checkbox']:checked:focus + label .switch {
   background: none !important;
diff --git a/mods/core/css/shared.css b/mods/core/css/shared.css
deleted file mode 100644
index 058ef1e..0000000
--- a/mods/core/css/shared.css
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
- * notion-enhancer
- * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (c) 2020 TarasokUA
- * (c) 2020 Arecsu
- * (c) 2020 u/zenith_illinois
- * under the MIT license
- */
-
-@import './localised.css';
-
-/* inputs */
-.notion-focusable:focus-within {
-  /* var(--theme--primary) 0px 0px 0px 1px inset, */
-  box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
-}
-
-/* colour help button - one of the few specific classes notion does give us */
-.notion-help-button {
-  background: var(--theme--interactive_hover) !important;
-  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
-}
-
-/* prevent block hover options overlaying topbar */
-*:not([style*='z-index']) {
-  z-index: 1;
-}
-
-/* fix highlight padding: this isn't a typo */
-[style*='background:rgb('] {
-  padding-bottom: 3px !important;
-}
-
-/* smooth transitions */
-.notion-calendar-view-day,
-.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end),
-.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
-.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover,
-.DayPicker:not(.DayPicker--interactionDisabled)
-  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
-  transition: all 200ms ease !important;
-}
-.notion-token-remove-button {
-  transition: opacity 200ms ease !important;
-}
-.notion-to_do-block > div > div > div[style*='background:'] {
-  transition: background 200ms ease !important;
-}
-
-/* normalise inline-table size */
-.notion-page-content .notion-collection_view-block {
-  width: 100% !important;
-}
-.notion-page-content
-  .notion-collection_view-block
-  [style*='padding-left: 50px'],
-.notion-page-content
-  .notion-collection_view-block
-  [style*='padding-left: 96px'],
-.notion-page-content
-  .notion-collection_view-block
-  [style*='padding-left: 126px'] {
-  padding-left: 0 !important;
-}
-.notion-page-content
-  .notion-collection_view-block
-  [style*='padding-right: 50px'],
-.notion-page-content
-  .notion-collection_view-block
-  [style*='padding-right: 96px'],
-.notion-page-content
-  .notion-collection_view-block
-  [style*='padding-right: 126px'] {
-  padding-right: 0 !important;
-}
-.notion-page-content
-  .notion-collection_view-block
-  [style*='min-width: calc(100% - 192px);'],
-.notion-page-content
-  .notion-collection_view-block
-  [style*='min-width: 708px;'] {
-  min-width: 100% !important;
-}
-.notion-page-content .notion-collection_view-block > div {
-  padding: 0 1px;
-}
-
-/* fix button resizing */
-.notion-collection_view-block [role='button'],
-.notion-collection_view_page-block [role='button'] {
-  border-width: 0 !important;
-}
-
-/* page preview sizing */
-.notion-peek-renderer > div:nth-child(2) {
-  max-width: var(--theme--preview-width) !important;
-}
-.notion-peek-renderer .notion-page-content [style*='max-width: 943px;'] {
-  max-width: none !important;
-}
-
-.notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='padding-left: calc(126px + env(safe-area-inset-left));'] {
-  padding-left: var(--theme--preview-padding) !important;
-}
-.notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='padding-right: calc(126px + env(safe-area-inset-right));'] {
-  padding-right: var(--theme--preview-padding) !important;
-}
-.notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='margin-left: calc(126px + env(safe-area-inset-left));'] {
-  margin-left: var(--theme--preview-padding) !important;
-}
-.notion-peek-renderer
-  .notion-scroller.vertical
-  [style*='margin-right: calc(126px + env(safe-area-inset-right));'] {
-  margin-right: var(--theme--preview-padding) !important;
-}
-.notion-peek-renderer .notion-page-content {
-  padding-left: var(--theme--preview-padding) !important;
-  padding-right: var(--theme--preview-padding) !important;
-  width: 100%;
-}
-
-/* prevent block hover options overlaying topbar */
-.notion-topbar {
-  background: var(--theme--main);
-}
-
-/* checkboxes */
-.notion-to_do-block > div [role='button']:hover,
-.notion-to_do-block > div [role='button']:hover .checkboxSquare,
-.notion-to_do-block > div [role='button']:hover .check {
-  background: var(--theme--option_hover-background) !important;
-}
-.notion-to_do-block > div [role='button']:hover .checkboxSquare path,
-.notion-to_do-block > div [role='button']:hover .check polygon {
-  fill: var(--theme--option_hover-color) !important;
-}
-.notion-to_do-block > div [role='button']:not(:hover) .check {
-  background: var(--theme--option_active-background) !important;
-}
-.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
-  fill: var(--theme--option_active-color) !important;
-}
-
-/* fonts */
-[style*='Segoe UI'] {
-  font-family: var(--theme--font_sans) !important;
-}
-[style*='Georgia'] {
-  font-family: var(--theme--font_serif) !important;
-}
-[style*='iawriter-mono'] {
-  font-family: var(--theme--font_mono) !important;
-}
-[style*='SFMono-Regular'] {
-  font-family: var(--theme--font_code) !important;
-}
-.notion-frame .notion-page-block div[placeholder='Untitled'] {
-  font-size: var(--theme--font_title-size) !important;
-}
-[placeholder='Heading 1'] {
-  font-size: calc(
-    var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
-  ) !important;
-}
-[placeholder='Heading 2'] {
-  font-size: calc(
-    var(--theme--font_body-size) * (var(--theme--font_heading2-size) / 1em)
-  ) !important;
-}
-[placeholder='Heading 3'] {
-  font-size: calc(
-    var(--theme--font_body-size) * (var(--theme--font_heading3-size) / 1em)
-  ) !important;
-}
-.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'] {
-  font-size: var(--theme--font_label-size) !important;
-}
-.notion-frame .notion-scroller.vertical.horizontal .notion-page-content {
-  font-size: var(--theme--font_body-size) !important;
-}
-.notion-frame
-  .notion-scroller.vertical.horizontal
-  .notion-page-content[style*='font-size: 14px'] {
-  font-size: var(--theme--font_body-size_small) !important;
-}
-.notion-code-block [placeholder=' '] {
-  font-size: var(--theme--font_code-size) !important;
-}
-.notion-sidebar [style*='font-size: 14px'] {
-  font-size: var(--theme--font_sidebar-size) !important;
-}
-
-/* code */
-.notion-page-content .notion-code-block {
-  background: var(--theme--code-background) !important;
-}
-.notion-code-block > div {
-  color: var(--theme--code_text) !important;
-}
-.notion-code-block .token.function {
-  color: var(--theme--code_function) !important;
-}
-.notion-code-block .token.keyword {
-  color: var(--theme--code_keyword) !important;
-}
-.notion-code-block .token.tag {
-  color: var(--theme--code_tag) !important;
-}
-.notion-code-block .token.operator {
-  color: var(--theme--code_operator) !important;
-}
-.notion-code-block .token.important {
-  color: var(--theme--code_important) !important;
-}
-.notion-code-block .token.property {
-  color: var(--theme--code_property) !important;
-}
-.notion-code-block .token.builtin {
-  color: var(--theme--code_builtin) !important;
-}
-.notion-code-block .token.attr-name {
-  color: var(--theme--code_attr-name) !important;
-}
-.notion-code-block .token.attr-value {
-  color: var(--theme--code_attr-value) !important;
-}
-.notion-code-block .token.comment {
-  color: var(--theme--code_comment) !important;
-}
-.notion-code-block .token.punctuation {
-  color: var(--theme--code_punctuation) !important;
-}
-.notion-code-block .token.doctype {
-  color: var(--theme--code_doctype) !important;
-}
-.notion-code-block .token.number {
-  color: var(--theme--code_number) !important;
-}
-.notion-code-block .token.string {
-  color: var(--theme--code_string) !important;
-}
diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css
new file mode 100644
index 0000000..96f1efc
--- /dev/null
+++ b/mods/core/css/theme.css
@@ -0,0 +1,640 @@
+/*
+ * notion-enhancer
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 TarasokUA
+ * (c) 2020 Arecsu
+ * (c) 2020 u/zenith_illinois
+ * under the MIT license
+ */
+
+/** app **/
+
+.notion-body.dark [style*='background: rgb(55, 60, 63)'],
+.notion-body.dark [style*='background: rgba(69, 75, 78, 0.3)'],
+.notion-body.dark [style*='background: rgb(120, 123, 123)'],
+.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
+.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'],
+.notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] {
+  background: var(--theme--sidebar) !important;
+}
+.notion-body,
+.notion-body.dark [style*='background: rgb(47, 52, 55)'],
+.notion-body.dark [style*='background-color: rgb(47, 52, 55)'],
+.notion-body:not(.dark)
+  [style*='background: white']:not(.notion-help-button):not([style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;']),
+.notion-body:not(.dark) [style*='background-color: white'] {
+  background: var(--theme--main) !important;
+}
+[style*='background: rgba(15, 15, 15, 0.6)'] {
+  background: var(--theme--overlay) !important;
+}
+
+.notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'],
+.notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;']
+  img {
+  height: var(--theme--preview_banner-height) !important;
+}
+[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'],
+[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
+  img {
+  height: var(--theme--page_banner-height) !important;
+}
+
+/* prevent block hover options overlaying topbar */
+.notion-topbar {
+  background: var(--theme--main);
+}
+*:not([style*='z-index']) {
+  z-index: 1;
+}
+
+/* colour help button - one of the few specific classes notion does give us */
+.notion-help-button {
+  background: var(--theme--interactive_hover) !important;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}
+
+/* page preview sizing */
+.notion-peek-renderer > div:nth-child(2) {
+  max-width: var(--theme--preview-width) !important;
+}
+.notion-peek-renderer .notion-page-content [style*='max-width: 943px;'] {
+  max-width: none !important;
+}
+
+.notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='padding-left: calc(126px + env(safe-area-inset-left));'] {
+  padding-left: var(--theme--preview-padding) !important;
+}
+.notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='padding-right: calc(126px + env(safe-area-inset-right));'] {
+  padding-right: var(--theme--preview-padding) !important;
+}
+.notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='margin-left: calc(126px + env(safe-area-inset-left));'] {
+  margin-left: var(--theme--preview-padding) !important;
+}
+.notion-peek-renderer
+  .notion-scroller.vertical
+  [style*='margin-right: calc(126px + env(safe-area-inset-right));'] {
+  margin-right: var(--theme--preview-padding) !important;
+}
+.notion-peek-renderer .notion-page-content {
+  padding-left: var(--theme--preview-padding) !important;
+  padding-right: var(--theme--preview-padding) !important;
+  width: 100%;
+}
+
+/** fonts **/
+
+[style*='Segoe UI'] {
+  font-family: var(--theme--font_sans) !important;
+}
+[style*='Georgia'] {
+  font-family: var(--theme--font_serif) !important;
+}
+[style*='iawriter-mono'] {
+  font-family: var(--theme--font_mono) !important;
+}
+[style*='SFMono-Regular'] {
+  font-family: var(--theme--font_code) !important;
+}
+.notion-frame .notion-page-block div[placeholder='Untitled'] {
+  font-size: var(--theme--font_title-size) !important;
+}
+[placeholder='Heading 1'] {
+  font-size: calc(
+    var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
+  ) !important;
+}
+[placeholder='Heading 2'] {
+  font-size: calc(
+    var(--theme--font_body-size) * (var(--theme--font_heading2-size) / 1em)
+  ) !important;
+}
+[placeholder='Heading 3'] {
+  font-size: calc(
+    var(--theme--font_body-size) * (var(--theme--font_heading3-size) / 1em)
+  ) !important;
+}
+.notion-frame .notion-scroller.vertical.horizontal [style*='font-size: 14px'] {
+  font-size: var(--theme--font_label-size) !important;
+}
+.notion-frame .notion-scroller.vertical.horizontal .notion-page-content {
+  font-size: var(--theme--font_body-size) !important;
+}
+.notion-frame
+  .notion-scroller.vertical.horizontal
+  .notion-page-content[style*='font-size: 14px'] {
+  font-size: var(--theme--font_body-size_small) !important;
+}
+.notion-code-block [placeholder=' '] {
+  font-size: var(--theme--font_code-size) !important;
+}
+.notion-sidebar [style*='font-size: 14px'] {
+  font-size: var(--theme--font_sidebar-size) !important;
+}
+
+/** databases **/
+
+.notion-body.dark [style*='background: rgb(63, 68, 71)'],
+.notion-body.dark [style*='background-color: rgb(64, 68, 71);'],
+.notion-body:not(.dark)
+  .notion-scroller.horizontal.vertical
+  .notion-selectable
+  > a[style*='background: white'],
+.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'] {
+  background: var(--theme--card) !important;
+}
+.notion-body.dark
+  .notion-page-block.notion-collection-item
+  [style*='background: rgba(255, 255, 255, 0.05)'],
+.notion-body:not(.dark)
+  .notion-page-block.notion-collection-item
+  [style*='background: rgba(55, 53, 47, 0.024)'] {
+  background: var(--theme--gallery) !important;
+}
+
+.notion-body.dark
+  [style*='box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px'],
+.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] {
+  box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.1) 0px 2px 4px !important;
+}
+
+.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
+  box-shadow: var(--theme--main) -3px 0px 0px !important;
+}
+.notion-body.dark
+  [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] {
+  box-shadow: var(--theme--main) -3px 0px 0px,
+    var(--theme--table-border) 0px 1px 0px !important;
+}
+
+.notion-body.dark [style*='border-top: 1px solid rgba(255, 255, 255,'],
+.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] {
+  border-top: 1px solid var(--theme--table-border) !important;
+}
+.notion-body.dark
+  [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] {
+  box-shadow: var(--theme--table-border) -1px 0px 0px !important;
+}
+.notion-body.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'],
+.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
+  border-bottom: 1px solid var(--theme--table-border) !important;
+}
+.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px'] {
+  box-shadow: var(--theme--table-border) 0px 1px 0px !important;
+}
+.notion-body.dark [style*='border-right: 1px solid rgba(255, 255, 255,'],
+.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47,'] {
+  border-right: 1px solid var(--theme--table-border) !important;
+}
+.notion-body.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'],
+.notion-body.dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] {
+  box-shadow: var(--theme--table-border) 0px -1px 0px !important;
+}
+.notion-body.dark [style*='border-left: 1px solid rgba(255, 255, 255,'],
+.notion-body.dark
+  .notion-block-permission-settings-public-access
+  [role='button'][style*='border-left: none'],
+.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47,'] {
+  border-left: 1px solid var(--theme--table-border) !important;
+}
+.notion-body.dark
+  [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] {
+  box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
+}
+.notion-body.dark
+  [style*='box-shadow: rgba(255, 255, 255, 0.14) 1px 0px 0px inset'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) 1px 0px 0px inset'] {
+  box-shadow: var(--theme--table-border) 1px 0px 0px inset !important;
+}
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(55, 53, 47, 0.16) -1px 0px 0px'] {
+  box-shadow: -1px -1px 0 var(--theme--table-border) !important;
+}
+
+.notion-body.dark
+  [style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'],
+.notion-body:not(.dark)
+  [style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
+  background-image: linear-gradient(
+    to right,
+    var(--theme--bg_gray) 0%,
+    var(--theme--bg_gray) 100%
+  ) !important;
+}
+
+.notion-body.dark [style*='background: rgb(71, 76, 80)'],
+.notion-body.dark [style*='background: rgb(80, 85, 88)'],
+.notion-body.dark [style*='background: rgb(98, 102, 104)'],
+.notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'],
+.notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'],
+.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] {
+  background: var(--theme--interactive_hover) !important;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
+}
+
+/* normalise inline-table size */
+.notion-page-content .notion-collection_view-block {
+  width: 100% !important;
+}
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 50px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 96px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-left: 126px'] {
+  padding-left: 0 !important;
+}
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-right: 50px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-right: 96px'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='padding-right: 126px'] {
+  padding-right: 0 !important;
+}
+.notion-page-content
+  .notion-collection_view-block
+  [style*='min-width: calc(100% - 192px);'],
+.notion-page-content
+  .notion-collection_view-block
+  [style*='min-width: 708px;'] {
+  min-width: 100% !important;
+}
+.notion-page-content .notion-collection_view-block > div {
+  padding: 0 1px;
+}
+
+/* smooth transitions */
+.notion-calendar-view-day,
+.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end),
+.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected,
+.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover,
+.DayPicker:not(.DayPicker--interactionDisabled)
+  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) {
+  transition: all 200ms ease !important;
+}
+.notion-token-remove-button {
+  transition: opacity 200ms ease !important;
+}
+.notion-to_do-block > div > div > div[style*='background:'] {
+  transition: background 200ms ease !important;
+}
+
+/* fix button resizing */
+.notion-collection_view-block [role='button'],
+.notion-collection_view_page-block [role='button'] {
+  border-width: 0 !important;
+}
+
+/** general ui **/
+
+::selection,
+[style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']),
+[style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) {
+  background: var(--theme--selected) !important;
+}
+
+[style*=' color: rgb(46, 170, 220)'] {
+  color: var(--theme--primary) !important;
+}
+[style*='fill: rgb(46, 170, 220)'] {
+  fill: var(--theme--primary) !important;
+}
+[style*='background: rgb(46, 170, 220)'],
+[style*='background-color: rgb(46, 170, 220)'] {
+  background: var(--theme--primary) !important;
+}
+[style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] {
+  box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important;
+}
+[style*='background: rgb(6, 156, 205)'] {
+  background: var(--theme--primary_hover) !important;
+}
+[style*='background: rgb(0, 141, 190)'] {
+  background: var(--theme--primary_click) !important;
+}
+.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
+[style*='background: rgb(235, 87, 87)'] {
+  background: var(--theme--primary_indicator) !important;
+}
+
+.notion-to_do-block > div [role='button']:hover,
+.notion-to_do-block > div [role='button']:hover .checkboxSquare,
+.notion-to_do-block > div [role='button']:hover .check {
+  background: var(--theme--option_hover-background) !important;
+}
+.notion-to_do-block > div [role='button']:hover .checkboxSquare path,
+.notion-to_do-block > div [role='button']:hover .check polygon {
+  fill: var(--theme--option_hover-color) !important;
+}
+.notion-to_do-block > div [role='button']:not(:hover) .check {
+  background: var(--theme--option_active-background) !important;
+}
+.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
+  fill: var(--theme--option_active-color) !important;
+}
+
+.notion-to_do-block .checkboxSquare {
+  background: var(--theme--option-background) !important;
+}
+.notion-to_do-block .checkboxSquare path {
+  fill: var(--theme--option-color) !important;
+}
+
+[style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] {
+  color: var(--theme--danger_text) !important;
+  border: 1px solid var(--theme--danger_border) !important;
+}
+/* inputs */
+.notion-focusable:focus-within {
+  box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
+}
+
+/** content colours **/
+
+.notion-body,
+.notion-page-content [style*='color: inherit;'],
+.notion-frame .notion-page-block,
+.notion-body.dark [style*=' color: rgba(255, 255, 255, 0.9)'],
+.notion-body.dark [style*='color: rgba(255, 255, 255, 0.7)'],
+.notion-body:not(.dark) [style*=' color: rgb(55, 53, 47);'] {
+  color: var(--theme--text) !important;
+}
+.notion-body.dark [style*='color: rgba(255, 255, 255, 0.6)'],
+.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6)'],
+.notion-body:not(.dark) [style*='color: rgba(25, 23, 17, 0.6)'] {
+  color: var(--theme--text_ui) !important;
+}
+.notion-body.dark [style*='color: rgba(255, 255, 255, 0.4)'],
+.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] {
+  color: var(--theme--text_ui_info) !important;
+}
+.notion-body.dark [style*='fill: rgb(202, 204, 206)'] {
+  fill: var(--theme--text) !important;
+}
+.notion-body.dark [style*='fill: rgba(202, 204, 206,'],
+.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'],
+.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] {
+  fill: var(--theme--text_ui) !important;
+}
+.notion-body.dark [style*='caret-color: rgba(255, 255, 255, 0.9)'],
+.notion-body:not(.dark) [style*='caret-color: rgb(55, 53, 47)'] {
+  caret-color: var(--theme--text) !important;
+}
+
+.notion-body.dark [style*='color:rgba(151,154,155,0.95)'],
+.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] {
+  color: var(--theme--text_gray) !important;
+}
+.notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
+  background: var(--theme--select_gray) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(69,75,78)'],
+.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
+  background: var(--theme--bg_gray) !important;
+}
+.notion-body.dark [style*='background: rgb(69, 75, 78)'],
+.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_gray) !important;
+}
+.notion-body.dark [style*='color:rgb(147,114,100)'],
+.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] {
+  color: var(--theme--text_brown) !important;
+}
+.notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
+  background: var(--theme--select_brown) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(67,64,64)'],
+.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
+  background: var(--theme--bg_brown) !important;
+}
+.notion-body.dark [style*='background: rgb(67, 64, 64)'],
+.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_brown) !important;
+}
+.notion-body.dark [style*='color:rgb(255,163,68)'],
+.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] {
+  color: var(--theme--text_orange) !important;
+}
+.notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
+  background: var(--theme--select_orange) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(89,74,58)'],
+.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
+  background: var(--theme--bg_orange) !important;
+}
+.notion-body.dark [style*='background: rgb(89, 74, 58)'],
+.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_orange) !important;
+}
+.notion-body.dark [style*='color:rgb(255,220,73)'],
+.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] {
+  color: var(--theme--text_yellow) !important;
+}
+.notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
+  background: var(--theme--select_yellow) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(89,86,59)'],
+.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
+  background: var(--theme--bg_yellow) !important;
+}
+.notion-body.dark [style*='background: rgb(89, 86, 59)'],
+.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_yellow) !important;
+}
+.notion-body.dark [style*='color:rgb(77,171,154)'],
+.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] {
+  color: var(--theme--text_green) !important;
+}
+.notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
+  background: var(--theme--select_green) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(53,76,75)'],
+.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
+  background: var(--theme--bg_green) !important;
+}
+.notion-body.dark [style*='background: rgb(53, 76, 75)'],
+.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_green) !important;
+}
+.notion-body.dark [style*='color:rgb(82,156,202)'],
+.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] {
+  color: var(--theme--text_blue) !important;
+}
+.notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
+  background: var(--theme--select_blue) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(54,73,84)'],
+.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
+  background: var(--theme--bg_blue) !important;
+}
+.notion-body.dark [style*='background: rgb(54, 73, 84)'],
+.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_blue) !important;
+}
+.notion-body.dark [style*='color:rgb(154,109,215)'],
+.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] {
+  color: var(--theme--text_purple) !important;
+}
+.notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
+  background: var(--theme--select_purple) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(68,63,87)'],
+.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
+  background: var(--theme--bg_purple) !important;
+}
+.notion-body.dark [style*='background: rgb(68, 63, 87)'],
+.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_purple) !important;
+}
+.notion-body.dark [style*='color:rgb(226,85,161)'],
+.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] {
+  color: var(--theme--text_pink) !important;
+}
+.notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'],
+.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
+  background: var(--theme--select_pink) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(83,59,76)'],
+.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
+  background: var(--theme--bg_pink) !important;
+}
+.notion-body.dark [style*='background: rgb(83, 59, 76)'],
+.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_pink) !important;
+}
+.notion-body.dark [style*='color:rgb(255,115,105)'],
+.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] {
+  color: var(--theme--text_red) !important;
+}
+.notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'],
+.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {
+  background: var(--theme--select_red) !important;
+  color: var(--theme--select_text) !important;
+}
+.notion-body.dark [style*='background:rgb(89,65,65)'],
+.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
+  background: var(--theme--bg_red) !important;
+}
+.notion-body.dark [style*='background: rgb(89, 65, 65)'],
+.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] {
+  color: var(--theme--line_text) !important;
+  background: var(--theme--line_red) !important;
+}
+
+/* fix highlight padding: this isn't a typo */
+[style*='background:rgb('] {
+  padding-bottom: 3px !important;
+  color: var(--theme--bg_text) !important;
+}
+
+/** code **/
+
+[style*='color:#EB5757'] {
+  color: var(--theme--code_inline-text) !important;
+  background: var(--theme--code_inline-background) !important;
+}
+
+.notion-page-content .notion-code-block {
+  background: var(--theme--code-background) !important;
+}
+.notion-code-block > div {
+  color: var(--theme--code_text) !important;
+}
+.notion-code-block .token.function {
+  color: var(--theme--code_function) !important;
+}
+.notion-code-block .token.keyword {
+  color: var(--theme--code_keyword) !important;
+}
+.notion-code-block .token.tag {
+  color: var(--theme--code_tag) !important;
+}
+.notion-code-block .token.operator {
+  color: var(--theme--code_operator) !important;
+}
+.notion-code-block .token.important {
+  color: var(--theme--code_important) !important;
+}
+.notion-code-block .token.property {
+  color: var(--theme--code_property) !important;
+}
+.notion-code-block .token.builtin {
+  color: var(--theme--code_builtin) !important;
+}
+.notion-code-block .token.attr-name {
+  color: var(--theme--code_attr-name) !important;
+}
+.notion-code-block .token.attr-value {
+  color: var(--theme--code_attr-value) !important;
+}
+.notion-code-block .token.comment {
+  color: var(--theme--code_comment) !important;
+}
+.notion-code-block .token.punctuation {
+  color: var(--theme--code_punctuation) !important;
+}
+.notion-code-block .token.doctype {
+  color: var(--theme--code_doctype) !important;
+}
+.notion-code-block .token.number {
+  color: var(--theme--code_number) !important;
+}
+.notion-code-block .token.string {
+  color: var(--theme--code_string) !important;
+}
diff --git a/mods/core/css/variables.css b/mods/core/css/variables.css
index 883bb8f..f68ad02 100644
--- a/mods/core/css/variables.css
+++ b/mods/core/css/variables.css
@@ -258,3 +258,225 @@
   --theme_light--code_string: #690;
   --theme_light--code_attr-value: #07a;
 }
+
+.notion-dark-theme {
+  --theme--main: var(--theme_dark--main);
+  --theme--sidebar: var(--theme_dark--sidebar);
+  --theme--overlay: var(--theme_dark--overlay);
+  --theme--dragarea: var(--theme_dark--dragarea);
+  --theme--preview-width: var(--theme_dark--preview-width);
+  --theme--preview-padding: var(--theme_dark--preview-padding);
+  --theme--preview_banner-height: var(--theme_dark--preview_banner-height);
+  --theme--page_banner-height: var(--theme_dark--page_banner-height);
+  --theme--font_sans: var(--theme_dark--font_sans);
+  --theme--font_serif: var(--theme_dark--font_serif);
+  --theme--font_mono: var(--theme_dark--font_mono);
+  --theme--font_code: var(--theme_dark--font_code);
+  --theme--font_title-size: var(--theme_dark--font_title-size);
+  --theme--font_heading1-size: var(--theme_dark--font_heading1-size);
+  --theme--font_heading2-size: var(--theme_dark--font_heading2-size);
+  --theme--font_heading3-size: var(--theme_dark--font_heading3-size);
+  --theme--font_label-size: var(--theme_dark--font_label-size);
+  --theme--font_body-size: var(--theme_dark--font_body-size);
+  --theme--font_body-size_small: var(--theme_dark--font_body-size_small);
+  --theme--font_code-size: var(--theme_dark--font_code-size);
+  --theme--font_sidebar-size: var(--theme_dark--font_sidebar-size);
+  --theme--scrollbar: var(--theme_dark--scrollbar);
+  --theme--scrollbar-border: var(--theme_dark--scrollbar-border);
+  --theme--scrollbar_hover: var(--theme_dark--scrollbar_hover);
+  --theme--card: var(--theme_dark--card);
+  --theme--gallery: var(--theme_dark--gallery);
+  --theme--table-border: var(--theme_dark--table-border);
+  --theme--interactive_hover: var(--theme_dark--interactive_hover);
+  --theme--interactive_hover-border: var(
+    --theme_dark--interactive_hover-border
+  );
+  --theme--button_close: var(--theme_dark--button_close);
+  --theme--button_close-fill: var(--theme_dark--button_close-fill);
+  --theme--selected: var(--theme_dark--selected);
+  --theme--primary: var(--theme_dark--primary);
+  --theme--primary_hover: var(--theme_dark--primary_hover);
+  --theme--primary_click: var(--theme_dark--primary_click);
+  --theme--primary_indicator: var(--theme_dark--primary_indicator);
+  --theme--option-color: var(--theme_dark--option-color);
+  --theme--option-background: var(--theme_dark--option-background);
+  --theme--option_active-color: var(--theme_dark--option_active-color);
+  --theme--option_active-background: var(
+    --theme_dark--option_active-background
+  );
+  --theme--option_hover-color: var(--theme_dark--option_hover-color);
+  --theme--option_hover-background: var(--theme_dark--option_hover-background);
+  --theme--danger_text: var(--theme_dark--danger_text);
+  --theme--danger_border: var(--theme_dark--danger_border);
+  --theme--text: var(--theme_dark--text);
+  --theme--text_ui: var(--theme_dark--text_ui);
+  --theme--text_ui_info: var(--theme_dark--text_ui_info);
+  --theme--text_gray: var(--theme_dark--text_gray);
+  --theme--text_brown: var(--theme_dark--text_brown);
+  --theme--text_orange: var(--theme_dark--text_orange);
+  --theme--text_yellow: var(--theme_dark--text_yellow);
+  --theme--text_green: var(--theme_dark--text_green);
+  --theme--text_blue: var(--theme_dark--text_blue);
+  --theme--text_purple: var(--theme_dark--text_purple);
+  --theme--text_pink: var(--theme_dark--text_pink);
+  --theme--text_red: var(--theme_dark--text_red);
+  --theme--select_text: var(--theme_dark--select_text);
+  --theme--select_gray: var(--theme_dark--select_gray);
+  --theme--select_brown: var(--theme_dark--select_brown);
+  --theme--select_orange: var(--theme_dark--select_orange);
+  --theme--select_yellow: var(--theme_dark--select_yellow);
+  --theme--select_green: var(--theme_dark--select_green);
+  --theme--select_blue: var(--theme_dark--select_blue);
+  --theme--select_purple: var(--theme_dark--select_purple);
+  --theme--select_pink: var(--theme_dark--select_pink);
+  --theme--select_red: var(--theme_dark--select_red);
+  --theme--bg_text: var(--theme_dark--bg_text);
+  --theme--bg_gray: var(--theme_dark--bg_gray);
+  --theme--bg_brown: var(--theme_dark--bg_brown);
+  --theme--bg_orange: var(--theme_dark--bg_orange);
+  --theme--bg_yellow: var(--theme_dark--bg_yellow);
+  --theme--bg_green: var(--theme_dark--bg_green);
+  --theme--bg_blue: var(--theme_dark--bg_blue);
+  --theme--bg_purple: var(--theme_dark--bg_purple);
+  --theme--bg_pink: var(--theme_dark--bg_pink);
+  --theme--bg_red: var(--theme_dark--bg_red);
+  --theme--line_text: var(--theme_dark--line_text);
+  --theme--line_gray: var(--theme_dark--line_gray);
+  --theme--line_brown: var(--theme_dark--line_brown);
+  --theme--line_orange: var(--theme_dark--line_orange);
+  --theme--line_yellow: var(--theme_dark--line_yellow);
+  --theme--line_green: var(--theme_dark--line_green);
+  --theme--line_blue: var(--theme_dark--line_blue);
+  --theme--line_purple: var(--theme_dark--line_purple);
+  --theme--line_pink: var(--theme_dark--line_pink);
+  --theme--line_red: var(--theme_dark--line_red);
+  --theme--code_inline-text: var(--theme_dark--code_inline-text);
+  --theme--code_inline-background: var(--theme_dark--code_inline-background);
+  --theme--code_text: var(--theme_dark--code_text);
+  --theme--code-background: var(--theme_dark--code-background);
+  --theme--code_function: var(--theme_dark--code_function);
+  --theme--code_keyword: var(--theme_dark--code_keyword);
+  --theme--code_tag: var(--theme_dark--code_tag);
+  --theme--code_operator: var(--theme_dark--code_operator);
+  --theme--code_important: var(--theme_dark--code_important);
+  --theme--code_property: var(--theme_dark--code_property);
+  --theme--code_builtin: var(--theme_dark--code_builtin);
+  --theme--code_attr-name: var(--theme_dark--code_attr-name);
+  --theme--code_comment: var(--theme_dark--code_comment);
+  --theme--code_punctuation: var(--theme_dark--code_punctuation);
+  --theme--code_doctype: var(--theme_dark--code_doctype);
+  --theme--code_number: var(--theme_dark--code_number);
+  --theme--code_string: var(--theme_dark--code_string);
+  --theme--code_attr-value: var(--theme_dark--code_attr-value);
+}
+
+.notion-light-theme {
+  --theme--main: var(--theme_light--main);
+  --theme--sidebar: var(--theme_light--sidebar);
+  --theme--overlay: var(--theme_light--overlay);
+  --theme--dragarea: var(--theme_light--dragarea);
+  --theme--preview-width: var(--theme_light--preview-width);
+  --theme--preview-padding: var(--theme_light--preview-padding);
+  --theme--preview_banner-height: var(--theme_light--preview_banner-height);
+  --theme--page_banner-height: var(--theme_light--page_banner-height);
+  --theme--font_sans: var(--theme_light--font_sans);
+  --theme--font_serif: var(--theme_light--font_serif);
+  --theme--font_mono: var(--theme_light--font_mono);
+  --theme--font_code: var(--theme_light--font_code);
+  --theme--font_title-size: var(--theme_light--font_title-size);
+  --theme--font_heading1-size: var(--theme_light--font_heading1-size);
+  --theme--font_heading2-size: var(--theme_light--font_heading2-size);
+  --theme--font_heading3-size: var(--theme_light--font_heading3-size);
+  --theme--font_label-size: var(--theme_light--font_label-size);
+  --theme--font_body-size: var(--theme_light--font_body-size);
+  --theme--font_body-size_small: var(--theme_light--font_body-size_small);
+  --theme--font_code-size: var(--theme_light--font_code-size);
+  --theme--font_sidebar-size: var(--theme_light--font_sidebar-size);
+  --theme--scrollbar: var(--theme_light--scrollbar);
+  --theme--scrollbar-border: var(--theme_light--scrollbar-border);
+  --theme--scrollbar_hover: var(--theme_light--scrollbar_hover);
+  --theme--card: var(--theme_light--card);
+  --theme--gallery: var(--theme_light--gallery);
+  --theme--table-border: var(--theme_light--table-border);
+  --theme--interactive_hover: var(--theme_light--interactive_hover);
+  --theme--interactive_hover-border: var(
+    --theme_light--interactive_hover-border
+  );
+  --theme--button_close: var(--theme_light--button_close);
+  --theme--button_close-fill: var(--theme_light--button_close-fill);
+  --theme--selected: var(--theme_light--selected);
+  --theme--primary: var(--theme_light--primary);
+  --theme--primary_hover: var(--theme_light--primary_hover);
+  --theme--primary_click: var(--theme_light--primary_click);
+  --theme--primary_indicator: var(--theme_light--primary_indicator);
+  --theme--option-color: var(--theme_light--option-color);
+  --theme--option-background: var(--theme_light--option-background);
+  --theme--option_hover-color: var(--theme_light--option_hover-color);
+  --theme--option_hover-background: var(--theme_light--option_hover-background);
+  --theme--option_active-color: var(--theme_light--option_active-color);
+  --theme--option_active-background: var(
+    --theme_light--option_active-background
+  );
+  --theme--danger_text: var(--theme_light--danger_text);
+  --theme--danger_border: var(--theme_light--danger_border);
+  --theme--text: var(--theme_light--text);
+  --theme--text_ui: var(--theme_light--text_ui);
+  --theme--text_ui_info: var(--theme_light--text_ui_info);
+  --theme--text_gray: var(--theme_light--text_gray);
+  --theme--text_brown: var(--theme_light--text_brown);
+  --theme--text_orange: var(--theme_light--text_orange);
+  --theme--text_yellow: var(--theme_light--text_yellow);
+  --theme--text_green: var(--theme_light--text_green);
+  --theme--text_blue: var(--theme_light--text_blue);
+  --theme--text_purple: var(--theme_light--text_purple);
+  --theme--text_pink: var(--theme_light--text_pink);
+  --theme--text_red: var(--theme_light--text_red);
+  --theme--select_text: var(--theme_light--select_text);
+  --theme--select_gray: var(--theme_light--select_gray);
+  --theme--select_brown: var(--theme_light--select_brown);
+  --theme--select_orange: var(--theme_light--select_orange);
+  --theme--select_yellow: var(--theme_light--select_yellow);
+  --theme--select_green: var(--theme_light--select_green);
+  --theme--select_blue: var(--theme_light--select_blue);
+  --theme--select_purple: var(--theme_light--select_purple);
+  --theme--select_pink: var(--theme_light--select_pink);
+  --theme--select_red: var(--theme_light--select_red);
+  --theme--bg_text: var(--theme_light--bg_text);
+  --theme--bg_gray: var(--theme_light--bg_gray);
+  --theme--bg_brown: var(--theme_light--bg_brown);
+  --theme--bg_orange: var(--theme_light--bg_orange);
+  --theme--bg_yellow: var(--theme_light--bg_yellow);
+  --theme--bg_green: var(--theme_light--bg_green);
+  --theme--bg_blue: var(--theme_light--bg_blue);
+  --theme--bg_purple: var(--theme_light--bg_purple);
+  --theme--bg_pink: var(--theme_light--bg_pink);
+  --theme--bg_red: var(--theme_light--bg_red);
+  --theme--line_text: var(--theme_light--line_text);
+  --theme--line_gray: var(--theme_light--line_gray);
+  --theme--line_brown: var(--theme_light--line_brown);
+  --theme--line_orange: var(--theme_light--line_orange);
+  --theme--line_yellow: var(--theme_light--line_yellow);
+  --theme--line_green: var(--theme_light--line_green);
+  --theme--line_blue: var(--theme_light--line_blue);
+  --theme--line_purple: var(--theme_light--line_purple);
+  --theme--line_pink: var(--theme_light--line_pink);
+  --theme--line_red: var(--theme_light--line_red);
+  --theme--code_inline-text: var(--theme_light--code_inline-text);
+  --theme--code_inline-background: var(--theme_light--code_inline-background);
+  --theme--code_text: var(--theme_light--code_text);
+  --theme--code-background: var(--theme_light--code-background);
+  --theme--code_function: var(--theme_light--code_function);
+  --theme--code_keyword: var(--theme_light--code_keyword);
+  --theme--code_tag: var(--theme_light--code_tag);
+  --theme--code_operator: var(--theme_light--code_operator);
+  --theme--code_important: var(--theme_light--code_important);
+  --theme--code_property: var(--theme_light--code_property);
+  --theme--code_builtin: var(--theme_light--code_builtin);
+  --theme--code_attr-name: var(--theme_light--code_attr-name);
+  --theme--code_comment: var(--theme_light--code_comment);
+  --theme--code_punctuation: var(--theme_light--code_punctuation);
+  --theme--code_doctype: var(--theme_light--code_doctype);
+  --theme--code_number: var(--theme_light--code_number);
+  --theme--code_string: var(--theme_light--code_string);
+  --theme--code_attr-value: var(--theme_light--code_attr-value);
+}
diff --git a/mods/core/css/variables.json b/mods/core/css/variables.json
deleted file mode 100644
index 6b9affa..0000000
--- a/mods/core/css/variables.json
+++ /dev/null
@@ -1,96 +0,0 @@
-[
-  "--theme--main",
-  "--theme--sidebar",
-  "--theme--overlay",
-  "--theme--dragarea",
-  "--theme--preview-width",
-  "--theme--preview-padding",
-  "--theme--preview_banner-height",
-  "--theme--page_banner-height",
-  "--theme--font_sans",
-  "--theme--font_serif",
-  "--theme--font_mono",
-  "--theme--font_code",
-  "--theme--font_title-size",
-  "--theme--font_heading1-size",
-  "--theme--font_heading2-size",
-  "--theme--font_heading3-size",
-  "--theme--font_label-size",
-  "--theme--font_body-size",
-  "--theme--font__small",
-  "--theme--font_code-size",
-  "--theme--font_sidebar-size",
-  "--theme--scrollbar",
-  "--theme--scrollbar-border",
-  "--theme--scrollbar_hover",
-  "--theme--card",
-  "--theme--gallery",
-  "--theme--table-border",
-  "--theme--interactive_hover",
-  "--theme--interactive_hover-border",
-  "--theme--button_close",
-  "--theme--button_close-fill",
-  "--theme--selected",
-  "--theme--primary",
-  "--theme--primary_hover",
-  "--theme--primary_click",
-  "--theme--primary_indicator",
-  "--theme--option-color",
-  "--theme--option-background",
-  "--theme--option_active-color",
-  "--theme--option_active-background",
-  "--theme--option_hover-color",
-  "--theme--option_hover-background",
-  "--theme--danger_text",
-  "--theme--danger_border",
-  "--theme--text",
-  "--theme--text_ui",
-  "--theme--text_ui_info",
-  "--theme--text_gray",
-  "--theme--text_brown",
-  "--theme--text_orange",
-  "--theme--text_yellow",
-  "--theme--text_green",
-  "--theme--text_blue",
-  "--theme--text_purple",
-  "--theme--text_pink",
-  "--theme--text_red",
-  "--theme--bg_text",
-  "--theme--bg_gray",
-  "--theme--bg_brown",
-  "--theme--bg_orange",
-  "--theme--bg_yellow",
-  "--theme--bg_green",
-  "--theme--bg_blue",
-  "--theme--bg_purple",
-  "--theme--bg_pink",
-  "--theme--bg_red",
-  "--theme--line_text",
-  "--theme--line_gray",
-  "--theme--line_brown",
-  "--theme--line_orange",
-  "--theme--line_yellow",
-  "--theme--line_green",
-  "--theme--line_blue",
-  "--theme--line_purple",
-  "--theme--line_pink",
-  "--theme--line_red",
-  "--theme--code_inline-text",
-  "--theme--code_inline-background",
-  "--theme--code_text",
-  "--theme--code-background",
-  "--theme--code_function",
-  "--theme--code_keyword",
-  "--theme--code_tag",
-  "--theme--code_operator",
-  "--theme--code_important",
-  "--theme--code_property",
-  "--theme--code_builtin",
-  "--theme--code_attr-name",
-  "--theme--code_comment",
-  "--theme--code_punctuation",
-  "--theme--code_doctype",
-  "--theme--code_number",
-  "--theme--code_string",
-  "--theme--code_attr-value"
-]
diff --git a/mods/core/menu.js b/mods/core/menu.js
index a3e28ee..00330d6 100644
--- a/mods/core/menu.js
+++ b/mods/core/menu.js
@@ -41,10 +41,9 @@ window['__start'] = async () => {
     }
   });
 
-  electron.ipcRenderer.send('enhancer:get-menu-theme');
-  electron.ipcRenderer.on('enhancer:set-menu-theme', (event, theme) => {
-    document.body.className = `notion-${theme.mode}-theme`;
-    for (const style of theme.rules)
+  electron.ipcRenderer.send('enhancer:get-theme-vars');
+  electron.ipcRenderer.on('enhancer:set-theme-vars', (event, theme) => {
+    for (const style of theme)
       document.body.style.setProperty(style[0], style[1]);
   });
 
@@ -378,6 +377,19 @@ window['__start'] = async () => {
       ? 1
       : a.name.localeCompare(b.name)
   )) {
+    // mod styling - necessary for fonts
+    // if (
+    //   fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`))
+    // ) {
+    //   document
+    //     .querySelector('head')
+    //     .appendChild(
+    //       createElement(
+    //         `<link rel="stylesheet" href="enhancement://${mod.dir}/styles.css">`
+    //       )
+    //     );
+    // }
+
     const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
         .enabled,
       author =
diff --git a/mods/core/styles.css b/mods/core/styles.css
index 968415c..da69ff5 100644
--- a/mods/core/styles.css
+++ b/mods/core/styles.css
@@ -4,9 +4,7 @@
  * under the MIT license
  */
 
-@import './css/localised.css';
-@import './css/dark.css';
-@import './css/light.css';
-@import './css/shared.css';
+@import './css/theme.css';
+@import './css/variables.css';
 @import './css/scrollbars.css';
 @import './css/titlebar.css';
diff --git a/mods/core/tray.js b/mods/core/tray.js
index 031dd85..489452e 100644
--- a/mods/core/tray.js
+++ b/mods/core/tray.js
@@ -29,14 +29,16 @@ module.exports = (store, __exports) => {
           })
     );
 
-    electron.ipcMain.on('enhancer:set-menu-theme', (event, arg) => {
+    electron.ipcMain.on('enhancer:set-theme-vars', (event, arg) => {
       if (!enhancer_menu) return;
-      enhancer_menu.webContents.send('enhancer:set-menu-theme', arg);
+      enhancer_menu.webContents.send('enhancer:set-theme-vars', arg);
     });
-    electron.ipcMain.on('enhancer:get-menu-theme', (event, arg) => {
+    electron.ipcMain.on('enhancer:get-theme-vars', (event, arg) => {
       electron.webContents
         .getAllWebContents()
-        .forEach((webContents) => webContents.send('enhancer:get-menu-theme'));
+        .forEach((webContents) =>
+          webContents.send('enhancer:get-theme-vars', arg)
+        );
     });
     electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu);
 
diff --git a/mods/littilepig-dark/mod.js b/mods/littilepig-dark/mod.js
new file mode 100644
index 0000000..1720a8e
--- /dev/null
+++ b/mods/littilepig-dark/mod.js
@@ -0,0 +1,22 @@
+/*
+ * littlepig
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Lizishan
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'ad923617-e76e-418e-9f23-490738a32299',
+  tags: ['theme', 'dark'],
+  name: 'littlepig dark',
+  desc: 'a purple monospaced theme using emojis and colourful text.',
+  version: '0.1.0',
+  author: {
+    name: 'Lizishan',
+    link: 'https://www.reddit.com/user/Lizishan/',
+    avatar:
+      'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
+  },
+};
diff --git a/mods/littilepig-dark/styles.css b/mods/littilepig-dark/styles.css
new file mode 100644
index 0000000..4c752e1
--- /dev/null
+++ b/mods/littilepig-dark/styles.css
@@ -0,0 +1,627 @@
+/*
+ * littlepig
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 Lizishan
+ * under the MIT license
+ */
+
+@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
+
+:root {
+  --theme_dark--main: #1e1c26;
+  --theme_dark--sidebar: #24222c;
+  --theme_dark--dragarea: #19181f;
+
+  --theme_dark--font_sans: 'JetBrains Mono';
+  --theme_dark--font_mono: 'JetBrains Mono', iawriter-mono, Nitti, Menlo,
+    Courier, monospace;
+  --theme_dark--font_code: 'JetBrains Mono', SFMono-Regular, Consolas,
+    'Liberation Mono', Menlo, Courier, monospace;
+
+  --theme_dark--scrollbar: #221f29;
+  /* --theme_dark--scrollbar-border: transparent; */
+  --theme_dark--scrollbar_hover: #312d3c;
+
+  --theme_dark--font_title-size: 40px;
+  --theme_dark--font_heading1-size: 30px;
+  --theme_dark--font_heading2-size: 24px;
+  --theme_dark--font_heading3-size: 20px;
+  --theme_dark--font_label-size: 14px;
+  --theme_dark--font_body-size: 17px;
+  --theme_dark--font_code-size: 16px;
+  --theme_dark--font_sidebar-size: 14px;
+
+  /* --theme_dark--card: rgb(53, 51, 58); */
+  --theme_dark--gallery: rgba(162, 162, 162, 0.01);
+  --theme_dark--table-border: rgba(148, 148, 184, 0.5);
+  --theme_dark--interactive_hover: #282632;
+  /* --theme_dark--interactive_hover-border: transparent;
+   --theme_dark--button_close: #e81123;
+   --theme_dark--button_close-fill: white; */
+
+  --theme_dark--selected: #9500ff6b;
+  --theme_dark--primary: rgb(106, 47, 200);
+  --theme_dark--primary_hover: rgb(110, 48, 211);
+  --theme_dark--primary_click: rgb(117, 65, 200);
+  --theme_dark--primary_indicator: rgb(150, 84, 226);
+
+  --theme_dark--option_hover-background: rgb(20, 0, 51);
+
+  --theme_dark--danger_text: rgb(235, 87, 87);
+  --theme_dark--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_dark--text: rgba(200, 200, 200, 0.8);
+  --theme_dark--text_ui: rgba(255, 255, 255, 0.6);
+  --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4);
+
+  /* 文本颜色 */
+  --theme_dark--text_gray: rgba(151, 154, 155, 0.95);
+  --theme_dark--text_brown: rgb(177, 144, 131);
+  --theme_dark--text_orange: rgb(255, 163, 68);
+  --theme_dark--text_yellow: rgb(255, 220, 73);
+  --theme_dark--text_green: rgb(66, 222, 137);
+  --theme_dark--text_blue: rgb(0, 157, 255);
+  --theme_dark--text_purple: rgb(162, 94, 255);
+  --theme_dark--text_pink: rgb(226, 85, 161);
+  --theme_dark--text_red: rgb(240, 52, 38);
+
+  /* 文本背景色 */
+  --theme_dark--bg_gray: rgb(234, 234, 234);
+  --theme_dark--bg_gray_text: rgb(17, 17, 17);
+
+  --theme_dark--bg_brown: rgb(130, 118, 111);
+  --theme_dark--bg_brown_text: rgb(85, 35, 1);
+
+  --theme_dark--bg_orange: rgb(254, 214, 155);
+  --theme_dark--bg_yellow_text: rgb(199, 110, 0);
+
+  --theme_dark--bg_yellow: rgb(235, 227, 178);
+  --theme_dark--bg_yellow_text: rgb(138, 118, 2);
+
+  --theme_dark--bg_green: rgb(212, 237, 218);
+  --theme_dark--bg_green_text: rgb(21, 87, 36);
+
+  --theme_dark--bg_blue: rgb(204, 229, 255);
+  --theme_dark--bg_blue_text: rgb(0, 64, 133);
+
+  --theme_dark--bg_purple: rgb(199, 178, 230);
+  --theme_dark--bg_purple_text: rgb(90, 49, 148);
+
+  --theme_dark--bg_pink: rgb(255, 206, 228);
+  --theme_dark--bg_pink_text: rgb(255, 0, 127);
+
+  --theme_dark--bg_red: rgb(248, 215, 218);
+  --theme_dark--bg_red_text: rgb(138, 0, 10);
+
+  --theme_dark--select_gray: var(--theme_dark--bg_gray);
+  --theme_dark--select_brown: var(--theme_dark--bg_brown);
+  --theme_dark--select_orange: var(--theme_dark--bg_orange);
+  --theme_dark--select_yellow: var(--theme_dark--bg_yellow);
+  --theme_dark--select_green: var(--theme_dark--bg_green);
+  --theme_dark--select_blue: var(--theme_dark--bg_blue);
+  --theme_dark--select_purple: var(--theme_dark--bg_purple);
+  --theme_dark--select_pink: var(--theme_dark--bg_pink);
+  --theme_dark--select_red: var(--theme_dark--bg_red);
+
+  --theme_dark--line_gray: rgb(69, 75, 78);
+  --theme_dark--line_brown: rgb(78, 57, 48);
+  --theme_dark--line_orange: rgb(136, 80, 48);
+  --theme_dark--line_yellow: #fbe2287c;
+  --theme_dark--line_red: rgb(151, 62, 62);
+
+  --theme_dark--code_inline-text: #d9cbec;
+  --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
+  --theme_dark--code_text: var(--theme_dark--text);
+  --theme_dark--code-background: rgb(63, 68, 71);
+  --theme_dark--code_function: rgb(179, 146, 240);
+  --theme_dark--code_keyword: hsl(350, 100%, 69%);
+  --theme_dark--code_tag: hsl(350, 40%, 70%);
+  --theme_dark--code_operator: hsl(40, 90%, 60%);
+  --theme_dark--code_important: #e90;
+  --theme_dark--code_property: hsl(350, 40%, 70%);
+  --theme_dark--code_builtin: hsl(75, 70%, 60%);
+  --theme_dark--code_attr-name: hsl(75, 70%, 60%);
+  --theme_dark--code_comment: hsl(30, 20%, 50%);
+  --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
+  --theme_dark--code_doctype: hsl(30, 20%, 50%);
+  --theme_dark--code_number: hsl(159, 69%, 39%);
+  --theme_dark--code_string: hsl(75, 95%, 48%);
+  --theme_dark--code_attr-value: hsl(350, 40%, 70%);
+
+  /* 标题色 */
+  --theme_dark--h1_text: #c264fe;
+  --theme_dark--h2_text: #e2bafe;
+  --theme_dark--h3_text: #7b08fa;
+
+  /* todo */
+  --theme_dark--option_active-color: #7b08fa;
+  --theme_dark--option_active-background: #1d1c26;
+
+  /* inline code */
+  --theme_dark--code_inline-text: #e0dfe2;
+  --theme_dark--code_inline-background: rgb(179, 39, 39);
+
+  /* 标签颜色 + 文本背景色 */
+  --theme_dark--bg_gray: rgb(234, 234, 234);
+  --theme_dark--bg_gray_text: rgb(17, 17, 17);
+
+  --theme_dark--bg_brown: rgb(206, 206, 206);
+  --theme_dark--bg_brown_text: rgb(85, 35, 1);
+
+  --theme_dark--bg_orange: rgb(254, 214, 155);
+  --theme_dark--bg_orange_text: rgb(199, 110, 0);
+
+  --theme_dark--bg_yellow: #fcffd8;
+  --theme_dark--bg_yellow_text: #ff8c22;
+
+  --theme_dark--bg_green: #d5fded;
+  --theme_dark--bg_green_text: #006a00;
+
+  --theme_dark--bg_blue: #e2f5ff;
+  --theme_dark--bg_blue_text: #00b2ff;
+
+  --theme_dark--bg_purple: #efe6ff;
+  --theme_dark--bg_purple_text: #8334ff;
+
+  --theme_dark--bg_pink: #ffe9f1;
+  --theme_dark--bg_pink_text: rgb(255, 0, 127);
+
+  --theme_dark--bg_red: rgb(251, 228, 228);
+  --theme_dark--bg_red_text: rgb(138, 0, 10);
+
+  /* callout 颜色 */
+
+  --theme_dark--callout_bg_gray: #e2e3e5;
+  --theme_dark--callout_text_gray: #383d41;
+
+  --theme_dark--callout_bg_brown: rgb(130, 118, 111);
+  --theme_dark--callout_text_brown: rgb(85, 35, 1);
+
+  --theme_dark--callout_bg_orange: rgb(254, 214, 155);
+  --theme_dark--callout_text_orange: rgb(255, 140, 0);
+
+  --theme_dark--callout_bg_yellow: #fcffd8;
+  --theme_dark--callout_text_yellow: #c76e00;
+
+  --theme_dark--callout_bg_green: #d4edda;
+  --theme_dark--callout_text_green: #155724;
+
+  --theme_dark--callout_bg_blue: #cce5ff;
+  --theme_dark--callout_text_blue: #004085;
+
+  --theme_dark--callout_bg_purple: rgb(199, 178, 230);
+  --theme_dark--callout_text_purple: rgb(90, 49, 148);
+
+  --theme_dark--callout_bg_pink: rgb(255, 206, 228);
+  --theme_dark--callout_text_pink: rgb(255, 0, 127);
+
+  --theme_dark--callout_bg_red: #f8d7da;
+  --theme_dark--callout_text_red: #721c24;
+}
+
+.notion-dark-theme
+  .notion-scroller.vertical.horizontal
+  .notion-table-view
+  .notion-selectable.notion-collection_view-block
+  > :first-child {
+  background: var(--theme--card) !important;
+}
+
+/* todo 颜色 */
+.dark [style*='background: rgb(46, 170, 220)'],
+.dark [style*='background-color: rgb(46, 170, 220)'] {
+  background: var(--theme_dark--option_active-background) !important;
+}
+.notion-to_do-block > div [role='button']:not(:hover) .check {
+  background: var(--theme_dark--option_active-background) !important;
+}
+
+.notion-to_do-block > div [role='button']:not(:hover) .check polygon {
+  fill: var(--theme_dark--option_active-color) !important;
+}
+
+/*================================= 标签颜色 + 文本背景色 ===============================**/
+
+/* 灰色 */
+.dark [style*='background: rgba(151, 154, 155, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_gray) !important;
+  color: var(--theme_dark--bg_gray_text) !important;
+}
+.dark [style*='background:rgb(69,75,78)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_gray) !important;
+  color: var(--theme_dark--bg_gray_text) !important;
+}
+
+/* 棕色 */
+.dark [style*='background: rgba(147, 114, 100, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_brown) !important;
+  color: var(--theme_dark--bg_brown_text) !important;
+}
+.dark [style*='background:rgb(67,64,64)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_brown) !important;
+  color: var(--theme_dark--bg_brown_text) !important;
+}
+
+/* 橘黄色 */
+.dark [style*='background: rgba(255, 163, 68, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_orange) !important;
+  color: var(--theme_dark--bg_orange_text) !important;
+}
+
+.dark [style*='background:rgb(89,74,58)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_orange) !important;
+  color: var(--theme_dark--bg_orange_text) !important;
+}
+
+/* 黄色 */
+.dark [style*='background: rgba(255, 220, 73, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_yellow) !important;
+  color: var(--theme_dark--bg_yellow_text) !important;
+}
+.dark [style*='background:rgb(89,86,59)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_yellow) !important;
+  color: var(--theme_dark--bg_yellow_text) !important;
+}
+
+/* 绿色 */
+.dark [style*='background: rgba(77, 171, 154, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_green) !important;
+  color: var(--theme_dark--bg_green_text) !important;
+}
+.dark [style*='background:rgb(53,76,75)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_green) !important;
+  color: var(--theme_dark--bg_green_text) !important;
+}
+
+/*  蓝色 */
+.dark [style*='background: rgba(82, 156, 202, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_blue) !important;
+  color: var(--theme_dark--bg_blue_text) !important;
+}
+.dark [style*='background:rgb(54,73,84)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_blue) !important;
+  color: var(--theme_dark--bg_blue_text) !important;
+}
+
+/*  紫色 */
+.dark [style*='background: rgba(154, 109, 215, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_purple) !important;
+  color: var(--theme_dark--bg_purple_text) !important;
+}
+.dark [style*='background:rgb(68,63,87)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_purple) !important;
+  color: var(--theme_dark--bg_purple_text) !important;
+}
+
+/*  粉红色 */
+.dark [style*='background: rgba(226, 85, 161, 0.5)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_pink) !important;
+  color: var(--theme_dark--bg_pink_text) !important;
+}
+.dark [style*='background:rgb(83,59,76)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_pink) !important;
+  color: var(--theme_dark--bg_pink_text) !important;
+}
+
+/* 红色 */
+.dark [style*='background: rgba(255, 115, 105, 0.5);'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_red) !important;
+  color: var(--theme_dark--bg_red_text) !important;
+}
+.dark [style*='background:rgb(89,65,65)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_dark--bg_red) !important;
+  color: var(--theme_dark--bg_red_text) !important;
+}
+
+/* -----------------------------callout 样式 start------------------------ */
+
+/* notion-callout-block gray */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(69, 75, 78, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_gray) !important; */
+  background: var(--theme_dark--callout_bg_gray) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(69, 75, 78, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_gray) !important;
+}
+
+/* notion-callout-block brown */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(67, 64, 64, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_brown) !important; */
+  background: var(--theme_dark--callout_bg_brown) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(67, 64, 64, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_brown) !important;
+}
+
+/* notion-callout-block orange */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(89, 74, 58, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_orange) !important; */
+  background: var(--theme_dark--callout_bg_orange) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(89, 74, 58, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_orange) !important;
+}
+
+/* notion-callout-block yellow */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(89, 86, 59, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_yellow) !important; */
+  background: var(--theme_dark--callout_bg_yellow) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(89, 86, 59, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_yellow) !important;
+}
+
+/* notion-callout-block green */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(53, 76, 75, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_green) !important; */
+  background: var(--theme_dark--callout_bg_green) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(53, 76, 75, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_green) !important;
+}
+
+/* notion-callout-block blue */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(54, 73, 84, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_blue) !important; */
+  background: var(--theme_dark--callout_bg_blue) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(54, 73, 84, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_blue) !important;
+}
+
+/* notion-callout-block purple */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(68, 63, 87, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_purple) !important; */
+  background: var(--theme_dark--callout_bg_purple) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(68, 63, 87, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_purple) !important;
+}
+
+/* notion-callout-block pink */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(83, 59, 76, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_pink) !important; */
+  background: var(--theme_dark--callout_bg_pink) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(83, 59, 76, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_pink) !important;
+}
+
+/* notion-callout-block red */
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(89, 65, 65, 0.3)'] {
+  /* color: var(--theme_dark--callout_text_red) !important; */
+  background: var(--theme_dark--callout_bg_red) !important;
+  border-radius: 3px !important;
+}
+
+.notion-dark-theme
+  .notion-callout-block
+  [style*='background: rgba(89, 65, 65, 0.3)']
+  [style*='color: rgba(255, 255, 255, 0.9)'] {
+  color: var(--theme_dark--callout_text_red) !important;
+}
+
+/* -----------------------------callout 样式 end---------------------------- */
+
+/* ===================== header =========================== */
+.notion-dark-theme [placeholder*='Heading 1'] {
+  color: var(--theme_dark--h1_text) !important;
+}
+
+.notion-dark-theme [placeholder*='Heading 2'] {
+  margin-bottom: 16px;
+  border-bottom: 4px solid var(--theme_dark--h2_text);
+  display: inline-block;
+  color: var(--theme_dark--h2_text) !important;
+  width: auto !important;
+  padding: 6px 12px 6px 0 !important;
+  position: relative;
+}
+
+.notion-dark-theme [placeholder*='Heading 2']::before {
+  content: '🔥 ';
+}
+
+.notion-dark-theme [placeholder*='Heading 3'] {
+  width: fit-content !important;
+  padding: 4px 10px !important;
+  border-radius: 10px;
+  border: 2px solid var(--theme_dark--h3_text);
+  color: var(--theme_dark--h3_text) !important;
+  background-color: #fbf8e7;
+  display: inline-block;
+  margin-bottom: 14px;
+}
+
+.notion-dark-theme [placeholder*='Heading 3']::before {
+  content: '📌 ';
+}
+
+/* list 样式 */
+.notion-dark-theme
+  [style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
+  color: #a830fd !important;
+}
+
+/* quoteblock 样式 */
+.notion-dark-theme
+  .notion-quote-block
+  [style*='caret-color: rgba(255, 255, 255, 0.9);'] {
+  font-size: 0.85em !important;
+  border-left: none !important;
+  padding: 0.5em 0.5em 0.5em 1.9em !important;
+  position: relative;
+  margin: 10px 0;
+  background: #9494942e;
+  border-radius: 3px;
+}
+
+.notion-dark-theme
+  .notion-quote-block
+  [style*='caret-color: rgba(255, 255, 255, 0.9);']::before {
+  content: '\201C';
+  font-family: Georgia, serif;
+  font-size: 44px;
+  font-weight: bold;
+  color: #7b08fa;
+  position: absolute;
+  left: 0px;
+  top: -24px;
+}
+
+/* link style */
+.notion-dark-theme .notion-link-token span {
+  border-bottom: 0.05em solid;
+  border-color: rgb(233, 51, 38) !important;
+  border-width: 3px !important;
+  opacity: 1 !important;
+}
+
+.notion-dark-theme .notion-link-token span:hover {
+  color: rgb(233, 51, 38) !important;
+}
+
+/* code */
+.dark [style*='color:#EB5757'] {
+  color: var(--theme_dark--code_inline-text) !important;
+  background: var(--theme_dark--code_inline-background) !important;
+}
diff --git a/mods/littlepig-light/mod.js b/mods/littlepig-light/mod.js
new file mode 100644
index 0000000..fbeb9f7
--- /dev/null
+++ b/mods/littlepig-light/mod.js
@@ -0,0 +1,22 @@
+/*
+ * littlepig
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Lizishan
+ * under the MIT license
+ */
+
+'use strict';
+
+module.exports = {
+  id: 'ad923617-e76e-408e-9f23-490738a32238',
+  tags: ['theme', 'light'],
+  name: 'littlepig light',
+  desc: 'a bright monospaced theme using emojis and colourful text.',
+  version: '0.1.0',
+  author: {
+    name: 'Lizishan',
+    link: 'https://www.reddit.com/user/Lizishan/',
+    avatar:
+      'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
+  },
+};
diff --git a/mods/littlepig-light/styles.css b/mods/littlepig-light/styles.css
new file mode 100644
index 0000000..5414d6f
--- /dev/null
+++ b/mods/littlepig-light/styles.css
@@ -0,0 +1,607 @@
+/*
+ * littlepig
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com>
+ * (c) 2020 Lizishan
+ * under the MIT license
+ */
+
+@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
+
+:root {
+  --theme_light--font_sans: 'JetBrains Mono';
+  --theme_light--font_mono: 'JetBrains Mono';
+  --theme_light--font_code: 'JetBrains Mono';
+
+  --theme_light--main: white;
+  --theme_light--sidebar: rgb(247, 246, 243);
+  --theme_light--overlay: rgba(15, 15, 15, 0.6);
+  --theme_light--dragarea: rgba(55, 53, 47, 0.04);
+  --theme_light--preview-width: 977px;
+  --theme_light--preview-padding: 8rem;
+  --theme_light--preview_banner-height: 20vh;
+  --theme_light--page_banner-height: 30vh;
+
+  --theme_light--font_title-size: 40px;
+  --theme_light--font_heading1-size: 30px;
+  --theme_light--font_heading2-size: 24px;
+  --theme_light--font_heading3-size: 20px;
+  --theme_light--font_label-size: 14px;
+  --theme_light--font_body-size: 17px;
+  --theme_light--font_code-size: 16px;
+  --theme_light--font_sidebar-size: 14px;
+
+  --theme_light--scrollbar: #d9d8d6;
+  --theme_light--scrollbar-border: #cacac8;
+  --theme_light--scrollbar_hover: #cacac8;
+
+  --theme_light--card: rgb(247, 247, 247);
+  --theme_light--gallery: rgba(55, 53, 47, 0.024);
+  --theme_light--table-border: rgba(55, 53, 47, 0.16);
+  --theme_light--interactive_hover: rgba(55, 53, 47, 0.08);
+  --theme_light--interactive_hover-border: transparent;
+  --theme_light--button_close: #e81123;
+  --theme_light--button_close-fill: white;
+
+  --theme_light--selected: rgba(177, 24, 24, 0.22);
+  --theme_light--primary: rgb(177, 24, 24);
+  --theme_light--primary_hover: rgb(202, 26, 26);
+  --theme_light--primary_click: rgb(219, 41, 41);
+  --theme_light--primary_indicator: rgb(202, 26, 26);
+
+  --theme_light--option-color: black;
+  --theme_light--option-background: transparent;
+  --theme_light--option_hover-color: black;
+  --theme_light--option_hover-background: rgba(55, 53, 47, 0.08);
+
+  --theme_light--danger_text: rgb(235, 87, 87);
+  --theme_light--danger_border: rgba(235, 87, 87, 0.5);
+
+  --theme_light--text: rgb(55, 53, 47);
+  --theme_light--text_ui: rgba(55, 53, 47, 0.6);
+  --theme_light--text_ui_info: rgba(55, 53, 47, 0.4);
+
+  /* 文本颜色 */
+  --theme_light--text_gray: rgba(151, 154, 155, 0.95);
+  --theme_light--text_brown: rgb(167, 126, 100);
+  --theme_light--text_orange: rgb(255, 134, 0);
+  --theme_light--text_yellow: rgb(255, 195, 0);
+  --theme_light--text_green: rgb(0, 171, 0);
+  --theme_light--text_blue: rgb(0, 121, 255);
+  --theme_light--text_purple: rgb(126, 0, 255);
+  --theme_light--text_pink: rgb(255, 0, 208);
+  --theme_light--text_red: rgb(255, 0, 0);
+
+  /* 文本背景色 */
+  --theme_light--bg_gray: rgb(234, 234, 234);
+  --theme_light--bg_gray_text: rgb(17, 17, 17);
+
+  --theme_light--bg_brown: rgb(206, 206, 206);
+  --theme_light--bg_brown_text: rgb(85, 35, 1);
+
+  --theme_light--bg_orange: rgb(254, 214, 155);
+  --theme_light--bg_orange_text: rgb(199, 110, 0);
+
+  --theme_light--bg_yellow: #fcffd8;
+  --theme_light--bg_yellow_text: #ff8c22;
+
+  --theme_light--bg_green: #d5fded;
+  --theme_light--bg_green_text: #006a00;
+
+  --theme_light--bg_blue: #e2f5ff;
+  --theme_light--bg_blue_text: #00b2ff;
+
+  --theme_light--bg_purple: #efe6ff;
+  --theme_light--bg_purple_text: #8334ff;
+
+  --theme_light--bg_pink: #ffe9f1;
+  --theme_light--bg_pink_text: rgb(255, 0, 127);
+
+  --theme_light--bg_red: rgb(248, 215, 218);
+  --theme_light--bg_red_text: rgb(138, 0, 10);
+
+  --theme_light--select_gray: var(--theme_light--bg_gray);
+  --theme_light--select_brown: var(--theme_light--bg_brown);
+  --theme_light--select_orange: var(--theme_light--bg_orange);
+  --theme_light--select_yellow: var(--theme_light--bg_yellow);
+  --theme_light--select_green: var(--theme_light--bg_green);
+  --theme_light--select_blue: var(--theme_light--bg_blue);
+  --theme_light--select_purple: var(--theme_light--bg_purple);
+  --theme_light--select_pink: var(--theme_light--bg_pink);
+  --theme_light--select_red: var(--theme_light--bg_red);
+
+  /* inline code */
+  --theme_light--code_inline-text: #ffffff;
+  --theme_light--code_inline-background: rgb(179, 39, 39);
+
+  --theme_light--code_text: var(--theme_light--text);
+  --theme_light--code-background: rgb(247, 246, 243);
+  --theme_light--code_function: #dd4a68;
+  --theme_light--code_keyword: #07a;
+  --theme_light--code_tag: #905;
+  --theme_light--code_operator: #9a6e3a;
+  --theme_light--code_important: #e90;
+  --theme_light--code_property: #905;
+  --theme_light--code_builtin: #690;
+  --theme_light--code_attr-name: #690;
+  --theme_light--code_comment: slategray;
+  --theme_light--code_punctuation: #999;
+  --theme_light--code_doctype: slategray;
+  --theme_light--code_number: #905;
+  --theme_light--code_string: #690;
+  --theme_light--code_attr-value: #07a;
+
+  /* 标题色 */
+  --theme_light--h1_text: #008800;
+  --theme_light--h2_text: #006a00;
+  --theme_light--h3_text: #003e00;
+
+  /* todo */
+  --theme_light--option_active-color: #008800;
+  --theme_light--option_active-background: #ffffff;
+
+  /* inline code */
+  --theme_light--code_inline-text: #e0dfe2;
+  --theme_light--code_inline-background: rgb(179, 39, 39);
+
+  /* callout 颜色 */
+  --theme_light--callout_bg_gray: #e2e3e5;
+  --theme_light--callout_text_gray: #383d41;
+
+  --theme_light--callout_bg_brown: rgb(130, 118, 111);
+  --theme_light--callout_text_brown: rgb(85, 35, 1);
+
+  --theme_light--callout_bg_orange: rgb(254, 214, 155);
+  --theme_light--callout_text_orange: rgb(255, 140, 0);
+
+  --theme_light--callout_bg_yellow: #fcffd8;
+  --theme_light--callout_text_yellow: #c76e00;
+
+  --theme_light--callout_bg_green: #d4edda;
+  --theme_light--callout_text_green: #155724;
+
+  --theme_light--callout_bg_blue: #cce5ff;
+  --theme_light--callout_text_blue: #004085;
+
+  --theme_light--callout_bg_purple: rgb(199, 178, 230);
+  --theme_light--callout_text_purple: rgb(90, 49, 148);
+
+  --theme_light--callout_bg_pink: rgb(255, 206, 228);
+  --theme_light--callout_text_pink: rgb(255, 0, 127);
+
+  --theme_light--callout_bg_red: #f8d7da;
+  --theme_light--callout_text_red: #721c24;
+}
+
+/* todo 颜色 */
+.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'] {
+  background: var(--theme_light--option_active-background) !important;
+}
+.notion-body:not(.dark)
+  [style*='background: rgb(46, 170, 220)'][role='button'] {
+  background: var(--theme_light--primary) !important;
+}
+
+.notion-body:not(.dark)
+  [style*='background: rgb(46, 170, 220);'][style*='width: 26px'] {
+  background: var(--theme_light--primary) !important;
+}
+
+.notion-body:not(.dark)
+  .notion-to_do-block
+  > div
+  [role='button']:not(:hover)
+  .check {
+  background: var(--theme_light--option_active-background) !important;
+}
+
+.notion-body:not(.dark)
+  .notion-to_do-block
+  > div
+  [role='button']:not(:hover)
+  .check
+  polygon {
+  fill: var(--theme_light--option_active-color) !important;
+}
+
+/*================================= 标签颜色 + 文本背景色 ===============================**/
+
+/* 灰色 */
+.notion-body:not(.dark) [style*='background: rgba(155, 154, 151, 0.4)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_gray) !important;
+  color: var(--theme_light--bg_gray_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_gray) !important;
+  color: var(--theme_light--bg_gray_text) !important;
+}
+
+/* 棕色 */
+.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_brown) !important;
+  color: var(--theme_light--bg_brown_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_brown) !important;
+  color: var(--theme_light--bg_brown_text) !important;
+}
+
+/* 橘黄色 */
+.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_orange) !important;
+  color: var(--theme_light--bg_orange_text) !important;
+}
+
+.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_orange) !important;
+  color: var(--theme_light--bg_orange_text) !important;
+}
+
+/* 黄色 */
+.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_yellow) !important;
+  color: var(--theme_light--bg_yellow_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_yellow) !important;
+  color: var(--theme_light--bg_yellow_text) !important;
+}
+
+/* 绿色 */
+.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_green) !important;
+  color: var(--theme_light--bg_green_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_green) !important;
+  color: var(--theme_light--bg_green_text) !important;
+}
+
+/*  蓝色 */
+.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_blue) !important;
+  color: var(--theme_light--bg_blue_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_blue) !important;
+  color: var(--theme_light--bg_blue_text) !important;
+}
+
+/*  紫色 */
+.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_purple) !important;
+  color: var(--theme_light--bg_purple_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_purple) !important;
+  color: var(--theme_light--bg_purple_text) !important;
+}
+
+/*  粉红色 */
+.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_pink) !important;
+  color: var(--theme_light--bg_pink_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_pink) !important;
+  color: var(--theme_light--bg_pink_text) !important;
+}
+
+/* 红色 */
+.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 10px 0.4em !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_red) !important;
+  color: var(--theme_light--bg_red_text) !important;
+}
+.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] {
+  display: inline-block;
+  border-radius: 4px !important;
+  padding: 0 0.4em !important;
+  margin: 2px 0 !important;
+  font-weight: 500 !important;
+  background: var(--theme_light--bg_red) !important;
+  color: var(--theme_light--bg_red_text) !important;
+}
+
+/* -----------------------------callout 样式 start------------------------ */
+
+/* notion-callout-block gray */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(235, 236, 237, 0.3);'] {
+  /* color: var(--theme_light--callout_text_gray) !important; */
+  background: var(--theme_light--callout_bg_gray) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(235, 236, 237, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_gray) !important;
+}
+
+/* notion-callout-block brown */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(233, 229, 227, 0.3);'] {
+  /* color: var(--theme_light--callout_text_brown) !important; */
+  background: var(--theme_light--callout_bg_brown) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(233, 229, 227, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_brown) !important;
+}
+
+/* notion-callout-block orange */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(250, 235, 221, 0.3);'] {
+  /* color: var(--theme_light--callout_text_orange) !important; */
+  background: var(--theme_light--callout_bg_orange) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(250, 235, 221, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_orange) !important;
+}
+
+/* notion-callout-block yellow */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(251, 243, 219, 0.3);'] {
+  /* color: var(--theme_light--callout_text_yellow) !important; */
+  background: var(--theme_light--callout_bg_yellow) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(251, 243, 219, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_yellow) !important;
+}
+
+/* notion-callout-block green */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(221, 237, 234, 0.3);'] {
+  /* color: var(--theme_light--callout_text_green) !important; */
+  background: var(--theme_light--callout_bg_green) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(221, 237, 234, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_green) !important;
+}
+
+/* notion-callout-block blue */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(221, 235, 241, 0.3);'] {
+  /* color: var(--theme_light--callout_text_blue) !important; */
+  background: var(--theme_light--callout_bg_blue) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(221, 235, 241, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_blue) !important;
+}
+
+/* notion-callout-block purple */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(234, 228, 242, 0.3);'] {
+  /* color: var(--theme_light--callout_text_purple) !important; */
+  background: var(--theme_light--callout_bg_purple) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(234, 228, 242, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_purple) !important;
+}
+
+/* notion-callout-block pink */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(244, 223, 235, 0.3);'] {
+  /* color: var(--theme_light--callout_text_pink) !important; */
+  background: var(--theme_light--callout_bg_pink) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(244, 223, 235, 0.3);'][style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_pink) !important;
+}
+
+/* notion-callout-block red */
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(251, 228, 228, 0.3);'] {
+  /* color: var(--theme_light--callout_text_red) !important; */
+  background: var(--theme_light--callout_bg_red) !important;
+  border-radius: 3px !important;
+}
+
+.notion-body:not(.dark)
+  .notion-callout-block
+  [style*='background: rgba(251, 228, 228, 0.3);']
+  [style*='color: rgb(55, 53, 47);'] {
+  color: var(--theme_light--callout_text_red) !important;
+}
+
+/* -----------------------------callout 样式 end---------------------------- */
+
+/* ===================== header =========================== */
+.notion-body:not(.dark) [placeholder*='Heading 1'] {
+  color: var(--theme_light--h1_text) !important;
+}
+
+.notion-body:not(.dark) [placeholder*='Heading 2'] {
+  margin-bottom: 16px;
+  border-bottom: 4px solid var(--theme_light--h2_text);
+  display: inline-block;
+  color: var(--theme_light--h2_text) !important;
+  width: auto !important;
+  padding: 6px 12px 6px 0 !important;
+  position: relative;
+}
+
+.notion-body:not(.dark) [placeholder*='Heading 2']::before {
+  content: '🔥 ';
+}
+
+.notion-body:not(.dark) [placeholder*='Heading 3'] {
+  width: fit-content !important;
+  padding: 4px 10px !important;
+  border-radius: 10px;
+  border: 2px solid #42b983;
+  color: var(--theme_light--h3_text) !important;
+  background-color: #fbf8e7;
+  display: inline-block;
+  margin-bottom: 14px;
+}
+
+.notion-body:not(.dark) [placeholder*='Heading 3']::before {
+  content: '📌 ';
+}
+
+/* list 样式 */
+.notion-body:not(.dark)
+  [style*='font-size: 1.5em; line-height: 1; margin-bottom: 0.1em;'] {
+  color: #41b983 !important;
+}
+
+/* quoteblock 样式 */
+.notion-body:not(.dark) .notion-quote-block [style*='rgb(55, 53, 47);'] {
+  font-size: 0.85em !important;
+  border-left: none !important;
+  padding: 0.5em 0.5em 0.5em 1.9em !important;
+  position: relative;
+  margin: 10px 0;
+  background: #9494942e;
+  border-radius: 3px;
+}
+
+.notion-body:not(.dark)
+  .notion-quote-block
+  [style*='caret-color: rgb(55, 53, 47);']::before {
+  content: '\201C';
+  font-family: Georgia, serif;
+  font-size: 44px;
+  font-weight: bold;
+  color: #42b983;
+  position: absolute;
+  left: 0px;
+  top: -24px;
+}
+
+/* link style */
+.notion-body:not(.dark) .notion-link-token span {
+  border-bottom: 0.05em solid;
+  border-color: rgb(233, 51, 38) !important;
+  border-width: 3px !important;
+  opacity: 1 !important;
+}
+
+.notion-body:not(.dark) .notion-link-token span:hover {
+  color: rgb(233, 51, 38) !important;
+}
+
+/* code */
+.dark [style*='color:#EB5757'] {
+  color: var(--theme_light--code_inline-text) !important;
+  background: var(--theme_light--code_inline-background) !important;
+}
diff --git a/package.json b/package.json
index 6eff1f9..1287311 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-enhancer",
-  "version": "0.8.5",
+  "version": "0.9.0-wip",
   "description": "an enhancer/customiser for the all-in-one productivity workspace notion.so",
   "main": "index.js",
   "bin": {
@@ -9,7 +9,7 @@
   "scripts": {
     "test": "echo \"no test specified\"",
     "postinstall": "node bin.js apply -y",
-    "preuninstall": "node bin.js remove -y"
+    "preuninstall": "node bin.js remove"
   },
   "repository": {
     "type": "git",

From 1e1808fd09747a177c7748d85ac41c7f72f5bcfa Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 11:10:01 +1000
Subject: [PATCH 02/11] font imports working in menu + font-chooser
 improvements

---
 CHANGELOG.md                    |  13 +--
 DOCUMENTATION.md                |  25 +++---
 mods/core/buttons.js            |   5 +-
 mods/core/client.js             |   5 +-
 mods/core/menu.js               |  36 ++++-----
 mods/font-chooser/mod.js        | 136 ++++++++++++--------------------
 mods/gameish/mod.js             |   5 +-
 mods/gameish/styles.css         |   2 -
 mods/littilepig-dark/mod.js     |   3 +-
 mods/littilepig-dark/styles.css |   2 -
 mods/littlepig-light/mod.js     |   3 +-
 mods/littlepig-light/styles.css |   2 -
 mods/neutral/mod.js             |   6 +-
 mods/neutral/styles.css         |   3 -
 mods/pastel-dark/mod.js         |   3 +-
 mods/pastel-dark/styles.css     |   2 -
 pkg/helpers.js                  |  12 ++-
 pkg/loader.js                   |  14 +++-
 18 files changed, 126 insertions(+), 151 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f24ff66..6e696f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,27 +11,26 @@
 a feature and cleanup update.
 
 - improved: halved the number of css rules used -> much better performance.
+- improved: font imports must be define in the `mod.js` so that they can also be used in
+  the enhancements menu.
 - bugfix: enhancer settings should no longer reset on update (though this will not have
   effect until the release after this one).
-  bugfix: blue select tags are no longer purple.
+- bugfix: blue select tags are no longer purple.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
 
 // todo
 
-<!-- - improved: extension menu will now receive style rules from extensions (prev. only got css vars) = necessary for
-  custom fonts. javascript is still not executable in the menu. (e.g. the "font chooser" will work, but only
-  because all it thing it does is change variables - if it were to try dynamically adding new font import rules
-  things things would break). -->
-
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout backgrounds.
+- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
 - bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e`
   to remove conflict with the inline code highlight shortcut.
 - bugfix: block-level text colours are now changed properly.
 - bugfix: page titles now respond to small-text mode.
 - bugfix: update property-layout to match notion changes again.
+- extension: "calendar scroll" = a button to scroll down to the current week for you.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
 
@@ -40,6 +39,8 @@ notion-deb-builder has been discovered to not generate an app.asar and so is no
 - bugfix: separate text highlight and select tag variables.
 - bugfix: bypass CSP for the `enhancement://` protocol - was failing on some platforms?
 
+> 📥 `npm i -g notion-enhancer@0.8.5`
+
 ### v0.8.4 (2020-08-29)
 
 - bugfix: property-layout now works consistently with or without a banner.
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index ec05bfb..95f0667 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -54,6 +54,7 @@ module.exports = {
     type: String in ['toggle', 'select', 'input', 'file'],
     value: Boolean or Array<String> or String or Number or null
   }>,
+  fonts: Array<String> of font_urls,
   hacks?: {
     [k: 'insert-point' (e.g. 'main/createWindow.js')]: function (
       store, // used for configuration and persisting of data (explanation below).
@@ -63,16 +64,17 @@ module.exports = {
 };
 ```
 
-| key     | value                                                                                           | type                   |
-| ------- | ----------------------------------------------------------------------------------------------- | ---------------------- |
-| id      | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net)                 | _string_               |
-| name    | **required:** short name (e.g. `'ocean theme'`)                                                 | _string_               |
-| tags    | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`)              | _array\<string\>_      |
-| desc    | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support. | _string_               |
-| version | **required:** semver (e.g. `'0.3.7'`)                                                           | _string_               |
-| author  | **required:** see below: original extension creator                                             | _string_ or \<object\> |
-| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray) | _array\<object\>_      |
-| hacks   | **optional:** see below: code inserted at various points                                        | _object_               |
+| key     | value                                                                                                                 | type                   |
+| ------- | --------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| id      | **required:** uuidv4 - generate a new one [here](https://www.uuidgenerator.net)                                       | _string_               |
+| name    | **required:** short name (e.g. `'ocean theme'`)                                                                       | _string_               |
+| tags    | **required:** categories/type (e.g. `'extension'`, `'theme'`, `'light'`, `'dark'`)                                    | _array\<string\>_      |
+| desc    | **optional:** 1-3 sentence description of what the module is/does, with basic markdown support.                       | _string_               |
+| version | **required:** semver (e.g. `'0.3.7'`)                                                                                 | _string_               |
+| author  | **required:** see below: original extension creator                                                                   | _string_ or \<object\> |
+| options | **optional:** see below: options made available in the enhancer menu (accessible from the tray)                       | _array\<object\>_      |
+| fonts   | **optional:** a list of any font imports - should be `https://` or [`enhancement://`](#the-enhancement-protocol) urls | _array\<string\>_      |
+| hacks   | **optional:** see below: code inserted at various points                                                              | _object_               |
 
 > a module that with the primary function of being a hack should be tagged as an extension,
 > while a module that has the primary function of adding styles should be tagged as a theme.
@@ -174,6 +176,9 @@ the full/up-to-date list of variables and their default values can be found in t
 these are all made possible by the core module. if you believe this set of variables is buggy or lacking in any way,
 consider opening a pull request to fix those issues - please do not try and reinvent the wheel unnecessarily.
 
+**want to import an external font or import an included font file? do that in the `mod.js` file, otherwise it**
+**won't be used for the enhancements menu.**
+
 ### using variables
 
 variables should be used without specifying which mode they are relevant to. for example:
diff --git a/mods/core/buttons.js b/mods/core/buttons.js
index f664432..9b6cafd 100644
--- a/mods/core/buttons.js
+++ b/mods/core/buttons.js
@@ -7,13 +7,13 @@
 'use strict';
 
 module.exports = (store) => {
-  const electron = require('electron'),
+  const helpers = require('../../pkg/helpers.js'),
     path = require('path'),
     fs = require('fs-extra'),
     browser = require('electron').remote.getCurrentWindow(),
     is_mac = process.platform === 'darwin',
     buttons = {
-      element: document.createElement('div'),
+      element: helpers.createElement('<div class="window-buttons-area"></div>'),
       insert: [
         'alwaysontop',
         ...(store().frameless && !is_mac
@@ -77,7 +77,6 @@ module.exports = (store) => {
     };
 
   (async () => {
-    buttons.element.className = 'window-buttons-area';
     for (let btn of buttons.insert) {
       buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
         btn
diff --git a/mods/core/client.js b/mods/core/client.js
index 5e2f874..6951260 100644
--- a/mods/core/client.js
+++ b/mods/core/client.js
@@ -40,8 +40,9 @@ module.exports = (store, __exports) => {
     if (store().frameless) {
       document.body.classList.add('frameless');
       // draggable area
-      const dragarea = document.createElement('div');
-      dragarea.className = 'window-dragarea';
+      const dragarea = helpers.createElement(
+        '<div class="window-dragarea"></div>'
+      );
       document.querySelector('.notion-topbar').prepend(dragarea);
       document.documentElement.style.setProperty(
         '--configured--dragarea_height',
diff --git a/mods/core/menu.js b/mods/core/menu.js
index 00330d6..94435ee 100644
--- a/mods/core/menu.js
+++ b/mods/core/menu.js
@@ -47,15 +47,10 @@ window['__start'] = async () => {
       document.body.style.setProperty(style[0], style[1]);
   });
 
-  function createElement(html) {
-    const template = document.createElement('template');
-    template.innerHTML = html.trim();
-    return template.content.firstElementChild;
-  }
   function createAlert(type, message) {
     if (!type)
       throw Error('<notion-enhancer> @ createAlert: no alert type specified');
-    const el = createElement(`
+    const el = helpers.createElement(`
       <section class="${type}" role="alert">
         <p>${message}</p>
       </section>
@@ -152,7 +147,9 @@ window['__start'] = async () => {
 
   document
     .querySelector('#colorpicker')
-    .appendChild(createElement('<button class="close-modal"></button>'));
+    .appendChild(
+      helpers.createElement('<button class="close-modal"></button>')
+    );
   document.querySelectorAll('#popup .close-modal').forEach((el) =>
     el.addEventListener('click', (event) => {
       $popup.classList.remove('visible');
@@ -195,7 +192,7 @@ window['__start'] = async () => {
       throw Error('<notion-enhancer> @ createTag: no tagname specified');
     if (!onclick)
       throw Error('<notion-enhancer> @ createTag: no action specified');
-    const el = createElement(
+    const el = helpers.createElement(
       `<span class="selected" ${
         color ? `style="--tag_color: ${color}" ` : ''
       }tabindex="0">${tagname}</span>`
@@ -345,7 +342,7 @@ window['__start'] = async () => {
           </label>
         `;
     }
-    $opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
+    $opt = helpers.createElement(`<p class="${opt.type}">${$opt}</p>`);
     if (opt.type === 'color') {
       $opt
         .querySelector(`#${opt.type}_${id}--${opt.key}`)
@@ -377,18 +374,13 @@ window['__start'] = async () => {
       ? 1
       : a.name.localeCompare(b.name)
   )) {
-    // mod styling - necessary for fonts
-    // if (
-    //   fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`))
-    // ) {
-    //   document
-    //     .querySelector('head')
-    //     .appendChild(
-    //       createElement(
-    //         `<link rel="stylesheet" href="enhancement://${mod.dir}/styles.css">`
-    //       )
-    //     );
-    // }
+    for (let fonts of mod.fonts || []) {
+      document
+        .querySelector('head')
+        .appendChild(
+          helpers.createElement(`<link rel="stylesheet" href="${fonts}">`)
+        );
+    }
 
     const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id]
         .enabled,
@@ -400,7 +392,7 @@ window['__start'] = async () => {
               link: `https://github.com/${mod.author}`,
               avatar: `https://github.com/${mod.author}.png`,
             };
-    mod.elem = createElement(`
+    mod.elem = helpers.createElement(`
       <section class="${
         mod.tags.includes('core') || enabled ? 'enabled' : 'disabled'
       }" id="${mod.id}">
diff --git a/mods/font-chooser/mod.js b/mods/font-chooser/mod.js
index 60b5cec..03cd2ca 100644
--- a/mods/font-chooser/mod.js
+++ b/mods/font-chooser/mod.js
@@ -1,95 +1,59 @@
 /*
  * font chooser
  * (c) 2020 torchatlas (https://bit.ly/torchatlas)
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * under the MIT license
  */
 
 'use strict';
 
 module.exports = {
-	id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
-	tags: ['extension'],
-	name: 'font chooser',
-	desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.',
-	version: '0.1.0',
-	author: 'torchatlas',
-	options: [
-		{
-			key: 'sansSerif',
-			label: 'Sans Serif and UI',
-			type: 'input',
-			value: '',
-		},
-		{
-			key: 'serif',
-			label: 'Serif',
-			type: 'input',
-			value: ''
-		},
-		{
-			key: 'mono',
-			label: 'Monospace',
-			type: 'input',
-			value: ''
-		},
-		{
-			key: 'code',
-			label: 'Code',
-			type: 'input',
-			value: ''
-		}
-	],
-	hacks: {
-		'renderer/preload.js'(store, __exports) {
-			document.addEventListener('readystatechange', (event) => {
-
-				if (document.readyState !== 'complete') return false;
-
-				if (store().sansSerif != '') {
-					document.documentElement.style.setProperty(
-						'--theme_dark--font_sans',
-						store().sansSerif
-					);
-					document.documentElement.style.setProperty(
-						'--theme_light--font_sans',
-						store().sansSerif
-					);	
-				}
-
-				if (store().serif != '') {
-					document.documentElement.style.setProperty(
-						'--theme_dark--font_serif',
-						store().serif
-					);
-					document.documentElement.style.setProperty(
-						'--theme_light--font_serif',
-						store().serif
-					);	
-				}
-
-				if (store().mono != '') {
-					document.documentElement.style.setProperty(
-						'--theme_dark--font_mono',
-						store().mono
-					);
-					document.documentElement.style.setProperty(
-						'--theme_light--font_mono',
-						store().mono
-					);	
-				}
-
-				if (store().code != '') {
-					document.documentElement.style.setProperty(
-						'--theme_dark--font_code',
-						store().code
-					);
-					document.documentElement.style.setProperty(
-						'--theme_light--font_code',
-						store().code
-					);	
-				}
-
-			});
-		}
-	}
-}
\ No newline at end of file
+  id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16',
+  tags: ['extension'],
+  name: 'font chooser',
+  desc:
+    'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.',
+  version: '0.1.1',
+  author: 'torchatlas',
+  options: [
+    {
+      key: 'sans',
+      label: 'sans-serif (inc. ui):',
+      type: 'input',
+      value: '',
+    },
+    {
+      key: 'serif',
+      label: 'serif:',
+      type: 'input',
+      value: '',
+    },
+    {
+      key: 'mono',
+      label: 'monospace:',
+      type: 'input',
+      value: '',
+    },
+    {
+      key: 'code',
+      label: 'code:',
+      type: 'input',
+      value: '',
+    },
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      const attempt_interval = setInterval(enhance, 500);
+      async function enhance() {
+        if (!document.querySelector('.notion-app-inner')) return;
+        clearInterval(attempt_interval);
+        for (let style of ['sans', 'serif', 'mono', 'code']) {
+          if (!store()[style]) return;
+          document
+            .querySelector('.notion-app-inner')
+            .style.setProperty(`--theme--font_${style}`, store()[style]);
+        }
+      }
+    },
+  },
+};
diff --git a/mods/gameish/mod.js b/mods/gameish/mod.js
index 405aabe..66a5bf6 100644
--- a/mods/gameish/mod.js
+++ b/mods/gameish/mod.js
@@ -12,11 +12,14 @@ module.exports = {
   tags: ['theme', 'dark'],
   name: 'gameish',
   desc: 'a purple, "gamer-styled" theme with a blocky-font.',
-  version: '0.1.2',
+  version: '0.1.3',
   author: {
     name: 'LVL100ShrekCultist',
     link: 'https://www.reddit.com/user/LVL100ShrekCultist/',
     avatar:
       'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg',
   },
+  fonts: [
+    'https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap',
+  ],
 };
diff --git a/mods/gameish/styles.css b/mods/gameish/styles.css
index b0c914b..62500b1 100644
--- a/mods/gameish/styles.css
+++ b/mods/gameish/styles.css
@@ -5,8 +5,6 @@
  * under the MIT license
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap');
-
 :root {
   --theme_dark--main: #1e1c26;
   --theme_dark--sidebar: #24222c;
diff --git a/mods/littilepig-dark/mod.js b/mods/littilepig-dark/mod.js
index 1720a8e..a655447 100644
--- a/mods/littilepig-dark/mod.js
+++ b/mods/littilepig-dark/mod.js
@@ -12,11 +12,12 @@ module.exports = {
   tags: ['theme', 'dark'],
   name: 'littlepig dark',
   desc: 'a purple monospaced theme using emojis and colourful text.',
-  version: '0.1.0',
+  version: '0.1.1',
   author: {
     name: 'Lizishan',
     link: 'https://www.reddit.com/user/Lizishan/',
     avatar:
       'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
   },
+  fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
 };
diff --git a/mods/littilepig-dark/styles.css b/mods/littilepig-dark/styles.css
index 4c752e1..fbc0efe 100644
--- a/mods/littilepig-dark/styles.css
+++ b/mods/littilepig-dark/styles.css
@@ -5,8 +5,6 @@
  * under the MIT license
  */
 
-@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
-
 :root {
   --theme_dark--main: #1e1c26;
   --theme_dark--sidebar: #24222c;
diff --git a/mods/littlepig-light/mod.js b/mods/littlepig-light/mod.js
index fbeb9f7..319d127 100644
--- a/mods/littlepig-light/mod.js
+++ b/mods/littlepig-light/mod.js
@@ -12,11 +12,12 @@ module.exports = {
   tags: ['theme', 'light'],
   name: 'littlepig light',
   desc: 'a bright monospaced theme using emojis and colourful text.',
-  version: '0.1.0',
+  version: '0.1.1',
   author: {
     name: 'Lizishan',
     link: 'https://www.reddit.com/user/Lizishan/',
     avatar:
       'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg',
   },
+  fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'],
 };
diff --git a/mods/littlepig-light/styles.css b/mods/littlepig-light/styles.css
index 5414d6f..334b27c 100644
--- a/mods/littlepig-light/styles.css
+++ b/mods/littlepig-light/styles.css
@@ -5,8 +5,6 @@
  * under the MIT license
  */
 
-@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css');
-
 :root {
   --theme_light--font_sans: 'JetBrains Mono';
   --theme_light--font_mono: 'JetBrains Mono';
diff --git a/mods/neutral/mod.js b/mods/neutral/mod.js
index 23a352e..51c13a3 100644
--- a/mods/neutral/mod.js
+++ b/mods/neutral/mod.js
@@ -12,6 +12,10 @@ module.exports = {
   tags: ['theme', 'dark'],
   name: 'neutral',
   desc: 'smoother colours and fonts, designed to be more pleasing to the eye.',
-  version: '0.1.1',
+  version: '0.1.2',
   author: 'arecsu',
+  fonts: [
+    'https://rsms.me/inter/inter.css',
+    'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap',
+  ],
 };
diff --git a/mods/neutral/styles.css b/mods/neutral/styles.css
index c814737..2a7b441 100644
--- a/mods/neutral/styles.css
+++ b/mods/neutral/styles.css
@@ -5,9 +5,6 @@
  * under the MIT license
  */
 
-@import url('https://rsms.me/inter/inter.css');
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
-
 :root {
   /** dark **/
 
diff --git a/mods/pastel-dark/mod.js b/mods/pastel-dark/mod.js
index a69ff80..31e9358 100644
--- a/mods/pastel-dark/mod.js
+++ b/mods/pastel-dark/mod.js
@@ -12,11 +12,12 @@ module.exports = {
   tags: ['theme', 'dark'],
   name: 'pastel dark',
   desc: 'a smooth-transition true dark theme with a hint of pastel.',
-  version: '0.1.1',
+  version: '0.1.2',
   author: {
     name: 'zenith_illinois',
     link: 'https://www.reddit.com/user/zenith_illinois/',
     avatar:
       'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128',
   },
+  fonts: ['https://rsms.me/inter/inter.css'],
 };
diff --git a/mods/pastel-dark/styles.css b/mods/pastel-dark/styles.css
index 49c44bc..5ba0826 100644
--- a/mods/pastel-dark/styles.css
+++ b/mods/pastel-dark/styles.css
@@ -5,8 +5,6 @@
  * under the MIT license
  */
 
-@import url('https://rsms.me/inter/inter.css');
-
 :root {
   --theme_dark--main: #0b0b0b;
   --theme_dark--sidebar: #0f0f0f;
diff --git a/pkg/helpers.js b/pkg/helpers.js
index d8309eb..bfaaaeb 100644
--- a/pkg/helpers.js
+++ b/pkg/helpers.js
@@ -9,8 +9,7 @@
 const os = require('os'),
   path = require('path'),
   fs = require('fs-extra'),
-  { exec, execSync } = require('child_process'),
-  { promisify } = require('util');
+  { execSync } = require('child_process');
 
 // used to differentiate between "enhancer failed" and "code broken" errors.
 class EnhancerError extends Error {
@@ -128,6 +127,7 @@ function getEnhancements() {
         !mod.name ||
         !mod.version ||
         !mod.author ||
+        (mod.fonts && !mod.fonts.every((font) => typeof font === 'string')) ||
         (mod.options &&
           !mod.options.every((opt) =>
             ['toggle', 'select', 'input', 'file', 'color'].includes(opt.type)
@@ -169,6 +169,13 @@ function readline() {
   });
 }
 
+// construct a HTMLElement from a string
+function createElement(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html.trim();
+  return template.content.firstElementChild;
+}
+
 module.exports = {
   EnhancerError,
   is_wsl,
@@ -178,4 +185,5 @@ module.exports = {
   getEnhancements,
   getJSON,
   readline,
+  createElement,
 };
diff --git a/pkg/loader.js b/pkg/loader.js
index 14b45ab..a70f1a8 100644
--- a/pkg/loader.js
+++ b/pkg/loader.js
@@ -69,10 +69,16 @@ module.exports = function (__file, __exports) {
       ) {
         document.addEventListener('readystatechange', (event) => {
           if (document.readyState !== 'complete') return false;
-          const style = document.createElement('link');
-          style.rel = 'stylesheet';
-          style.href = `enhancement://${mod.dir}/styles.css`;
-          document.querySelector('head').appendChild(style);
+          for (let rules of [
+            `enhancement://${mod.dir}/styles.css`,
+            ...(mod.fonts || []),
+          ]) {
+            document
+              .querySelector('head')
+              .appendChild(
+                helpers.createElement(`<link rel="stylesheet" href="${rules}">`)
+              );
+          }
         });
       }
       if (mod.hacks && mod.hacks[__file]) {

From fed816b8da8a2b2d38cd3a3ee45651f549b5dd35 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 11:33:18 +1000
Subject: [PATCH 03/11] page titles now respond to small-text mode

---
 CHANGELOG.md            | 4 ++--
 mods/core/css/theme.css | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e696f1..a5c2f70 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ a feature and cleanup update.
 - bugfix: enhancer settings should no longer reset on update (though this will not have
   effect until the release after this one).
 - bugfix: blue select tags are no longer purple.
+- bugfix: page titles now respond to small-text mode.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
@@ -23,12 +24,11 @@ a feature and cleanup update.
 // todo
 
 - improved: added individual text-colour rules for different background colours.
-- improved: added variables for callout backgrounds.
+- improved: added variables for callout colouring.
 - improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
 - bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e`
   to remove conflict with the inline code highlight shortcut.
 - bugfix: block-level text colours are now changed properly.
-- bugfix: page titles now respond to small-text mode.
 - bugfix: update property-layout to match notion changes again.
 - extension: "calendar scroll" = a button to scroll down to the current week for you.
 
diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css
index 96f1efc..dac7b68 100644
--- a/mods/core/css/theme.css
+++ b/mods/core/css/theme.css
@@ -107,7 +107,9 @@
   font-family: var(--theme--font_code) !important;
 }
 .notion-frame .notion-page-block div[placeholder='Untitled'] {
-  font-size: var(--theme--font_title-size) !important;
+  font-size: calc(
+    var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em)
+  ) !important;
 }
 [placeholder='Heading 1'] {
   font-size: calc(

From 648c1f8b995b506cc16b04ff78a2ce300d588e1e Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 15:39:53 +1000
Subject: [PATCH 04/11] fix #76, height of weekly calendar view

---
 CHANGELOG.md            |  1 +
 mods/weekly-view/mod.js | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a5c2f70..141b2b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ a feature and cleanup update.
   effect until the release after this one).
 - bugfix: blue select tags are no longer purple.
 - bugfix: page titles now respond to small-text mode.
+- bugfix: weekly calendar view height is now sized correctly according to its contents.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
diff --git a/mods/weekly-view/mod.js b/mods/weekly-view/mod.js
index 17437a5..2e66179 100644
--- a/mods/weekly-view/mod.js
+++ b/mods/weekly-view/mod.js
@@ -12,7 +12,7 @@ module.exports = {
   tags: ['extension'],
   name: 'weekly view',
   desc: 'calendar views named "weekly" will show only the 7 days of this week.',
-  version: '0.5.0',
+  version: '0.5.1',
   author: 'adihd',
   hacks: {
     'renderer/preload.js'(store, __exports) {
@@ -36,15 +36,17 @@ module.exports = {
             if (!collection_view || collection_view.innerText != 'weekly')
               return;
             const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
-              'notion-calendar-view-day'
-            );
+                'notion-calendar-view-day'
+              ),
+              today = [...days].find((day) => day.style.background),
+              height = today
+                ? getComputedStyle(
+                    today.parentElement.parentElement
+                  ).getPropertyValue('height')
+                : 0;
             for (let day of days)
               day.parentElement.parentElement.style.height = 0;
-            if (days.length) {
-              const today = [...days].find((day) => day.style.background);
-              if (today)
-                today.parentElement.parentElement.style.height = '124px';
-            }
+            today.parentElement.parentElement.style.height = height;
           }
         }
       });

From e158cc25b345b33d6a5a49fe7848dbdd4dd44089 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 20:40:35 +1000
Subject: [PATCH 05/11] remove extension menu hotkey conflict + make
 configurable

---
 CHANGELOG.md            |  5 +++--
 UPDATING.md             |  2 +-
 mods/core/client.js     |  2 --
 mods/core/menu.js       |  5 ++---
 mods/core/mod.js        |  6 ++++++
 mods/core/tray.js       | 14 ++++++++++++--
 mods/weekly-view/mod.js |  2 +-
 pkg/helpers.md          | 12 ++++++++++++
 8 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 141b2b9..642a746 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - [groupy-like tabbing](https://www.npmjs.com/package/electron-tabs)
 - [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk)
 - [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc)
+- [advanced math editor](https://github.com/Manueloccorso/NotionMathEditor_BrowserExtension)
 
 ### v0.9.0 (wip)
 
@@ -21,14 +22,14 @@ a feature and cleanup update.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
+- bugfix: made the open enhancements menu hotkey configurable and changed the default to `alt + e`
+  to remove conflict with the inline code highlight shortcut.
 
 // todo
 
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
 - improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
-- bugfix: made the open enhancements menu hotkey configurable and changed the default to `option/alt + e`
-  to remove conflict with the inline code highlight shortcut.
 - bugfix: block-level text colours are now changed properly.
 - bugfix: update property-layout to match notion changes again.
 - extension: "calendar scroll" = a button to scroll down to the current week for you.
diff --git a/UPDATING.md b/UPDATING.md
index d27e589..c0c9831 100644
--- a/UPDATING.md
+++ b/UPDATING.md
@@ -46,7 +46,7 @@ page and the [css theming documentation](DOCUMENTATION.md#variable-theming).
 "how can I set a custom window visibility toggle hotkey?"
 
 these options and more have been moved to the graphical menu, which can be opened from the
-tray or with `CMD/CTRL+E` (while the notion app is focused).
+tray or with `ALT+E` (while the notion app is focused).
 
 ## installing
 
diff --git a/mods/core/client.js b/mods/core/client.js
index 6951260..e30b2a3 100644
--- a/mods/core/client.js
+++ b/mods/core/client.js
@@ -19,8 +19,6 @@ module.exports = (store, __exports) => {
   // additional hotkeys
   document.defaultView.addEventListener('keyup', (event) => {
     if (event.code === 'F5') location.reload();
-    if (event.key === 'e' && (event.ctrlKey || event.metaKey))
-      electron.ipcRenderer.send('enhancer:open-extension-menu');
   });
 
   const attempt_interval = setInterval(enhance, 500);
diff --git a/mods/core/menu.js b/mods/core/menu.js
index 94435ee..9d3ae39 100644
--- a/mods/core/menu.js
+++ b/mods/core/menu.js
@@ -19,7 +19,6 @@ window['__start'] = async () => {
 
   document.defaultView.addEventListener('keyup', (event) => {
     if (event.code === 'F5') location.reload();
-    if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close();
     if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) {
       if (
         document.activeElement.parentElement.id === 'tags' &&
@@ -458,6 +457,7 @@ window['__start'] = async () => {
           $opt
             .querySelector(`#${opt.type}_${mod.id}--${opt.key}`)
             .addEventListener('change', (event) => {
+              modified();
               if (opt.type === 'toggle') {
                 store(mod.id)[opt.key] = event.target.checked;
               } else if (opt.type === 'file') {
@@ -469,9 +469,8 @@ window['__start'] = async () => {
               } else
                 store(mod.id)[opt.key] =
                   typeof opt.value === 'number'
-                    ? Number(event.target.value)
+                    ? +event.target.value
                     : event.target.value;
-              modified();
             });
         }
         $options.appendChild($opt);
diff --git a/mods/core/mod.js b/mods/core/mod.js
index 1f56beb..25a4d27 100644
--- a/mods/core/mod.js
+++ b/mods/core/mod.js
@@ -56,6 +56,12 @@ module.exports = {
       type: 'input',
       value: 'CommandOrControl+Shift+A',
     },
+    {
+      key: 'menu_toggle',
+      label: 'open enhancements menu hotkey:',
+      type: 'input',
+      value: 'Alt+E',
+    },
   ],
   hacks: {
     'main/main.js': require('./tray.js'),
diff --git a/mods/core/tray.js b/mods/core/tray.js
index 489452e..0c004e9 100644
--- a/mods/core/tray.js
+++ b/mods/core/tray.js
@@ -40,7 +40,6 @@ module.exports = (store, __exports) => {
           webContents.send('enhancer:get-theme-vars', arg)
         );
     });
-    electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu);
 
     function calculateWindowPos(width, height) {
       const screen = electron.screen.getDisplayNearestPoint({
@@ -157,7 +156,7 @@ module.exports = (store, __exports) => {
       {
         type: 'normal',
         label: 'Enhancements',
-        accelerator: 'CommandOrControl+E',
+        accelerator: store().menu_toggle,
         click: openExtensionMenu,
       },
       {
@@ -193,6 +192,17 @@ module.exports = (store, __exports) => {
     tray.setContextMenu(contextMenu);
     tray.setToolTip('Notion');
 
+    electron.globalShortcut.register(store().menu_toggle, () => {
+      if (
+        electron.BrowserWindow.getAllWindows()
+          .filter((win) => win.getTitle() !== 'notion-enhancer menu')
+          .some((win) => win.isFocused())
+      ) {
+        openExtensionMenu();
+      } else if (enhancer_menu && enhancer_menu.isFocused())
+        enhancer_menu.close();
+    });
+
     function showWindows() {
       const windows = electron.BrowserWindow.getAllWindows();
       if (is_mac) electron.app.show();
diff --git a/mods/weekly-view/mod.js b/mods/weekly-view/mod.js
index 2e66179..e18bede 100644
--- a/mods/weekly-view/mod.js
+++ b/mods/weekly-view/mod.js
@@ -46,7 +46,7 @@ module.exports = {
                 : 0;
             for (let day of days)
               day.parentElement.parentElement.style.height = 0;
-            today.parentElement.parentElement.style.height = height;
+            if (today) today.parentElement.parentElement.style.height = height;
           }
         }
       });
diff --git a/pkg/helpers.md b/pkg/helpers.md
index 52ba37e..5e84fe0 100644
--- a/pkg/helpers.md
+++ b/pkg/helpers.md
@@ -120,3 +120,15 @@ if (overwrite) {
   // do stuff
 } else console.info(' -- keeping file: skipping step.');
 ```
+
+---
+
+```js
+function createElement(html) {
+  const template = document.createElement('template');
+  template.innerHTML = html.trim();
+  return template.content.firstElementChild;
+}
+```
+
+use `helpers.createElement(html)` to turn a html-valid string into an element to add to the page.

From 58ff18724b1b9acf8771331b4100ed4a646f82b0 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 21:16:51 +1000
Subject: [PATCH 06/11] fix #69 - option to completely hide window buttons

---
 CHANGELOG.md           |  4 +++-
 mods/core/buttons.js   |  4 ++--
 mods/core/client.js    |  4 ++--
 mods/core/css/menu.css |  3 +++
 mods/core/menu.js      |  7 +++++--
 mods/core/mod.js       |  6 ++++++
 mods/core/render.js    | 26 +++++++++++++++-----------
 7 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 642a746..e0ab800 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ a feature and cleanup update.
 - improved: halved the number of css rules used -> much better performance.
 - improved: font imports must be define in the `mod.js` so that they can also be used in
   the enhancements menu.
+- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
 - bugfix: enhancer settings should no longer reset on update (though this will not have
   effect until the release after this one).
 - bugfix: blue select tags are no longer purple.
@@ -29,9 +30,10 @@ a feature and cleanup update.
 
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
-- improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
 - bugfix: block-level text colours are now changed properly.
 - bugfix: update property-layout to match notion changes again.
+- extension: "always on top" = add an arrow/button to show the notion window on top of other windows
+  even if it's not focused.
 - extension: "calendar scroll" = a button to scroll down to the current week for you.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
diff --git a/mods/core/buttons.js b/mods/core/buttons.js
index 9b6cafd..e0cd54c 100644
--- a/mods/core/buttons.js
+++ b/mods/core/buttons.js
@@ -16,7 +16,7 @@ module.exports = (store) => {
       element: helpers.createElement('<div class="window-buttons-area"></div>'),
       insert: [
         'alwaysontop',
-        ...(store().frameless && !is_mac
+        ...(store().frameless && !store().tiling_mode && !is_mac
           ? ['minimize', 'maximize', 'close']
           : []),
       ],
@@ -86,7 +86,7 @@ module.exports = (store) => {
       document.querySelector(`.window-button#btn-${btn}`).onclick =
         buttons.actions[btn];
     }
-    if (store().frameless && !is_mac) {
+    if (store().frameless && !store().tiling_mode && !is_mac) {
       window.addEventListener('resize', (event) => {
         Promise.resolve(buttons.icons.maximize()).then((icon) => {
           icon = icon.toString();
diff --git a/mods/core/client.js b/mods/core/client.js
index e30b2a3..8aad84b 100644
--- a/mods/core/client.js
+++ b/mods/core/client.js
@@ -35,7 +35,7 @@ module.exports = (store, __exports) => {
       document.body.classList.add('smooth-scrollbars');
 
     // frameless
-    if (store().frameless) {
+    if (store().frameless && !store().tiling_mode) {
       document.body.classList.add('frameless');
       // draggable area
       const dragarea = helpers.createElement(
@@ -154,7 +154,7 @@ module.exports = (store, __exports) => {
     });
     let sidebar_width;
     function setSidebarWidth(list) {
-      if (!store().frameless) return;
+      if (!store().frameless && store().tiling_mode) return;
       const new_sidebar_width =
         list[0].target.style.height === 'auto'
           ? '0px'
diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css
index 59c1a3d..8138f92 100644
--- a/mods/core/css/menu.css
+++ b/mods/core/css/menu.css
@@ -117,6 +117,9 @@ s {
 #menu-titlebar {
   background: var(--theme--dragarea);
 }
+#menu-titlebar:empty {
+  display: none;
+}
 
 /* alerts */
 
diff --git a/mods/core/menu.js b/mods/core/menu.js
index 9d3ae39..95aae9c 100644
--- a/mods/core/menu.js
+++ b/mods/core/menu.js
@@ -7,6 +7,7 @@
 'use strict';
 
 const store = require('../../pkg/store.js'),
+  { id } = require('./mod.js'),
   helpers = require('../../pkg/helpers.js'),
   fs = require('fs-extra'),
   path = require('path'),
@@ -14,8 +15,10 @@ const store = require('../../pkg/store.js'),
   browser = electron.remote.getCurrentWindow();
 
 window['__start'] = async () => {
-  const buttons = require('./buttons.js')(() => ({ frameless: true }));
-  document.querySelector('#menu-titlebar').appendChild(buttons.element);
+  if (!store(id).tiling_mode) {
+    const buttons = require('./buttons.js')(() => ({ frameless: true }));
+    document.querySelector('#menu-titlebar').appendChild(buttons.element);
+  }
 
   document.defaultView.addEventListener('keyup', (event) => {
     if (event.code === 'F5') location.reload();
diff --git a/mods/core/mod.js b/mods/core/mod.js
index 25a4d27..2294d0a 100644
--- a/mods/core/mod.js
+++ b/mods/core/mod.js
@@ -44,6 +44,12 @@ module.exports = {
       type: 'input',
       value: 15,
     },
+    {
+      key: 'tiling_mode',
+      label: 'tiling window manager mode',
+      type: 'toggle',
+      value: false,
+    },
     {
       key: 'smooth_scrollbars',
       label: 'integrated scrollbars',
diff --git a/mods/core/render.js b/mods/core/render.js
index a6c7d58..9b17f03 100644
--- a/mods/core/render.js
+++ b/mods/core/render.js
@@ -16,16 +16,20 @@ module.exports = (store, __exports) => {
       ),
       default_styles = dragarea.getAttribute('style');
 
-    document
-      .getElementById('notion')
-      .addEventListener('ipc-message', (event) => {
-        if (event.channel !== 'enhancer:sidebar-width') return;
-        dragarea.setAttribute(
-          'style',
-          `${default_styles} top: 2px; height: ${
-            store().dragarea_height
-          }px; left: ${event.args[0]};`
-        );
-      });
+    if (store().tiling_mode) {
+      dragarea.style.display = 'none';
+    } else {
+      document
+        .getElementById('notion')
+        .addEventListener('ipc-message', (event) => {
+          if (event.channel !== 'enhancer:sidebar-width') return;
+          dragarea.setAttribute(
+            'style',
+            `${default_styles} top: 2px; height: ${
+              store().dragarea_height
+            }px; left: ${event.args[0]};`
+          );
+        });
+    }
   };
 };

From ecdf9a70c0b0ffeb37a84ed9fec8cd31a8b06c22 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 21:46:17 +1000
Subject: [PATCH 07/11] separate always-on-top into separate mod

---
 CHANGELOG.md            |  9 ++++---
 mods/alwaysontop/mod.js | 20 +++++++++++++++
 mods/core/buttons.js    |  5 +++-
 mods/core/css/menu.css  |  9 +++----
 mods/core/menu.js       | 54 +++++++++++++++++++++++++----------------
 5 files changed, 66 insertions(+), 31 deletions(-)
 create mode 100644 mods/alwaysontop/mod.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0ab800..2cad25d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,20 +20,21 @@ a feature and cleanup update.
 - bugfix: blue select tags are no longer purple.
 - bugfix: page titles now respond to small-text mode.
 - bugfix: weekly calendar view height is now sized correctly according to its contents.
+- bugfix: made the open enhancements menu hotkey configurable and changed the default to `alt + e`
+  to remove conflict with the inline code highlight shortcut.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
-- bugfix: made the open enhancements menu hotkey configurable and changed the default to `alt + e`
-  to remove conflict with the inline code highlight shortcut.
+- extension: "always on top" = add an arrow/button to show the notion window on top of other windows
+  even if it's not focused.
 
 // todo
 
+- improved: extensions menu search now includes options.
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
 - bugfix: block-level text colours are now changed properly.
 - bugfix: update property-layout to match notion changes again.
-- extension: "always on top" = add an arrow/button to show the notion window on top of other windows
-  even if it's not focused.
 - extension: "calendar scroll" = a button to scroll down to the current week for you.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
diff --git a/mods/alwaysontop/mod.js b/mods/alwaysontop/mod.js
new file mode 100644
index 0000000..6972b63
--- /dev/null
+++ b/mods/alwaysontop/mod.js
@@ -0,0 +1,20 @@
+/*
+ * always on top
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+// this is actually just a pseudo mod to "separate" the button
+// from the core module, but the core still handles actually
+// making it work.
+module.exports = {
+  id: '72886371-dada-49a7-9afc-9f275ecf29d3',
+  tags: ['extension'],
+  name: 'always on top',
+  desc:
+    "add an arrow/button to show the notion window on top of other windows even if it's not focused.",
+  version: '0.1.1',
+  author: 'dragonwocky',
+};
diff --git a/mods/core/buttons.js b/mods/core/buttons.js
index e0cd54c..376f1b4 100644
--- a/mods/core/buttons.js
+++ b/mods/core/buttons.js
@@ -15,7 +15,10 @@ module.exports = (store) => {
     buttons = {
       element: helpers.createElement('<div class="window-buttons-area"></div>'),
       insert: [
-        'alwaysontop',
+        ...((store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
+          .enabled
+          ? ['alwaysontop']
+          : []),
         ...(store().frameless && !store().tiling_mode && !is_mac
           ? ['minimize', 'maximize', 'close']
           : []),
diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css
index 8138f92..805bb72 100644
--- a/mods/core/css/menu.css
+++ b/mods/core/css/menu.css
@@ -105,19 +105,18 @@ s {
 
 #menu-titlebar {
   display: flex;
-  padding: 0.4em;
   -webkit-app-region: drag;
 }
 #menu-titlebar button {
   -webkit-app-region: no-drag;
 }
-#menu-titlebar :first-child {
-  margin-left: auto;
-}
 #menu-titlebar {
   background: var(--theme--dragarea);
 }
-#menu-titlebar:empty {
+#menu-titlebar > .window-buttons-area {
+  margin: 0.4em 0.4em 0.4em auto;
+}
+#menu-titlebar > .window-buttons-area:empty {
   display: none;
 }
 
diff --git a/mods/core/menu.js b/mods/core/menu.js
index 95aae9c..2577e9c 100644
--- a/mods/core/menu.js
+++ b/mods/core/menu.js
@@ -15,32 +15,44 @@ const store = require('../../pkg/store.js'),
   browser = electron.remote.getCurrentWindow();
 
 window['__start'] = async () => {
-  if (!store(id).tiling_mode) {
-    const buttons = require('./buttons.js')(() => ({ frameless: true }));
-    document.querySelector('#menu-titlebar').appendChild(buttons.element);
-  }
+  const buttons = require('./buttons.js')(() => ({
+    '72886371-dada-49a7-9afc-9f275ecf29d3': {
+      enabled: (store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {})
+        .enabled,
+    },
+    tiling_mode: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082').tiling_mode,
+    frameless: true,
+  }));
+  document.querySelector('#menu-titlebar').appendChild(buttons.element);
 
   document.defaultView.addEventListener('keyup', (event) => {
     if (event.code === 'F5') location.reload();
-    if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) {
+    const meta =
+      !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey;
+    if (
+      meta &&
+      document.activeElement.parentElement.id === 'tags' &&
+      event.key === 'Enter'
+    )
+      document.activeElement.click();
+    if (document.activeElement.tagName.toLowerCase() === 'input') {
+      if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
+        document.activeElement.checked = !document.activeElement.checked;
       if (
-        document.activeElement.parentElement.id === 'tags' &&
-        event.key === 'Enter'
+        ['Escape', 'Enter'].includes(event.key) &&
+        document.activeElement.type !== 'checkbox' &&
+        (document.activeElement.parentElement.id !== 'search' ||
+          event.key === 'Escape')
       )
-        document.activeElement.click();
-      if (document.activeElement.tagName.toLowerCase() === 'input') {
-        if (document.activeElement.type === 'checkbox' && event.key === 'Enter')
-          document.activeElement.checked = !document.activeElement.checked;
-        if (
-          ['Escape', 'Enter'].includes(event.key) &&
-          document.activeElement.type !== 'checkbox' &&
-          (document.activeElement.parentElement.id !== 'search' ||
-            event.key === 'Escape')
-        )
-          document.activeElement.blur();
-      } else if (event.key === '/')
-        document.querySelector('#search > input').focus();
-    }
+        document.activeElement.blur();
+    } else if (
+      (meta && event.key === '/') ||
+      ((event.ctrlKey || event.metaKey) &&
+        event.key === 'f' &&
+        !event.altKey &&
+        !event.shiftKey)
+    )
+      document.querySelector('#search > input').focus();
   });
 
   electron.ipcRenderer.send('enhancer:get-theme-vars');

From 67f9ffaddbd6f2f3ad857cac959fcc00883c52df Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 22:21:17 +1000
Subject: [PATCH 08/11] ext. menu search upgrades (more stuff is searchable +
 case insensitive + cmd/ctrl f)

---
 CHANGELOG.md      |  5 +++--
 README.md         |  2 +-
 mods/core/menu.js | 48 ++++++++++++++++++++++++++++-------------------
 pkg/apply.js      |  4 ++--
 pkg/remove.js     |  2 +-
 5 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2cad25d..4da52a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,12 +15,14 @@ a feature and cleanup update.
 - improved: font imports must be define in the `mod.js` so that they can also be used in
   the enhancements menu.
 - improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
+- improved: extensions menu search is now case insensitive and includes options, inputs and versions.
+  the search box can also for focused with `CMD/CTRL+F`.
 - bugfix: enhancer settings should no longer reset on update (though this will not have
   effect until the release after this one).
 - bugfix: blue select tags are no longer purple.
 - bugfix: page titles now respond to small-text mode.
 - bugfix: weekly calendar view height is now sized correctly according to its contents.
-- bugfix: made the open enhancements menu hotkey configurable and changed the default to `alt + e`
+- bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`
   to remove conflict with the inline code highlight shortcut.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
@@ -30,7 +32,6 @@ a feature and cleanup update.
 
 // todo
 
-- improved: extensions menu search now includes options.
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
 - bugfix: block-level text colours are now changed properly.
diff --git a/README.md b/README.md
index 518da63..cadfd0d 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ team to take to heart for future improvements."
 ## features
 
 once applied, modules can be configured via the graphical menu, which is opened from
-the tray/menubar icon or with `CMD/CTRL+E`.
+the tray/menubar icon or with `ALT+E`.
 
 ![](https://user-images.githubusercontent.com/16874139/91446210-84ee6b00-e8ba-11ea-9f40-187a150e4a82.png)
 
diff --git a/mods/core/menu.js b/mods/core/menu.js
index 2577e9c..682cd98 100644
--- a/mods/core/menu.js
+++ b/mods/core/menu.js
@@ -45,12 +45,13 @@ window['__start'] = async () => {
           event.key === 'Escape')
       )
         document.activeElement.blur();
-    } else if (
-      (meta && event.key === '/') ||
-      ((event.ctrlKey || event.metaKey) &&
-        event.key === 'f' &&
-        !event.altKey &&
-        !event.shiftKey)
+    } else if (meta && event.key === '/')
+      document.querySelector('#search > input').focus();
+    if (
+      (event.ctrlKey || event.metaKey) &&
+      event.key === 'f' &&
+      !event.altKey &&
+      !event.shiftKey
     )
       document.querySelector('#search > input').focus();
   });
@@ -171,7 +172,7 @@ window['__start'] = async () => {
   );
 
   // search
-  const search_query = {
+  const search_filters = {
     enabled: true,
     disabled: true,
     tags: new Set(
@@ -181,19 +182,28 @@ window['__start'] = async () => {
         .sort()
     ),
   };
+  function innerText(elem) {
+    let text = '';
+    for (let node of elem.childNodes) {
+      if (node.nodeType === 3) text += node.textContent;
+      if (node.nodeType === 1)
+        text += ['text', 'number'].includes(node.type)
+          ? node.value
+          : innerText(node);
+    }
+    return text;
+  }
   function search() {
     modules.loaded.forEach((mod) => {
       const $search_input = document.querySelector('#search > input');
       if (
-        (mod.elem.classList.contains('enabled') && !search_query.enabled) ||
-        (mod.elem.classList.contains('disabled') && !search_query.disabled) ||
-        !mod.tags.some((tag) => search_query.tags.has(tag)) ||
+        (mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
+        (mod.elem.classList.contains('disabled') && !search_filters.disabled) ||
+        !mod.tags.some((tag) => search_filters.tags.has(tag)) ||
         ($search_input.value &&
-          !(
-            mod.name +
-            mod.tags.map((tag) => `#${tag}`).join(' ') +
-            mod.desc
-          ).includes($search_input.value))
+          !innerText(mod.elem)
+            .toLowerCase()
+            .includes($search_input.value.toLowerCase()))
       )
         return (mod.elem.style.display = 'none');
       mod.elem.style.display = 'block';
@@ -220,17 +230,17 @@ window['__start'] = async () => {
   }
   createTag(
     'enabled',
-    (state) => [(search_query.enabled = state), search()]
+    (state) => [(search_filters.enabled = state), search()]
     // 'var(--theme--bg_green)'
   );
   createTag(
     'disabled',
-    (state) => [(search_query.disabled = state), search()]
+    (state) => [(search_filters.disabled = state), search()]
     // 'var(--theme--bg_red)'
   );
-  for (let tag of search_query.tags)
+  for (let tag of search_filters.tags)
     createTag(`#${tag}`, (state) => [
-      state ? search_query.tags.add(tag) : search_query.tags.delete(tag),
+      state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag),
       search(),
     ]);
 
diff --git a/pkg/apply.js b/pkg/apply.js
index fb4a9a3..f360ea3 100644
--- a/pkg/apply.js
+++ b/pkg/apply.js
@@ -30,10 +30,10 @@ module.exports = async function ({ overwrite_version, friendly_errors } = {}) {
     const check_app = await require('./check.js')();
     switch (check_app.code) {
       case 1:
-        console.log(`~~ notion-enhancer v${version} already applied.`);
+        console.info(`~~ notion-enhancer v${version} already applied.`);
         return true;
       case 2:
-        console.log(` * ${check_app.msg}`);
+        console.warn(` * ${check_app.msg}`);
         do {
           process.stdout.write(' > overwrite? [Y/n]: ');
           overwrite_version = await helpers.readline();
diff --git a/pkg/remove.js b/pkg/remove.js
index 98d608c..19917a5 100644
--- a/pkg/remove.js
+++ b/pkg/remove.js
@@ -68,7 +68,7 @@ module.exports = async function ({
 
     // cleaning data folder: ~/.notion-enhancer
     if (await fs.pathExists(helpers.data_folder)) {
-      console.log(` ...data folder ${helpers.data_folder} found.`);
+      console.info(` ...data folder ${helpers.data_folder} found.`);
       if (delete_data === undefined) {
         do {
           process.stdout.write(' > delete? [Y/n]: ');

From 54531f0a6d343c3e285eebca580931238bd03b8e Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 22:33:47 +1000
Subject: [PATCH 09/11] fix property-layout again

---
 CHANGELOG.md                    |  2 +-
 mods/custom-inserts/mod.js      | 17 ++++++++++++-----
 mods/property-layout/mod.js     | 26 +++++++++++++-------------
 mods/property-layout/styles.css |  3 +++
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4da52a2..410ce20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ a feature and cleanup update.
 - bugfix: weekly calendar view height is now sized correctly according to its contents.
 - bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`
   to remove conflict with the inline code highlight shortcut.
+- bugfix: update property-layout to match notion changes again.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
@@ -35,7 +36,6 @@ a feature and cleanup update.
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
 - bugfix: block-level text colours are now changed properly.
-- bugfix: update property-layout to match notion changes again.
 - extension: "calendar scroll" = a button to scroll down to the current week for you.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
diff --git a/mods/custom-inserts/mod.js b/mods/custom-inserts/mod.js
index 0879d36..59c0ba0 100644
--- a/mods/custom-inserts/mod.js
+++ b/mods/custom-inserts/mod.js
@@ -6,12 +6,14 @@
 
 'use strict';
 
+const helpers = require('../../pkg/helpers.js');
+
 module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
   tags: ['extension'],
   name: 'custom inserts',
   desc: 'link files for small client-side tweaks.',
-  version: '0.1.1',
+  version: '0.1.2',
   author: 'dragonwocky',
   options: [
     {
@@ -34,10 +36,15 @@ module.exports = {
         if (document.readyState !== 'complete') return false;
         if (store().css) {
           try {
-            const style = document.createElement('style');
-            style.type = 'text/css';
-            style.innerHTML = fs.readFileSync(store().css);
-            document.querySelector('head').appendChild(style);
+            document
+              .querySelector('head')
+              .appendChild(
+                helpers.createElement(
+                  `<style type="text/css">${fs.readFileSync(
+                    store().css
+                  )}</style>`
+                )
+              );
           } catch (err) {
             console.warn('<custom-inserts> invalid css file... unsetting.');
             store().css = '';
diff --git a/mods/property-layout/mod.js b/mods/property-layout/mod.js
index ab3c16b..a6957d8 100644
--- a/mods/property-layout/mod.js
+++ b/mods/property-layout/mod.js
@@ -7,12 +7,14 @@
 
 'use strict';
 
+const helpers = require('../../pkg/helpers.js');
+
 module.exports = {
   id: '4034a578-7dd3-4633-80c6-f47ac5b7b160',
   tags: ['extension'],
   name: 'property layout',
   desc: 'auto-collapse page properties that usually push down page content.',
-  version: '0.2.3',
+  version: '0.2.4',
   author: 'alexander-kazakov',
   hacks: {
     'renderer/preload.js'(store, __exports) {
@@ -30,7 +32,7 @@ module.exports = {
         function process(list) {
           queue = [];
           let properties = document.querySelector(
-            '.notion-scroller.vertical > :first-child [style="width: 100%; font-size: 14px;"]'
+            '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]'
           );
           if (
             properties &&
@@ -40,19 +42,17 @@ module.exports = {
               'propertylayout-enhanced',
               'propertylayout-hidden'
             );
-            const toggle = document.createElement('button');
-            toggle.classList.add('propertylayout-toggle');
-            toggle.setAttribute('data-action', 'show');
-            toggle.innerText = '→ show properties';
+            const toggle = helpers.createElement(
+              '<button class="propertylayout-toggle" data-action="show">properties</button>'
+            );
             toggle.addEventListener('click', (event) => {
               properties.classList.toggle('propertylayout-hidden');
-              const action = properties.classList.contains(
-                'propertylayout-hidden'
-              )
-                ? 'show'
-                : 'hide';
-              toggle.innerText = `→ ${action} properties`;
-              toggle.setAttribute('data-action', action);
+              toggle.setAttribute(
+                'data-action',
+                properties.classList.contains('propertylayout-hidden')
+                  ? 'show'
+                  : 'hide'
+              );
             });
             if (properties.previousElementSibling) {
               properties.previousElementSibling.append(toggle);
diff --git a/mods/property-layout/styles.css b/mods/property-layout/styles.css
index e058aa5..8ebf4c1 100644
--- a/mods/property-layout/styles.css
+++ b/mods/property-layout/styles.css
@@ -26,6 +26,9 @@
 .propertylayout-toggle[data-action='show'] {
   margin-bottom: 1em;
 }
+.propertylayout-toggle::before {
+  content: '→ ' attr(data-action) ' ';
+}
 .propertylayout-toggle:hover {
   background: var(--theme--interactive_hover);
 }

From f9e53ad0b344934332731adb2de3cca18c3e721a Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Wed, 2 Sep 2020 22:56:40 +1000
Subject: [PATCH 10/11] calendar scroll extension - #74

---
 CHANGELOG.md                    |  4 +-
 mods/calendar-scroll/mod.js     | 79 +++++++++++++++++++++++++++++++++
 mods/calendar-scroll/styles.css | 20 +++++++++
 3 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 mods/calendar-scroll/mod.js
 create mode 100644 mods/calendar-scroll/styles.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 410ce20..7f7e275 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,7 +22,7 @@ a feature and cleanup update.
 - bugfix: blue select tags are no longer purple.
 - bugfix: page titles now respond to small-text mode.
 - bugfix: weekly calendar view height is now sized correctly according to its contents.
-- bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`
+- bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`.
   to remove conflict with the inline code highlight shortcut.
 - bugfix: update property-layout to match notion changes again.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
@@ -30,13 +30,13 @@ a feature and cleanup update.
   or leave it blank to not change anything.
 - extension: "always on top" = add an arrow/button to show the notion window on top of other windows
   even if it's not focused.
+- extension: "calendar scroll" = add a button to scroll down to the current week for you.
 
 // todo
 
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
 - bugfix: block-level text colours are now changed properly.
-- extension: "calendar scroll" = a button to scroll down to the current week for you.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
 
diff --git a/mods/calendar-scroll/mod.js b/mods/calendar-scroll/mod.js
new file mode 100644
index 0000000..44cf64f
--- /dev/null
+++ b/mods/calendar-scroll/mod.js
@@ -0,0 +1,79 @@
+/*
+ * calendar scroll
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+'use strict';
+
+const helpers = require('../../pkg/helpers.js');
+
+module.exports = {
+  id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a',
+  tags: ['extension'],
+  name: 'calendar scroll',
+  desc:
+    'add a button to scroll down to the current week of a calendar for you.',
+  version: '0.1.0',
+  author: 'dragonwocky',
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        const attempt_interval = setInterval(enhance, 500);
+        function enhance() {
+          const notion_elem = document.querySelector('.notion-frame');
+          if (!notion_elem) return;
+          clearInterval(attempt_interval);
+
+          const button = helpers.createElement(
+            '<button id="calendar-scroll-to-week">Scroll</button>'
+          );
+          button.addEventListener('click', (event) => {
+            const collection_view = document.querySelector(
+              '.notion-collection-view-select'
+            );
+            if (!collection_view) return;
+            const day = [
+              ...collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName(
+                'notion-calendar-view-day'
+              ),
+            ].find((day) => day.style.background);
+            if (!day) return;
+            const scroller = document.querySelector(
+              '.notion-frame .notion-scroller'
+            );
+            scroller.scroll({
+              top: day.offsetParent.offsetParent.offsetTop + 70,
+            });
+            setTimeout(
+              () =>
+                scroller.scroll({
+                  top: day.offsetParent.offsetParent.offsetTop + 70,
+                }),
+              100
+            );
+          });
+
+          process();
+          const observer = new MutationObserver(process);
+          observer.observe(notion_elem, {
+            childList: true,
+            subtree: true,
+          });
+          function process(list, observer) {
+            if (document.querySelector('#calendar-scroll-to-week')) return;
+            const arrow = document.querySelector(
+              '.notion-selectable.notion-collection_view_page-block .chevronLeft'
+            );
+            if (arrow)
+              arrow.parentElement.parentElement.insertBefore(
+                button,
+                arrow.parentElement
+              );
+          }
+        }
+      });
+    },
+  },
+};
diff --git a/mods/calendar-scroll/styles.css b/mods/calendar-scroll/styles.css
new file mode 100644
index 0000000..ed41f12
--- /dev/null
+++ b/mods/calendar-scroll/styles.css
@@ -0,0 +1,20 @@
+/*
+ * calendar scroll
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * under the MIT license
+ */
+
+#calendar-scroll-to-week {
+  background: var(--theme--interactive_hover);
+  border: 1px solid transparent;
+  font-size: var(--theme--font_label-size);
+  color: var(--theme--text);
+  height: 24px;
+  border-radius: 3px;
+  line-height: 1.2;
+  padding: 0 0.5em;
+}
+#calendar-scroll-to-week:hover {
+  background: transparent;
+  border: 1px solid var(--theme--interactive_hover);
+}

From 9998857aa1c3348d6466c4242182bc741ad619fb Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Thu, 3 Sep 2020 12:11:25 +1000
Subject: [PATCH 11/11] fix #73 - block-level text colours are now changed
 properly, add tick/cross to search filters

---
 CHANGELOG.md            |  6 ++++-
 TWEAKS.md               | 17 ++++++++++++
 bin.js                  |  3 ++-
 mods/core/css/menu.css  |  6 +++++
 mods/core/css/theme.css | 58 ++++++++++++++++++++++++++++++++++-------
 5 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f7e275..3ac3e0b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ a feature and cleanup update.
 - improved: tiling window-manager support (can hide titlebars entirely without dragarea/buttons).
 - improved: extensions menu search is now case insensitive and includes options, inputs and versions.
   the search box can also for focused with `CMD/CTRL+F`.
+- improved: extensions menu filters shown either a ✓ or × to help understand the current state.
 - bugfix: enhancer settings should no longer reset on update (though this will not have
   effect until the release after this one).
 - bugfix: blue select tags are no longer purple.
@@ -25,6 +26,8 @@ a feature and cleanup update.
 - bugfix: made the open enhancements menu hotkey configurable and changed the default to `ALT+E`.
   to remove conflict with the inline code highlight shortcut.
 - bugfix: update property-layout to match notion changes again.
+- bugfix: updated some of the tweak styling to match notion changes.
+- bugfix: block-level text colours are now changed properly.
 - themes: "littlepig" (light + dark) = monospaced themes using emojis and colourful text.
 - extension: "font chooser" = customize fonts. for each option, type in the name of the font you would like to use,
   or leave it blank to not change anything.
@@ -36,7 +39,8 @@ a feature and cleanup update.
 
 - improved: added individual text-colour rules for different background colours.
 - improved: added variables for callout colouring.
-- bugfix: block-level text colours are now changed properly.
+- bugfix: switch to a different right-to-left extension because it wasn't working right
+  with bullet points and stuff.
 
 notion-deb-builder has been discovered to not generate an app.asar and so is no longer supported.
 
diff --git a/TWEAKS.md b/TWEAKS.md
index 4161269..ffd00b2 100644
--- a/TWEAKS.md
+++ b/TWEAKS.md
@@ -33,6 +33,7 @@ if you are attempting to customise the web client, the css previously used for t
 ### hide discussions (the comment threads at the top of each page)
 
 ```css
+[style*='env(safe-area-inset-left)'] [style*='width: 100%; height: 1px;'],
 .notion-page-view-discussion {
   display: none !important;
 }
@@ -40,11 +41,27 @@ if you are attempting to customise the web client, the css previously used for t
 
 <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/discussion-default.jpg?raw=true" width="45%"></img> <img src="https://github.com/dragonwocky/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/screenshots/discussion-hidden.jpg?raw=true" width="45%"></img>
 
+### hide backlinks
+
+note: this only hides the trigger. if you've already got backlinks shown,
+then use the 3 dots up in the top-right corner to remove them.
+
+```css
+.notion-page-details-controls {
+  display: none !important;
+}
+```
+
+<img src="https://user-images.githubusercontent.com/16874139/92044159-f3eb2880-edc0-11ea-9cc9-7adcec540905.png" width="45%"> <img src="https://user-images.githubusercontent.com/16874139/92044290-42002c00-edc1-11ea-96fa-147d84eb0555.png" width="45%">
+
 ### hide the '+ new' gallery button
 
 ```css
 .notion-gallery-view
   .notion-selectable.notion-collection_view-block
+  > [role='button'],
+.notion-gallery-view
+  .notion-selectable.notion-collection_view_page-block
   > [role='button'] {
   display: none !important;
 }
diff --git a/bin.js b/bin.js
index 06529c8..aab013f 100644
--- a/bin.js
+++ b/bin.js
@@ -67,4 +67,5 @@ cli.showVersionOnExit = true;
 
 cli.parse();
 
-if (!cli.matchedCommand && !helpCalled) cli.outputHelp();
+if (!cli.matchedCommand && !helpCalled && !cli.options.version)
+  cli.outputHelp();
diff --git a/mods/core/css/menu.css b/mods/core/css/menu.css
index 805bb72..9bb5c5d 100644
--- a/mods/core/css/menu.css
+++ b/mods/core/css/menu.css
@@ -241,10 +241,16 @@ s {
   background: var(--theme--option_hover-background);
   color: var(--theme--option_hover-color);
 }
+#search #tags > span::before {
+  content: '× ';
+}
 #search #tags > .selected {
   background: var(--tag_color, var(--theme--option_active-background));
   color: var(--theme--option_active-color);
 }
+#search #tags > .selected::before {
+  content: '✓ ';
+}
 
 /* module meta */
 
diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css
index dac7b68..428388b 100644
--- a/mods/core/css/theme.css
+++ b/mods/core/css/theme.css
@@ -417,8 +417,13 @@
 }
 
 .notion-body.dark [style*='color:rgba(151,154,155,0.95)'],
-.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] {
+.notion-body.dark
+  [style*='color: rgba(255, 255, 255, 0.6); fill: rgba(255, 255, 255, 0.6);'],
+.notion-body:not(.dark) [style*='color:rgb(155,154,151)'],
+.notion-body:not(.dark)
+  [style*='color: rgba(55, 53, 47, 0.6); fill: rgba(55, 53, 47, 0.6);'] {
   color: var(--theme--text_gray) !important;
+  fill: var(--theme--text_gray) !important;
 }
 .notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
@@ -435,8 +440,13 @@
   background: var(--theme--line_gray) !important;
 }
 .notion-body.dark [style*='color:rgb(147,114,100)'],
-.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] {
+.notion-body.dark
+  [style*='color: rgb(147, 114, 100); fill: rgb(147, 114, 100);'],
+.notion-body:not(.dark) [style*='color:rgb(100,71,58)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(100, 71, 58); fill: rgb(100, 71, 58);'] {
   color: var(--theme--text_brown) !important;
+  fill: var(--theme--text_brown) !important;
 }
 .notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] {
@@ -453,8 +463,12 @@
   background: var(--theme--line_brown) !important;
 }
 .notion-body.dark [style*='color:rgb(255,163,68)'],
-.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] {
+.notion-body.dark [style*='color: rgb(255, 163, 68); fill: rgb(255, 163, 68);'],
+.notion-body:not(.dark) [style*='color:rgb(217,115,13)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(217, 115, 13); fill: rgb(217, 115, 13);'] {
   color: var(--theme--text_orange) !important;
+  fill: var(--theme--text_orange) !important;
 }
 .notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] {
@@ -471,8 +485,12 @@
   background: var(--theme--line_orange) !important;
 }
 .notion-body.dark [style*='color:rgb(255,220,73)'],
-.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] {
+.notion-body.dark [style*='color: rgb(255, 220, 73); fill: rgb(255, 220, 73);'],
+.notion-body:not(.dark) [style*='color:rgb(223,171,1)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(223, 171, 1); fill: rgb(223, 171, 1);'] {
   color: var(--theme--text_yellow) !important;
+  fill: var(--theme--text_yellow) !important;
 }
 .notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] {
@@ -489,8 +507,12 @@
   background: var(--theme--line_yellow) !important;
 }
 .notion-body.dark [style*='color:rgb(77,171,154)'],
-.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] {
+.notion-body.dark [style*='color: rgb(77, 171, 154); fill: rgb(77, 171, 154);'],
+.notion-body:not(.dark) [style*='color:rgb(15,123,108)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(15, 123, 108); fill: rgb(15, 123, 108);'] {
   color: var(--theme--text_green) !important;
+  fill: var(--theme--text_green) !important;
 }
 .notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] {
@@ -507,8 +529,12 @@
   background: var(--theme--line_green) !important;
 }
 .notion-body.dark [style*='color:rgb(82,156,202)'],
-.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] {
+.notion-body.dark [style*='color: rgb(82, 156, 202); fill: rgb(82, 156, 202);'],
+.notion-body:not(.dark) [style*='color:rgb(11,110,153)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(11, 110, 153); fill: rgb(11, 110, 153);'] {
   color: var(--theme--text_blue) !important;
+  fill: var(--theme--text_blue) !important;
 }
 .notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] {
@@ -525,8 +551,13 @@
   background: var(--theme--line_blue) !important;
 }
 .notion-body.dark [style*='color:rgb(154,109,215)'],
-.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] {
+.notion-body.dark
+  [style*='color: rgb(154, 109, 215); fill: rgb(154, 109, 215);'],
+.notion-body:not(.dark) [style*='color:rgb(105,64,165)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(105, 64, 165); fill: rgb(105, 64, 165);'] {
   color: var(--theme--text_purple) !important;
+  fill: var(--theme--text_purple) !important;
 }
 .notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] {
@@ -543,8 +574,12 @@
   background: var(--theme--line_purple) !important;
 }
 .notion-body.dark [style*='color:rgb(226,85,161)'],
-.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] {
+.notion-body.dark [style*='color: rgb(226, 85, 161); fill: rgb(226, 85, 161);'],
+.notion-body:not(.dark) [style*='color:rgb(173,26,114)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(173, 26, 114); fill: rgb(173, 26, 114);'] {
   color: var(--theme--text_pink) !important;
+  fill: var(--theme--text_pink) !important;
 }
 .notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'],
 .notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] {
@@ -561,8 +596,13 @@
   background: var(--theme--line_pink) !important;
 }
 .notion-body.dark [style*='color:rgb(255,115,105)'],
-.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] {
+.notion-body.dark
+  [style*='color: rgb(255, 115, 105); fill: rgb(255, 115, 105);'],
+.notion-body:not(.dark) [style*='color:rgb(224,62,62)'],
+.notion-body:not(.dark)
+  [style*='color: rgb(224, 62, 62); fill: rgb(224, 62, 62);'] {
   color: var(--theme--text_red) !important;
+  fill: var(--theme--text_red) !important;
 }
 .notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'],
 .notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] {