mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 05:29:02 +00:00
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
/**
|
|
* notion-enhancer: theming
|
|
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
export default async function ({ web, registry, storage, electron }, db) {
|
|
const enabledThemes = await registry.list(
|
|
async (m) => (await registry.enabled(m.id)) && m.tags.includes('theme')
|
|
);
|
|
if (enabledThemes.length || (await db.get(['force_load']))) {
|
|
// only override colors if theme is enable for perf
|
|
web.loadStylesheet('repo/theming/theme.css');
|
|
web.loadStylesheet('repo/theming/colors.css');
|
|
}
|
|
|
|
const updateTheme = async () => {
|
|
const isDark =
|
|
document.querySelector('.notion-dark-theme') ||
|
|
document.querySelector('.notion-body.dark'),
|
|
isLight = document.querySelector('.notion-light-theme'),
|
|
mode = isDark ? 'dark' : isLight ? 'light' : '';
|
|
if (!mode) return;
|
|
await storage.set(['theme'], mode);
|
|
document.documentElement.classList.add(mode);
|
|
document.documentElement.classList.remove(mode === 'light' ? 'dark' : 'light');
|
|
electron.sendMessage('update-theme');
|
|
const searchThemeVars = [
|
|
'bg',
|
|
'text',
|
|
'icon',
|
|
'icon_secondary',
|
|
'accent_blue',
|
|
'accent_blue-text',
|
|
'accent_blue-hover',
|
|
'accent_blue-active',
|
|
'ui_shadow',
|
|
'ui_divider',
|
|
'ui_input',
|
|
'ui_interactive-hover',
|
|
'ui_interactive-active',
|
|
].map((key) => [
|
|
key,
|
|
window.getComputedStyle(document.documentElement).getPropertyValue(`--theme--${key}`),
|
|
]);
|
|
electron.sendMessage('set-search-theme', searchThemeVars);
|
|
};
|
|
web.addDocumentObserver((mutation) => {
|
|
const potentialThemeChange = mutation.target.matches?.('html, body, .notion-app-inner');
|
|
if (potentialThemeChange && document.hasFocus()) updateTheme();
|
|
});
|
|
updateTheme();
|
|
document.addEventListener('visibilitychange', updateTheme);
|
|
document.addEventListener('focus', updateTheme);
|
|
}
|