From cf0d5162343d3279bb234e1dd8a8deddf9e95183 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sat, 15 Aug 2020 21:58:39 +1000
Subject: [PATCH] night shift extension
---
repo/core/client.js | 24 +--
repo/core/css/dark.css | 347 ++++++++++++++++-----------------
repo/core/css/light.css | 363 ++++++++++++++++++-----------------
repo/core/css/menu.css | 1 -
repo/core/css/titlebar.css | 2 +-
repo/core/css/variables.css | 2 +-
repo/core/css/variables.json | 279 +++++++++------------------
repo/core/styles.css | 2 +-
repo/emoji-sets/mod.js | 1 +
repo/night-shift/mod.js | 41 ++++
10 files changed, 513 insertions(+), 549 deletions(-)
create mode 100644 repo/night-shift/mod.js
diff --git a/repo/core/client.js b/repo/core/client.js
index b8d92c5..6631d17 100644
--- a/repo/core/client.js
+++ b/repo/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/repo/core/css/dark.css b/repo/core/css/dark.css
index edea597..cf0c7a3 100644
--- a/repo/core/css/dark.css
+++ b/repo/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/repo/core/css/light.css b/repo/core/css/light.css
index b72ab69..0fdf6d6 100644
--- a/repo/core/css/light.css
+++ b/repo/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/repo/core/css/menu.css b/repo/core/css/menu.css
index bcd6713..1f62680 100644
--- a/repo/core/css/menu.css
+++ b/repo/core/css/menu.css
@@ -6,7 +6,6 @@
@import './buttons.css';
@import './scrollbars.css';
-@import './localised.css';
@keyframes spin {
from {
diff --git a/repo/core/css/titlebar.css b/repo/core/css/titlebar.css
index 8f49bba..0fd160f 100644
--- a/repo/core/css/titlebar.css
+++ b/repo/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/repo/core/css/variables.css b/repo/core/css/variables.css
index 7854438..2747f9d 100644
--- a/repo/core/css/variables.css
+++ b/repo/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/repo/core/css/variables.json b/repo/core/css/variables.json
index da593b8..c1dc5c8 100644
--- a/repo/core/css/variables.json
+++ b/repo/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/repo/core/styles.css b/repo/core/styles.css
index 428dadd..968415c 100644
--- a/repo/core/styles.css
+++ b/repo/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/repo/emoji-sets/mod.js b/repo/emoji-sets/mod.js
index 120b563..966e916 100644
--- a/repo/emoji-sets/mod.js
+++ b/repo/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/repo/night-shift/mod.js b/repo/night-shift/mod.js
new file mode 100644
index 0000000..02dfb4e
--- /dev/null
+++ b/repo/night-shift/mod.js
@@ -0,0 +1,41 @@
+/*
+ * night shift
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (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,
+ });
+ });
+ },
+ },
+};