From 330e5a5f6200895f34edcc3528d6049b90762548 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 15 Aug 2020 21:58:39 +1000 Subject: [PATCH] night shift extension --- CHANGELOG.md | 8 +- mods/core/client.js | 24 +-- mods/core/css/dark.css | 347 ++++++++++++++++----------------- mods/core/css/light.css | 363 ++++++++++++++++++----------------- mods/core/css/menu.css | 1 - mods/core/css/titlebar.css | 2 +- mods/core/css/variables.css | 2 +- mods/core/css/variables.json | 279 +++++++++------------------ mods/core/styles.css | 2 +- mods/emoji-sets/mod.js | 1 + mods/night-shift/mod.js | 41 ++++ 11 files changed, 517 insertions(+), 553 deletions(-) create mode 100644 mods/night-shift/mod.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5c48672..1663e65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,10 +25,10 @@ complete rewrite with node.js. //todo -- extension: "night light" = sync dark/light theme with the system. -- extension: "right-to-left" = enables auto rtl/ltr text direction detection. -- extension: "weekly view" = view 7-day calendars. -- extension: "property layout" = auto-collapse page properties that usually push down page content. +- extension: "night light" = sync dark/light theme with the system (overrides normal theme setting). +- extension: "right-to-left" = enables auto rtl/ltr text direction detection. (ported from [github.com/obahareth/notion-rtl](https://github.com/obahareth/notion-rtl).) +- extension: "weekly view" = view 7-day calendars. (ported from [github.com/adihd/notionweeklyview](https://github.com/adihd/notionweeklyview).) +- extension: "property layout" = auto-collapse page properties that usually push down page content. (ported from [github.com/alexander-kazakov/notion-layout-extension](https://github.com/alexander-kazakov/notion-layout-extension).) ### v0.7.0 (2020-07-09) diff --git a/mods/core/client.js b/mods/core/client.js index b8d92c5..6631d17 100644 --- a/mods/core/client.js +++ b/mods/core/client.js @@ -75,29 +75,31 @@ module.exports = (store, __exports) => { let sidebar_width; function communicationLoop() { const getStyle = (prop) => - getComputedStyle(document.body).getPropertyValue(prop), + getComputedStyle( + document.querySelector('.notion-app-inner') + ).getPropertyValue(prop), mode = JSON.parse(localStorage.theme).mode; // ctrl+f theming notionIpc.sendNotionToIndex('search:set-theme', { 'mode': mode, 'colors': { - 'white': getStyle(`--theme_${mode}--todo_ticked-fill`), - 'blue': getStyle(`--theme_${mode}--primary`), + 'white': getStyle(`--theme--option_active-color`), + 'blue': getStyle(`--theme--option_active-background`), }, 'borderRadius': 3, - 'textColor': getStyle(`--theme_${mode}--text`), - 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), + 'textColor': getStyle(`--theme--text`), + 'popoverBackgroundColor': getStyle(`--theme--card`), 'popoverBoxShadow': `0 0 0 1px ${getStyle( - `--theme_${mode}--overlay` - )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, + `--theme--overlay` + )}, 0 3px 6px ${getStyle(`--theme--overlay`)}`, 'inputBoxShadow': `box-shadow: ${getStyle( - `--theme_${mode}--primary` + `--theme--primary` )} 0px 0px 0px 1px inset, ${getStyle( - `--theme_${mode}--primary_hover` + `--theme--primary_hover` )} 0px 0px 0px 2px !important`, - 'inputBackgroundColor': getStyle(`--theme_${mode}--main`), - 'dividerColor': getStyle(`--theme_${mode}--table-border`), + 'inputBackgroundColor': getStyle(`--theme--main`), + 'dividerColor': getStyle(`--theme--table-border`), 'shadowOpacity': 0.2, }); diff --git a/mods/core/css/dark.css b/mods/core/css/dark.css index edea597..cf0c7a3 100644 --- a/mods/core/css/dark.css +++ b/mods/core/css/dark.css @@ -9,294 +9,295 @@ /** general ui **/ -.notion-dark-theme [style*='background: rgb(55, 60, 63)'], -.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'], -.notion-dark-theme [style*='background: rgb(120, 123, 123)'] { - background: var(--theme_dark--sidebar) !important; +.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, -.notion-dark-theme [style*='background: rgb(47, 52, 55)'], -.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { - background: var(--theme_dark--main) !important; +.dark [style*='background: rgb(47, 52, 55)'], +.dark [style*='background-color: rgb(47, 52, 55)'] { + background: var(--theme--main) !important; } -.notion-dark-theme +.dark .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], -.notion-dark-theme +.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_dark--preview_banner-height) !important; + height: var(--theme--preview_banner-height) !important; } -.notion-dark-theme +.dark [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], -.notion-dark-theme +.dark [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] img { - height: var(--theme_dark--page_banner-height) !important; + height: var(--theme--page_banner-height) !important; } /** databases **/ -.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { - background: var(--theme_dark--card) !important; +.dark [style*='background: rgb(63, 68, 71)'] { + background: var(--theme--card) !important; } -.notion-dark-theme +.dark .notion-page-content .notion-page-block.notion-collection-item [style*='background: rgba(255, 255, 255, 0.05)'] { - background: var(--theme_dark--gallery) !important; + background: var(--theme--gallery) !important; } -.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { - box-shadow: var(--theme_dark--main) -3px 0px 0px !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; } -.notion-dark-theme + +.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_dark--main) -3px 0px 0px, - var(--theme_dark--table-border) 0px 1px 0px !important; + box-shadow: var(--theme--main) -3px 0px 0px, + var(--theme--table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { - border-top: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-top: 1px solid rgba(255, 255, 255,'] { + border-top: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { - box-shadow: var(--theme_dark--table-border) -1px 0px 0px !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { + box-shadow: var(--theme--table-border) -1px 0px 0px !important; } -.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { - border-bottom: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { + border-bottom: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark--table-border) 0px 1px 0px !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme--table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] { - border-right: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-right: 1px solid rgba(255, 255, 255,'] { + border-right: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { - box-shadow: var(--theme_dark--table-border) 0px -1px 0px !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { + box-shadow: var(--theme--table-border) 0px -1px 0px !important; } -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] { - border-left: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-left: 1px solid rgba(255, 255, 255,'] { + border-left: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { - box-shadow: var(--theme_dark--table-border) 0px 1px 0px inset !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; } -.notion-dark-theme [style*='background: rgb(71, 76, 80)'], -.notion-dark-theme [style*='background: rgb(80, 85, 88)'], -.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { - background: var(--theme_dark--interactive_hover) !important; - box-shadow: 0 0 0 0.5px var(--theme_dark--interactive_hover-border); +.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); } /** ui colours **/ -.notion-dark-theme ::selection, -.notion-dark-theme +.dark ::selection, +.dark [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), -.notion-dark-theme +.dark [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { - background: var(--theme_dark--selected) !important; + background: var(--theme--selected) !important; } -.notion-dark-theme [style*='color: rgb(46, 170, 220)'] { - color: var(--theme_dark--primary) !important; +.dark [style*='color: rgb(46, 170, 220)'] { + color: var(--theme--primary) !important; } -.notion-dark-theme [style*='fill: rgb(46, 170, 220)'] { - fill: var(--theme_dark--primary) !important; +.dark [style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme--primary) !important; } -.notion-dark-theme [style*='background: rgb(46, 170, 220)'], -.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { - background: var(--theme_dark--primary) !important; +.dark [style*='background: rgb(46, 170, 220)'], +.dark [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme--primary) !important; } -.notion-dark-theme - [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { - box-shadow: var(--theme_dark--primary) 0px 0px 0px 2px inset !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; } -.notion-dark-theme .notion-focusable:focus-within { - box-shadow: var(--theme_dark--primary) 0px 0px 0px 1px inset, - var(--theme_dark--primary_hover) 0px 0px 0px 2px !important; +.dark .notion-focusable:focus-within { + box-shadow: var(--theme--primary) 0px 0px 0px 1px inset, + var(--theme--primary_hover) 0px 0px 0px 2px !important; } -.notion-dark-theme [style*='background: rgb(6, 156, 205)'] { - background: var(--theme_dark--primary_hover) !important; +.dark [style*='background: rgb(6, 156, 205)'] { + background: var(--theme--primary_hover) !important; } -.notion-dark-theme [style*='background: rgb(0, 141, 190)'] { - background: var(--theme_dark--primary_click) !important; +.dark [style*='background: rgb(0, 141, 190)'] { + background: var(--theme--primary_click) !important; } -.notion-dark-theme +.dark .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, -.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { - background: var(--theme_dark--primary_indicator) !important; +.dark [style*='background: rgb(235, 87, 87)'] { + background: var(--theme--primary_indicator) !important; } -.notion-dark-theme +.dark [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { - color: var(--theme_dark--danger_text) !important; - border: 1px solid var(--theme_dark--danger_border) !important; + color: var(--theme--danger_text) !important; + border: 1px solid var(--theme--danger_border) !important; } /* content colours */ -.notion-dark-theme, -.notion-dark-theme .notion-page-content [style*='color: inherit;'], -.notion-dark-theme .notion-frame .notion-page-block, -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.7)'] { - color: var(--theme_dark--text) !important; +.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; } -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { - color: var(--theme_dark--text_ui) !important; +.dark [style*='color: rgba(255, 255, 255, 0.6)'] { + color: var(--theme--text_ui) !important; } -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { - color: var(--theme_dark--text_ui_info) !important; +.dark [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme--text_ui_info) !important; } -.notion-dark-theme [style*='fill: rgb(202, 204, 206)'] { - fill: var(--theme_dark--text) !important; +.dark [style*='fill: rgb(202, 204, 206)'] { + fill: var(--theme--text) !important; } -.notion-dark-theme [style*='fill: rgba(202, 204, 206,'] { - fill: var(--theme_dark--text_ui) !important; +.dark [style*='fill: rgba(202, 204, 206,'] { + fill: var(--theme--text_ui) !important; } -.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { - color: var(--theme_dark--text_gray) !important; +.dark [style*='color:rgba(151,154,155,0.95)'] { + color: var(--theme--text_gray) !important; } -.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], -.notion-dark-theme [style*='background:rgb(69,75,78)'] { - background: var(--theme_dark--bg_gray) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(151, 154, 155, 0.5)'], +.dark [style*='background:rgb(69,75,78)'] { + background: var(--theme--bg_gray) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(69, 75, 78)'] { - background: var(--theme_dark--line_gray) !important; +.dark [style*='background: rgb(69, 75, 78)'] { + background: var(--theme--line_gray) !important; } -.notion-dark-theme [style*='color:rgb(147,114,100)'] { - color: var(--theme_dark--text_brown) !important; +.dark [style*='color:rgb(147,114,100)'] { + color: var(--theme--text_brown) !important; } -.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], -.notion-dark-theme [style*='background:rgb(67,64,64)'] { - background: var(--theme_dark--bg_brown) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(147, 114, 100, 0.5)'], +.dark [style*='background:rgb(67,64,64)'] { + background: var(--theme--bg_brown) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(67, 64, 64)'] { - background: var(--theme_dark--line_brown) !important; +.dark [style*='background: rgb(67, 64, 64)'] { + background: var(--theme--line_brown) !important; } -.notion-dark-theme [style*='color:rgb(255,163,68)'] { - color: var(--theme_dark--text_orange) !important; +.dark [style*='color:rgb(255,163,68)'] { + color: var(--theme--text_orange) !important; } -.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], -.notion-dark-theme [style*='background:rgb(89,74,58)'] { - background: var(--theme_dark--bg_orange) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(255, 163, 68, 0.5)'], +.dark [style*='background:rgb(89,74,58)'] { + background: var(--theme--bg_orange) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(89, 74, 58)'] { - background: var(--theme_dark--line_orange) !important; +.dark [style*='background: rgb(89, 74, 58)'] { + background: var(--theme--line_orange) !important; } -.notion-dark-theme [style*='color:rgb(255,220,73)'] { - color: var(--theme_dark--text_yellow) !important; +.dark [style*='color:rgb(255,220,73)'] { + color: var(--theme--text_yellow) !important; } -.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], -.notion-dark-theme [style*='background:rgb(89,86,59)'] { - background: var(--theme_dark--bg_yellow) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(255, 220, 73, 0.5)'], +.dark [style*='background:rgb(89,86,59)'] { + background: var(--theme--bg_yellow) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(89, 86, 59)'] { - background: var(--theme_dark--line_yellow) !important; +.dark [style*='background: rgb(89, 86, 59)'] { + background: var(--theme--line_yellow) !important; } -.notion-dark-theme [style*='color:rgb(77,171,154)'] { - color: var(--theme_dark--text_green) !important; +.dark [style*='color:rgb(77,171,154)'] { + color: var(--theme--text_green) !important; } -.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], -.notion-dark-theme [style*='background:rgb(53,76,75)'] { - background: var(--theme_dark--bg_green) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(77, 171, 154, 0.5)'], +.dark [style*='background:rgb(53,76,75)'] { + background: var(--theme--bg_green) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(53, 76, 75)'] { - background: var(--theme_dark--line_green) !important; +.dark [style*='background: rgb(53, 76, 75)'] { + background: var(--theme--line_green) !important; } -.notion-dark-theme [style*='color:rgb(82,156,202)'] { - color: var(--theme_dark--text_blue) !important; +.dark [style*='color:rgb(82,156,202)'] { + color: var(--theme--text_blue) !important; } -.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], -.notion-dark-theme [style*='background:rgb(54,73,84)'] { - background: var(--theme_dark--bg_blue) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(82, 156, 202, 0.5)'], +.dark [style*='background:rgb(54,73,84)'] { + background: var(--theme--bg_blue) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(54, 73, 84)'] { - background: var(--theme_dark--line_blue) !important; +.dark [style*='background: rgb(54, 73, 84)'] { + background: var(--theme--line_blue) !important; } -.notion-dark-theme [style*='color:rgb(154,109,215)'] { - color: var(--theme_dark--text_purple) !important; +.dark [style*='color:rgb(154,109,215)'] { + color: var(--theme--text_purple) !important; } -.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], -.notion-dark-theme [style*='background:rgb(68,63,87)'] { - background: var(--theme_dark--bg_purple) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(154, 109, 215, 0.5)'], +.dark [style*='background:rgb(68,63,87)'] { + background: var(--theme--bg_purple) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(68, 63, 87)'] { - background: var(--theme_dark--line_purple) !important; +.dark [style*='background: rgb(68, 63, 87)'] { + background: var(--theme--line_purple) !important; } -.notion-dark-theme [style*='color:rgb(226,85,161)'] { - color: var(--theme_dark--text_pink) !important; +.dark [style*='color:rgb(226,85,161)'] { + color: var(--theme--text_pink) !important; } -.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], -.notion-dark-theme [style*='background:rgb(83,59,76)'] { - background: var(--theme_dark--bg_pink) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(226, 85, 161, 0.5)'], +.dark [style*='background:rgb(83,59,76)'] { + background: var(--theme--bg_pink) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(83, 59, 76)'] { - background: var(--theme_dark--line_pink) !important; +.dark [style*='background: rgb(83, 59, 76)'] { + background: var(--theme--line_pink) !important; } -.notion-dark-theme [style*='color:rgb(255,115,105)'] { - color: var(--theme_dark--text_red) !important; +.dark [style*='color:rgb(255,115,105)'] { + color: var(--theme--text_red) !important; } -.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], -.notion-dark-theme [style*='background:rgb(89,65,65)'] { - background: var(--theme_dark--bg_red) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(255, 115, 105, 0.5);'], +.dark [style*='background:rgb(89,65,65)'] { + background: var(--theme--bg_red) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(89, 65, 65)'] { - background: var(--theme_dark--line_red) !important; +.dark [style*='background: rgb(89, 65, 65)'] { + background: var(--theme--line_red) !important; } -.notion-dark-theme +.dark [style*='background: rgb(69, 75, 78)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(67, 64, 64)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(89, 74, 58)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(89, 86, 59)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(53, 76, 75)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(54, 73, 84)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(68, 63, 87)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(83, 59, 76)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(89, 65, 65)'] [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--line_text) !important; + color: var(--theme--line_text) !important; } /* code */ -.notion-dark-theme [style*='color:#EB5757'] { - color: var(--theme_dark--code_inline-text) !important; - background: var(--theme_dark--code_inline-background) !important; +.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 index b72ab69..0fdf6d6 100644 --- a/mods/core/css/light.css +++ b/mods/core/css/light.css @@ -9,302 +9,315 @@ /** general ui **/ -.notion-light-theme [style*='background: rgb(247, 246, 243)'], -.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'], -.notion-light-theme [style*='background: rgb(223, 223, 222)'] { - background: var(--theme_light--sidebar) !important; +.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.light, -.notion-light-theme [style*='background: white'], -.notion-light-theme [style*='background-color: white'], -.notion-light-theme [style*='background: rgba(206, 205, 202, 0.5)'] { - background: var(--theme_light--main) !important; +.notion-body:not(.dark), +.notion-body:not(.dark) [style*='background: white'], +.notion-body:not(.dark) [style*='background-color: white'] { + background: var(--theme--main) !important; } -.notion-light-theme [style*='background: rgba(15, 15, 15, 0.6)'] { - background: var(--theme_light--overlay) !important; +.notion-body:not(.dark) [style*='background: rgba(15, 15, 15, 0.6)'] { + background: var(--theme--overlay) !important; } -.notion-light-theme +.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-light-theme +.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_light--preview_banner-height) !important; + height: var(--theme--preview_banner-height) !important; } -.notion-light-theme +.notion-body:not(.dark) [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], -.notion-light-theme +.notion-body:not(.dark) [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] img { - height: var(--theme_light--page_banner-height) !important; + height: var(--theme--page_banner-height) !important; } /** databases **/ -.notion-light-theme [style*='background: rgb(247, 246, 243)'] { - background: var(--theme_light--card) !important; +.notion-body:not(.dark) + .notion-scroller.horizontal.vertical + .notion-selectable + > a[style*='background: white'], +.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'] { + background: var(--theme--card) !important; } -.notion-light-theme +.notion-body:not(.dark) .notion-page-content .notion-page-block.notion-collection-item [style*='background: rgba(55, 53, 47, 0.024)'] { - background: var(--theme_light--gallery) !important; + background: var(--theme--gallery) !important; } -.notion-light-theme [style*='box-shadow: white -3px 0px 0px'] { - box-shadow: var(--theme_light--main) -3px 0px 0px !important; +.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] { + box-shadow: var(--theme--main) -3px 0px 0px !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'] { - box-shadow: var(--theme_light--main) -3px 0px 0px, - var(--theme_light--table-border) 0px 1px 0px !important; + box-shadow: var(--theme--main) -3px 0px 0px, + var(--theme--table-border) 0px 1px 0px !important; } -.notion-light-theme [style*='border-top: 1px solid rgba(55, 53, 47,'] { - border-top: 1px solid var(--theme_light--table-border) !important; +.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] { + border-top: 1px solid var(--theme--table-border) !important; } -.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'] { - box-shadow: var(--theme_light--table-border) -1px 0px 0px !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-light-theme [style*='border-bottom: 1px solid rgba(55, 53, 47,'] { - border-bottom: 1px solid var(--theme_light--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-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] { - box-shadow: var(--theme_light--table-border) 0px 1px 0px !important; +.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] { + border-bottom: 1px solid var(--theme--table-border) !important; } -.notion-light-theme [style*='border-right: 1px solid rgba(55, 53, 47,'] { - border-right: 1px solid var(--theme_light--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-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] { - box-shadow: var(--theme_light--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-light-theme [style*='border-left: 1px solid rgba(55, 53, 47,'] { - border-left: 1px solid var(--theme_light--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-light-theme +.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_light--table-border) 0px 1px 0px inset !important; + box-shadow: var(--theme--table-border) 0px 1px 0px inset !important; } -.notion-light-theme [style*='background: rgba(55, 53, 47,'], -.notion-light-theme [style*='background: rgb(239, 239, 238)'] { - background: var(--theme_light--interactive_hover) !important; - box-shadow: 0 0 0 0.5px var(--theme_light--interactive_hover-border); +.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); } /** ui colours **/ -.notion-light-theme ::selection, -.notion-light-theme +.notion-body:not(.dark) ::selection, +.notion-body:not(.dark) [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), -.notion-light-theme +.notion-body:not(.dark) [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { - background: var(--theme_light--selected) !important; + background: var(--theme--selected) !important; } -.notion-light-theme [style*='color: rgb(46, 170, 220)'] { - color: var(--theme_light--primary) !important; +.notion-body:not(.dark) [style*='color: rgb(46, 170, 220)'] { + color: var(--theme--primary) !important; } -.notion-light-theme [style*='fill: rgb(46, 170, 220)'] { - fill: var(--theme_light--primary) !important; +.notion-body:not(.dark) [style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme--primary) !important; } -.notion-light-theme [style*='background: rgb(46, 170, 220)'], -.notion-light-theme [style*='background-color: rgb(46, 170, 220)'] { - background: var(--theme_light--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-light-theme +.notion-body:not(.dark) [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { - box-shadow: var(--theme_light--primary) 0px 0px 0px 2px inset !important; + box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important; } -.notion-light-theme .notion-focusable:focus-within { - box-shadow: var(--theme_light--primary) 0px 0px 0px 1px inset, - var(--theme_light--primary_hover) 0px 0px 0px 2px !important; +.notion-body:not(.dark) .notion-focusable:focus-within { + box-shadow: var(--theme--primary) 0px 0px 0px 1px inset, + var(--theme--primary_hover) 0px 0px 0px 2px !important; } -.notion-light-theme [style*='background: rgb(6, 156, 205)'] { - background: var(--theme_light--primary_hover) !important; +.notion-body:not(.dark) [style*='background: rgb(6, 156, 205)'] { + background: var(--theme--primary_hover) !important; } -.notion-light-theme [style*='background: rgb(0, 141, 190)'] { - background: var(--theme_light--primary_click) !important; +.notion-body:not(.dark) [style*='background: rgb(0, 141, 190)'] { + background: var(--theme--primary_click) !important; } -.notion-light-theme +.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-light-theme [style*='background: rgb(235, 87, 87)'] { - background: var(--theme_light--primary_indicator) !important; +.notion-body:not(.dark) [style*='background: rgb(235, 87, 87)'] { + background: var(--theme--primary_indicator) !important; } -.notion-light-theme .notion-to_do-block .checkboxSquare { - background: var(--theme_light--option-background) !important; +.notion-body:not(.dark) .notion-to_do-block .checkboxSquare { + background: var(--theme--option-background) !important; } -.notion-light-theme .notion-to_do-block .checkboxSquare path { - fill: var(--theme_light--option-color) !important; +.notion-body:not(.dark) .notion-to_do-block .checkboxSquare path { + fill: var(--theme--option-color) !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { - color: var(--theme_light--danger_text) !important; - border: 1px solid var(--theme_light--danger_border) !important; + color: var(--theme--danger_text) !important; + border: 1px solid var(--theme--danger_border) !important; } /* content colours */ -.notion-light-theme, -.notion-light-theme .notion-page-content [style*='color: inherit;'], -.notion-light-theme .notion-frame .notion-page-block, -.notion-light-theme [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--text) !important; +.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-light-theme [style*='color: rgba(55, 53, 47, 0.6)'], -.notion-light-theme [style*='color: rgba(25, 23, 17, 0.6)'] { - color: var(--theme_light--text_ui) !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-light-theme [style*='color: rgba(55, 53, 47, 0.4)'] { - color: var(--theme_light--text_ui_info) !important; +.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] { + color: var(--theme--text_ui_info) !important; } -.notion-light-theme [style*='fill: rgba(55, 53, 47,'] { - fill: var(--theme_light--text_ui) !important; +.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] { + fill: var(--theme--text_ui) !important; } -.notion-light-theme [style*='fill: rgba(55, 53, 47, 0.8)'] { - fill: var(--theme_light--text) !important; +.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'] { + fill: var(--theme--text) !important; } -.notion-light-theme [style*='color:rgb(155,154,151)'] { - color: var(--theme_light--text_gray) !important; +.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] { + color: var(--theme--text_gray) !important; } -.notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(235,236,237)'] { - background: var(--theme_light--bg_gray) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { + background: var(--theme--bg_gray) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(235, 236, 237)'] { - background: var(--theme_light--line_gray) !important; +.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] { + background: var(--theme--line_gray) !important; } -.notion-light-theme [style*='color:rgb(100,71,58)'] { - color: var(--theme_light--text_brown) !important; +.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] { + color: var(--theme--text_brown) !important; } -.notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(233,229,227)'] { - background: var(--theme_light--bg_brown) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] { + background: var(--theme--bg_brown) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(233, 229, 227)'] { - background: var(--theme_light--line_brown) !important; +.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] { + background: var(--theme--line_brown) !important; } -.notion-light-theme [style*='color:rgb(217,115,13)'] { - color: var(--theme_light--text_orange) !important; +.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] { + color: var(--theme--text_orange) !important; } -.notion-light-theme [style*='background: rgba(245, 93, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(250,235,221)'] { - background: var(--theme_light--bg_orange) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] { + background: var(--theme--bg_orange) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(250, 235, 221)'] { - background: var(--theme_light--line_orange) !important; +.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] { + background: var(--theme--line_orange) !important; } -.notion-light-theme [style*='color:rgb(223,171,1)'] { - color: var(--theme_light--text_yellow) !important; +.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] { + color: var(--theme--text_yellow) !important; } -.notion-light-theme [style*='background: rgba(233, 168, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(251,243,219)'] { - background: var(--theme_light--bg_yellow) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] { + background: var(--theme--bg_yellow) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(251, 243, 219)'] { - background: var(--theme_light--line_yellow) !important; +.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] { + background: var(--theme--line_yellow) !important; } -.notion-light-theme [style*='color:rgb(15,123,108)'] { - color: var(--theme_light--text_green) !important; +.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] { + color: var(--theme--text_green) !important; } -.notion-light-theme [style*='background: rgba(0, 135, 107, 0.2)'], -.notion-light-theme [style*='background:rgb(221,237,234)'] { - background: var(--theme_light--bg_green) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] { + background: var(--theme--bg_green) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(221, 237, 234)'] { - background: var(--theme_light--line_green) !important; +.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] { + background: var(--theme--line_green) !important; } -.notion-light-theme [style*='color:rgb(11,110,153)'] { - color: var(--theme_light--text_blue) !important; +.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] { + color: var(--theme--text_blue) !important; } -.notion-light-theme [style*='background: rgba(0, 120, 223, 0.2)'], -.notion-light-theme [style*='background:rgb(221,235,241)'] { - background: var(--theme_light--bg_blue) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] { + background: var(--theme--bg_blue) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(221, 235, 241)'] { - background: var(--theme_light--line_blue) !important; +.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] { + background: var(--theme--line_blue) !important; } -.notion-light-theme [style*='color:rgb(105,64,165)'] { - color: var(--theme_light--text_purple) !important; +.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] { + color: var(--theme--text_purple) !important; } -.notion-light-theme [style*='background: rgba(103, 36, 222, 0.2)'], -.notion-light-theme [style*='background:rgb(234,228,242)'] { - background: var(--theme_light--bg_purple) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] { + background: var(--theme--bg_purple) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(234, 228, 242)'] { - background: var(--theme_light--line_purple) !important; +.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] { + background: var(--theme--line_purple) !important; } -.notion-light-theme [style*='color:rgb(173,26,114)'] { - color: var(--theme_light--text_pink) !important; +.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] { + color: var(--theme--text_pink) !important; } -.notion-light-theme [style*='background: rgba(221, 0, 129, 0.2)'], -.notion-light-theme [style*='background:rgb(244,223,235)'] { - background: var(--theme_light--bg_pink) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] { + background: var(--theme--bg_pink) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(244, 223, 235)'] { - background: var(--theme_light--line_pink) !important; +.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] { + background: var(--theme--line_pink) !important; } -.notion-light-theme [style*='color:rgb(224,62,62)'] { - color: var(--theme_light--text_red) !important; +.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] { + color: var(--theme--text_red) !important; } -.notion-light-theme [style*='background: rgba(255, 0, 26, 0.2)'], -.notion-light-theme [style*='background:rgb(251,228,228)'] { - background: var(--theme_light--bg_red) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] { + background: var(--theme--bg_red) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(251, 228, 228)'] { - background: var(--theme_light--line_red) !important; +.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] { + background: var(--theme--line_red) !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--line_text) !important; + color: var(--theme--line_text) !important; } /* code */ -.notion-light-theme [style*='color:#EB5757'] { - color: var(--theme_light--code_inline-text) !important; - background: var(--theme_light--code_inline-background) !important; +.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/menu.css b/mods/core/css/menu.css index bcd6713..1f62680 100644 --- a/mods/core/css/menu.css +++ b/mods/core/css/menu.css @@ -6,7 +6,6 @@ @import './buttons.css'; @import './scrollbars.css'; -@import './localised.css'; @keyframes spin { from { diff --git a/mods/core/css/titlebar.css b/mods/core/css/titlebar.css index 8f49bba..0fd160f 100644 --- a/mods/core/css/titlebar.css +++ b/mods/core/css/titlebar.css @@ -5,7 +5,7 @@ * under the MIT license */ -@import 'buttons.css'; +@import './buttons.css'; .frameless .notion-topbar { height: calc(var(--configured--dragarea_height, 10px) + 45px) !important; diff --git a/mods/core/css/variables.css b/mods/core/css/variables.css index 7854438..2747f9d 100644 --- a/mods/core/css/variables.css +++ b/mods/core/css/variables.css @@ -155,7 +155,7 @@ --theme_light--scrollbar-border: #cacac8; --theme_light--scrollbar_hover: #cacac8; - --theme_light--card: rgb(247, 246, 243); + --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); diff --git a/mods/core/css/variables.json b/mods/core/css/variables.json index da593b8..c1dc5c8 100644 --- a/mods/core/css/variables.json +++ b/mods/core/css/variables.json @@ -1,188 +1,95 @@ [ - "--theme_dark--main", - "--theme_dark--sidebar", - "--theme_dark--overlay", - "--theme_dark--dragarea", - "--theme_dark--preview-width", - "--theme_dark--preview-padding", - "--theme_dark--preview_banner-height", - "--theme_dark--page_banner-height", - "--theme_dark--font_sans", - "--theme_dark--font_serif", - "--theme_dark--font_mono", - "--theme_dark--font_code", - "--theme_dark--font_title-size", - "--theme_dark--font_heading1-size", - "--theme_dark--font_heading2-size", - "--theme_dark--font_heading3-size", - "--theme_dark--font_label-size", - "--theme_dark--font_body-size", - "--theme_dark--font_code-size", - "--theme_dark--font_sidebar-size", - "--theme_dark--scrollbar", - "--theme_dark--scrollbar-border", - "--theme_dark--scrollbar_hover", - "--theme_dark--card", - "--theme_dark--gallery", - "--theme_dark--table-border", - "--theme_dark--interactive_hover", - "--theme_dark--interactive_hover-border", - "--theme_dark--button_close", - "--theme_dark--button_close-fill", - "--theme_dark--selected", - "--theme_dark--primary", - "--theme_dark--primary_hover", - "--theme_dark--primary_click", - "--theme_dark--primary_indicator", - "--theme_dark--option-color", - "--theme_dark--option-background", - "--theme_dark--option_active-color", - "--theme_dark--option_active-background", - "--theme_dark--option_hover-color", - "--theme_dark--option_hover-background", - "--theme_dark--danger_text", - "--theme_dark--danger_border", - "--theme_dark--text", - "--theme_dark--text_ui", - "--theme_dark--text_ui_info", - "--theme_dark--text_gray", - "--theme_dark--text_brown", - "--theme_dark--text_orange", - "--theme_dark--text_yellow", - "--theme_dark--text_green", - "--theme_dark--text_blue", - "--theme_dark--text_purple", - "--theme_dark--text_pink", - "--theme_dark--text_red", - "--theme_dark--bg_text", - "--theme_dark--bg_gray", - "--theme_dark--bg_brown", - "--theme_dark--bg_orange", - "--theme_dark--bg_yellow", - "--theme_dark--bg_green", - "--theme_dark--bg_blue", - "--theme_dark--bg_purple", - "--theme_dark--bg_pink", - "--theme_dark--bg_red", - "--theme_dark--line_text", - "--theme_dark--line_gray", - "--theme_dark--line_brown", - "--theme_dark--line_orange", - "--theme_dark--line_yellow", - "--theme_dark--line_green", - "--theme_dark--line_blue", - "--theme_dark--line_purple", - "--theme_dark--line_pink", - "--theme_dark--line_red", - "--theme_dark--code_inline-text", - "--theme_dark--code_inline-background", - "--theme_dark--code_text", - "--theme_dark--code-background", - "--theme_dark--code_function", - "--theme_dark--code_keyword", - "--theme_dark--code_tag", - "--theme_dark--code_operator", - "--theme_dark--code_important", - "--theme_dark--code_property", - "--theme_dark--code_builtin", - "--theme_dark--code_attr-name", - "--theme_dark--code_comment", - "--theme_dark--code_punctuation", - "--theme_dark--code_doctype", - "--theme_dark--code_number", - "--theme_dark--code_string", - "--theme_dark--code_attr-value", - "--theme_light--main", - "--theme_light--sidebar", - "--theme_light--overlay", - "--theme_light--dragarea", - "--theme_light--preview-width", - "--theme_light--preview-padding", - "--theme_light--preview_banner-height", - "--theme_light--page_banner-height", - "--theme_light--font_sans", - "--theme_light--font_serif", - "--theme_light--font_mono", - "--theme_light--font_code", - "--theme_light--font_title-size", - "--theme_light--font_heading1-size", - "--theme_light--font_heading2-size", - "--theme_light--font_heading3-size", - "--theme_light--font_label-size", - "--theme_light--font_body-size", - "--theme_light--font_code-size", - "--theme_light--font_sidebar-size", - "--theme_light--scrollbar", - "--theme_light--scrollbar-border", - "--theme_light--scrollbar_hover", - "--theme_light--card", - "--theme_light--gallery", - "--theme_light--table-border", - "--theme_light--interactive_hover", - "--theme_light--interactive_hover-border", - "--theme_light--button_close", - "--theme_light--button_close-fill", - "--theme_light--selected", - "--theme_light--primary", - "--theme_light--primary_hover", - "--theme_light--primary_click", - "--theme_light--primary_indicator", - "--theme_light--option-color", - "--theme_light--option-background", - "--theme_light--option_hover-color", - "--theme_light--option_hover-background", - "--theme_light--option_active-color", - "--theme_light--option_active-background", - "--theme_light--danger_text", - "--theme_light--danger_border", - "--theme_light--text", - "--theme_light--text_ui", - "--theme_light--text_ui_info", - "--theme_light--text_gray", - "--theme_light--text_brown", - "--theme_light--text_orange", - "--theme_light--text_yellow", - "--theme_light--text_green", - "--theme_light--text_blue", - "--theme_light--text_purple", - "--theme_light--text_pink", - "--theme_light--text_red", - "--theme_light--bg_text", - "--theme_light--bg_gray", - "--theme_light--bg_brown", - "--theme_light--bg_orange", - "--theme_light--bg_yellow", - "--theme_light--bg_green", - "--theme_light--bg_blue", - "--theme_light--bg_purple", - "--theme_light--bg_pink", - "--theme_light--bg_red", - "--theme_light--line_text", - "--theme_light--line_gray", - "--theme_light--line_brown", - "--theme_light--line_orange", - "--theme_light--line_yellow", - "--theme_light--line_green", - "--theme_light--line_blue", - "--theme_light--line_purple", - "--theme_light--line_pink", - "--theme_light--line_red", - "--theme_light--code_inline-text", - "--theme_light--code_inline-background", - "--theme_light--code_text", - "--theme_light--code-background", - "--theme_light--code_function", - "--theme_light--code_keyword", - "--theme_light--code_tag", - "--theme_light--code_operator", - "--theme_light--code_important", - "--theme_light--code_property", - "--theme_light--code_builtin", - "--theme_light--code_attr-name", - "--theme_light--code_comment", - "--theme_light--code_punctuation", - "--theme_light--code_doctype", - "--theme_light--code_number", - "--theme_light--code_string", - "--theme_light--code_attr-value" + "--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_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/styles.css b/mods/core/styles.css index 428dadd..968415c 100644 --- a/mods/core/styles.css +++ b/mods/core/styles.css @@ -4,7 +4,7 @@ * under the MIT license */ -@import './css/variables.css'; +@import './css/localised.css'; @import './css/dark.css'; @import './css/light.css'; @import './css/shared.css'; diff --git a/mods/emoji-sets/mod.js b/mods/emoji-sets/mod.js index 120b563..966e916 100644 --- a/mods/emoji-sets/mod.js +++ b/mods/emoji-sets/mod.js @@ -41,6 +41,7 @@ module.exports = { hacks: { 'renderer/preload.js'(store, __exports) { document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; const observer = new MutationObserver((list, observer) => { document .querySelectorAll( diff --git a/mods/night-shift/mod.js b/mods/night-shift/mod.js new file mode 100644 index 0000000..02dfb4e --- /dev/null +++ b/mods/night-shift/mod.js @@ -0,0 +1,41 @@ +/* + * night shift + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: '9a71bbff-e87d-4a0b-8a2c-a93473113c30', + tags: ['extension', 'theme'], + name: 'night shift', + desc: + 'sync dark/light theme with the system (overrides normal theme setting)', + version: '0.1.0', + author: 'dragonwocky', + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const observer = new MutationObserver((list, observer) => { + const mode = window.matchMedia('(prefers-color-scheme: dark)') + .matches; + if ( + document.querySelector(`.notion-${mode ? 'light' : 'dark'}-theme`) + ) + document.querySelector( + '.notion-app-inner' + ).className = `notion-app-inner notion-${ + mode ? 'dark' : 'light' + }-theme`; + }); + observer.observe(document, { + childList: true, + subtree: true, + attributes: true, + }); + }); + }, + }, +};