diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css index 4647cbe..224e411 100644 --- a/mods/core/css/theme.css +++ b/mods/core/css/theme.css @@ -149,6 +149,15 @@ .notion-selectable.notion-quote-block div[spellcheck="true"] { font-family: var(--theme--font_quote) !important; } +[placeholder='Heading 1'] { + font-family: var(--theme--font_heading1) !important; +} +[placeholder='Heading 2'] { + font-family: var(--theme--font_heading2) !important; +} +[placeholder='Heading 3'] { + font-family: var(--theme--font_heading3) !important; +} .notion-frame .notion-page-block div[placeholder='Untitled'], .notion-overlay-container .notion-page-block div[placeholder='Untitled'] { font-size: calc( diff --git a/mods/core/variables.css b/mods/core/variables.css index ac48cdb..612e7bd 100644 --- a/mods/core/variables.css +++ b/mods/core/variables.css @@ -37,6 +37,9 @@ --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; --theme_dark--font_quote: var(--theme_dark--font_sans); + --theme_dark--font_heading1: var(--theme_dark--font_sans); + --theme_dark--font_heading2: var(--theme_dark--font_sans); + --theme_dark--font_heading3: var(--theme_dark--font_sans); --theme_dark--font_title-size: 40px; --theme_dark--font_heading1-size: 1.875em; @@ -222,6 +225,9 @@ --theme_light--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; --theme_light--font_quote: var(--theme_light--font_sans); + --theme_light--font_heading1: var(--theme_light--font_sans); + --theme_light--font_heading2: var(--theme_light--font_sans); + --theme_light--font_heading3: var(--theme_light--font_sans); --theme_light--font_title-size: 40px; --theme_light--font_heading1-size: 1.875em; @@ -399,7 +405,10 @@ --theme--font_serif: var(--theme_dark--font_serif); --theme--font_mono: var(--theme_dark--font_mono); --theme--font_code: var(--theme_dark--font_code); - --theme--font_quote: var(--theme_dark--font_sans); + --theme--font_quote: var(--theme_dark--font_quote); + --theme--font_heading1: var(--theme_dark--font_heading1); + --theme--font_heading2: var(--theme_dark--font_heading2); + --theme--font_heading3: var(--theme_dark--font_heading3); --theme--font_title-size: var(--theme_dark--font_title-size); --theme--font_heading1-size: var(--theme_dark--font_heading1-size); --theme--font_heading2-size: var(--theme_dark--font_heading2-size); @@ -566,7 +575,10 @@ --theme--font_serif: var(--theme_light--font_serif); --theme--font_mono: var(--theme_light--font_mono); --theme--font_code: var(--theme_light--font_code); - --theme--font_quote: var(--theme_light--font_sans); + --theme--font_quote: var(--theme_light--font_quote); + --theme--font_heading1: var(--theme_light--font_heading1); + --theme--font_heading2: var(--theme_light--font_heading2); + --theme--font_heading3: var(--theme_light--font_heading3); --theme--font_title-size: var(--theme_light--font_title-size); --theme--font_heading1-size: var(--theme_light--font_heading1-size); --theme--font_heading2-size: var(--theme_light--font_heading2-size); diff --git a/mods/font-chooser/mod.js b/mods/font-chooser/mod.js index 9334a93..de7f799 100644 --- a/mods/font-chooser/mod.js +++ b/mods/font-chooser/mod.js @@ -14,7 +14,7 @@ module.exports = { name: 'font chooser', desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.

make sure the fonts you type are installed on your device.', - version: '0.2.1', + version: '0.3.1', author: 'torchatlas', options: [ { @@ -47,6 +47,12 @@ module.exports = { type: 'input', value: '', }, + { + key: 'headings', + label: 'headings:', + type: 'input', + value: '', + }, ], hacks: { 'renderer/preload.js'(store, __exports) { @@ -54,11 +60,20 @@ module.exports = { async function enhance() { if (!document.querySelector('.notion-app-inner')) return; clearInterval(attempt_interval); - for (let style of ['sans', 'serif', 'mono', 'code', 'quote']) { + for (let style of ['sans', 'serif', 'mono', 'code', 'quote', 'headings']) { if (!store()[style]) continue; - document - .querySelector('.notion-app-inner') - .style.setProperty(`--theme--font_${style}`, store()[style]); + + if (style == 'headings') { + for (let heading of ['heading1', 'heading2', 'heading3']) { + document + .querySelector('.notion-app-inner') + .style.setProperty(`--theme--font_${heading}`, store()[style]); + } + } else { + document + .querySelector('.notion-app-inner') + .style.setProperty(`--theme--font_${style}`, store()[style]); + } } } },