dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 13:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
ee69d44796
notion-enhancer/scripts/generate-theme-css.mjs
dragonwocky ee69d44796
feat: script generation of theme css 
- foregrounds
- coloured backgrounds
- accents
- scrollbar
- inline code & code blocks

still todo:
- fonts
- base backgrounds
- borders and outlines
- tooltips
- cards
- buttons
- etc.
2022-12-23 00:26:40 +11:00

439 lines
18 KiB
JavaScript
Raw Blame History

/**
* notion-enhancer
* (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
// paste this in the devtools console at to generate theme css
// at https://www.notion.so/9390e51f458940a5a339dc4b8fdea2fb
// the variables at the top of the file should be placed in core/variables.css
// as a reference for theme developers, but not loaded into notion.
// the css body below should be passed through https://css.github.io/csso/csso.html
// and then saved to core/theme.css. repeat this process for both light and dark modes
const darkMode = document.body.classList.contains("dark"),
modeSelector = darkMode ? ".dark" : ":not(.dark)";
let cssRoot = "",
cssBody = "";
const generateQuerySelector = (el) => {
if (el.tagName === "HTML") return "html";
const parentSelector = generateQuerySelector(el.parentElement);
if (el.id) return `${parentSelector} > #${el.id}`;
const classes = [...el.classList].map((cls) => `.${cls}`).join(""),
style = el.getAttribute("style")
? `[style="${el.getAttribute("style").replace(/"/g, "'")}"]`
: "",
index = `:nth-child(${[...el.parentElement.children].indexOf(el) + 1})`;
return `${parentSelector} > ${classes || style || index}`;
},
getComputedPropertyValue = (el, prop) => {
const styles = window.getComputedStyle(el),
value = styles.getPropertyValue(prop);
return value;
};
const generateForegroundStyles = () => {
const rgbPrimary = darkMode ? "rgb(255, 255, 255)" : "rgb(55, 53, 47)",
defaultPrimary = darkMode ? "rgba(255, 255, 255, 0.81)" : "rgb(55, 53, 47)",
defaultSecondary = darkMode
? "rgb(155, 155, 155)"
: "rgba(25, 23, 17, 0.6)",
fgPrimary = new Set([rgbPrimary]),
fgSecondary = new Set([defaultSecondary]);
for (const el of document.querySelectorAll(
'[style^="color"], [style*=" color"], [style*=";color"], [style*="fill"]'
)) {
const colorVal =
el
.getAttribute("style")
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)?.[1] ??
getComputedPropertyValue(el, "color"),
fillVal =
el
.getAttribute("style")
.match(/(?:^|(?:;\s*))fill:\s*([^;]+);?/)?.[1] ??
getComputedPropertyValue(el, "fill");
if (colorVal.startsWith(`rgba(${rgbPrimary.slice(4, -1)}`)) {
const alpha = +colorVal.slice(5, -1).split(", ")[3];
if (alpha > 0.8) {
fgPrimary.add(colorVal);
} else fgSecondary.add(colorVal);
}
if (fillVal.startsWith(`rgba(${rgbPrimary.slice(4, -1)}`)) {
const alpha = +fillVal.slice(5, -1).split(", ")[3];
if (alpha > 0.8) {
fgPrimary.add(fillVal);
} else fgSecondary.add(fillVal);
}
if (
// light mode tags have coloured text,
// replace with primary text for consistency
!darkMode &&
el.matches(
`[style*="height: 20px; border-radius: 3px; padding-left: 6px;"][style*="background:"],
.notion-collection_view-block [style*="height: 14px; border-radius: 3px; padding-left: 6px;"],
.notion-timeline-item-properties [style*="height: 18px; border-radius: 3px; padding-left: 8px;"]`
)
) {
fgPrimary.add(colorVal);
}
}
cssRoot += `
--theme--fg-primary: ${defaultPrimary};
--theme--fg-secondary: ${defaultSecondary};
`;
const mapFgToSelectors = (colorVal) =>
`.notion-body${modeSelector} [style^="color:${colorVal}"],
.notion-body${modeSelector} [style^="color: ${colorVal}"],
.notion-body${modeSelector} [style*=" color:${colorVal}"],
.notion-body${modeSelector} [style*=" color: ${colorVal}"],
.notion-body${modeSelector} [style*=";color:${colorVal}"],
.notion-body${modeSelector} [style*=";color: ${colorVal}"],
.notion-body${modeSelector} [style*="fill:${colorVal}"],
.notion-body${modeSelector} [style*="fill: ${colorVal}"]`;
cssBody += `
${[...fgPrimary].map(mapFgToSelectors).join(", ")} {
color: var(--theme--fg-primary, ${defaultPrimary}) !important;
caret-color: var(--theme--fg-primary, ${defaultPrimary}) !important;
-webkit-text-fill-color: currentColor !important;
fill: var(--theme--fg-primary, ${defaultPrimary}) !important;
}
${[...fgSecondary].map(mapFgToSelectors).join(", ")} {
color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
caret-color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
-webkit-text-fill-color: currentColor !important;
fill: var(--theme--fg-secondary, ${defaultSecondary}) !important;
}
`;
const refs = {};
// inline text color
for (const el of document.querySelectorAll(
'.notion-selectable .notion-enable-hover[style*="color:"][style*="fill:"]'
)) {
if (!el.innerText || el.innerText.includes(" ")) continue;
const cssVar = `--theme--fg-${el.innerText}`,
colorVal = getComputedPropertyValue(el, "color"),
styleAttr = el.getAttribute("style");
cssRoot += `${cssVar}: ${colorVal};`;
refs[`${cssVar}, ${colorVal}`] ??= [];
refs[`${cssVar}, ${colorVal}`].push(
`.notion-body${modeSelector} .notion-enable-hover[style*="${styleAttr}"]`
);
}
// block text color
const targetSelector =
'.notion-text-block > [style*="color:"][style*="fill:"]';
for (const el of document.querySelectorAll(targetSelector)) {
if (!el.innerText || el.innerText.includes(" ")) continue;
const cssVar = `--theme--fg-${el.innerText}`,
colorVal = getComputedPropertyValue(el, "color"),
styleAttr = el
.getAttribute("style")
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)[1];
refs[`${cssVar}, ${colorVal}`] ??= [];
refs[`${cssVar}, ${colorVal}`].push(
`.notion-body${modeSelector} ${targetSelector}[style*="${styleAttr}"]`
);
}
// board text
for (const parent of document.querySelectorAll(
".notion-board-view .notion-board-group"
)) {
// get color name from card
const card = parent.querySelector('a[style*="background"]'),
innerText = card.innerText.replace("Drag image to reposition\n", "");
if (!innerText || innerText.includes(" ")) continue;
const el = parent.querySelector('[style*="height: 32px"]'),
colorVal = getComputedPropertyValue(el, "color"),
cssVar = `--theme--fg-${
// --fg-light_gray doesn't exist
innerText === "light_gray" ? "secondary" : innerText
}`,
styleAttr = parent
.getAttribute("style")
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
refs[`${cssVar}, ${colorVal}`] ??= [];
refs[`${cssVar}, ${colorVal}`].push(
`.notion-body${modeSelector} .notion-board-view :is(
.notion-board-group[style*="${styleAttr}"] [style*="height: 32px"],
[style*="${styleAttr}"] > [style*="color"]:nth-child(2),
[style*="${styleAttr}"] > div > svg
)`
);
}
for (const varRef in refs) {
cssBody += `${refs[varRef].join(",")} {
color: var(${varRef}) !important;
fill: var(${varRef}) !important;
}`;
}
};
generateForegroundStyles();
const generateBackgroundStyles = () => {
for (const el of document.querySelectorAll(
'.notion-collection_view-block [style*="height: 20px; border-radius: 3px; padding-left: 6px;"]'
)) {
if (!el.innerText || el.innerText.includes(" ")) continue;
const cssVar = `--theme--bg-${el.innerText}`,
colorVal = getComputedPropertyValue(el, "background-color");
cssRoot += `${cssVar}: ${colorVal};`;
}
const refs = {};
for (const targetSelector of [
// inline highlight
'.notion-selectable .notion-enable-hover[style^="background:"]',
// block highlight
'.notion-text-block > [style*="background:"]',
// callout block
'.notion-callout-block > div > [style*="background:"]',
// database tag
'[style*="height: 20px; border-radius: 3px; padding-left: 6px;"][style*="background:"]',
'.notion-collection_view-block [style*="height: 14px; border-radius: 3px; padding-left: 6px;"]',
'.notion-timeline-item-properties [style*="height: 18px; border-radius: 3px; padding-left: 8px;"]',
]) {
for (const el of document.querySelectorAll(targetSelector)) {
if (!el.innerText || el.innerText.includes(" ")) continue;
const cssVar = `--theme--bg-${el.innerText}`,
colorVal = getComputedPropertyValue(el, "background-color"),
styleAttr = el
.getAttribute("style")
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
refs[`${cssVar}, ${colorVal}`] ??= [];
refs[`${cssVar}, ${colorVal}`].push(
`.notion-body${modeSelector} ${targetSelector}[style*="${styleAttr}"]`
);
}
}
// board card: in light mode all have bg "white" by default,
// must be styled based on parent
for (const parent of document.querySelectorAll(
".notion-board-view .notion-board-group"
)) {
const el = parent.querySelector('a[style*="background"]'),
innerText = el.innerText.replace("Drag image to reposition\n", "");
if (!innerText || innerText.includes(" ")) continue;
const cssVar = `--theme--bg-${innerText}`,
colorVal = getComputedPropertyValue(el, "background-color"),
styleAttr = parent
.getAttribute("style")
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
refs[`${cssVar}, ${colorVal}`] ??= [];
refs[`${cssVar}, ${colorVal}`].push(
`.notion-body${modeSelector} .notion-board-view
.notion-board-group[style*="${styleAttr}"] a[style*="background"]`
);
}
for (const varRef in refs) {
cssBody += `${refs[varRef].join(",")} {
background: var(${varRef}) !important;
}`;
}
};
generateBackgroundStyles();
const generateAccentStyles = () => {
// accents are the same in both light and dark modes
// duplicate styles should be removed by csso
const accentPrimary = "rgb(35, 131, 226)",
accentPrimaryHover = "rgb(0, 117, 211)",
accentPrimaryContrast = "rgb(255, 255, 255)",
accentPrimaryTransparent = "rgba(35, 131, 226, 0.14)",
accentSecondary = [
"rgb(235, 87, 87)",
"rgb(180, 65, 60)",
"rgb(205, 73, 69)",
],
accentSecondaryContrast = "rgb(255, 255, 255)",
accentSecondaryTransparent = "rgba(235, 87, 87, 0.1)",
accentSecondaryBorder = "1px solid rgb(110, 54, 48)";
cssRoot += `--theme--accent-primary: ${accentPrimary};
--theme--accent-primary_hover: ${accentPrimaryHover};
--theme--accent-primary_contrast: ${accentPrimaryContrast};
--theme--accent-primary_transparent: ${accentPrimaryTransparent};
--theme--accent-secondary: ${accentSecondary[0]};
--theme--accent-secondary_contrast: ${accentSecondaryContrast};
--theme--accent-secondary_transparent: ${accentSecondaryTransparent};`;
cssBody += `
[style*="color: ${accentPrimary}"],
[style*="fill: ${accentPrimary}"] {
color: var(--theme--accent-primary, ${accentPrimary}) !important;
}
[style*="background: ${accentPrimary}"],
[style*="background-color: ${accentPrimary}"] {
background: var(--theme--accent-primary, ${accentPrimary}) !important;
color: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
fill: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
}
[style*="background: ${accentPrimary}"] svg[style*="fill"],
[style*="background-color: ${accentPrimary}"] svg[style*="fill"] {
fill: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
}
[style*="border-radius: 44px;"] > [style*="border-radius: 44px; background: white;"] {
background: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
}
[style*="background: ${accentPrimaryHover}"],
[style*="background-color: ${accentPrimaryHover}"] {
background: var(--theme--accent-primary_hover, ${accentPrimaryHover}) !important;
color: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
fill: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
}
.notion-table-selection-overlay [style*='border: 2px solid'] {
border-color: var(--theme--accent-primary, ${accentPrimary}) !important;
}
*::selection,
.notion-selectable-halo,
[style*="background: ${accentPrimaryTransparent}"],
[style*="background-color: ${accentPrimaryTransparent}"] {
background: var(--theme--accent-primary_transparent, ${accentPrimaryTransparent}) !important;
}
[style*="color: ${accentSecondary[0]}"],
[style*="color: ${accentSecondary[1]}"],
[style*="fill: ${accentSecondary[0]}"],
[style*="fill: ${accentSecondary[1]}"] {
color: var(--theme--accent-secondary, ${accentSecondary}) !important;
}
[style*="background: ${accentSecondary[0]}"],
[style*="background: ${accentSecondary[1]}"],
[style*="background: ${accentSecondary[2]}"],
[style*="background-color: ${accentSecondary[0]}"],
[style*="background-color: ${accentSecondary[1]}"],
[style*="background-color: ${accentSecondary[2]}"] {
background: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
color: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
fill: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
}
[style*="background: ${accentSecondary[1]}"] + [style*="color: white;"] {
color: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
fill: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
}
[style*="background: ${accentSecondaryTransparent}"],
[style*="background-color: ${accentSecondaryTransparent}"] {
background: var(--theme--accent-secondary_transparent, ${accentSecondaryTransparent}) !important;
}
[style*="border: ${accentSecondaryBorder}"] {
border-color: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
}
`;
};
generateAccentStyles();
const generateScrollbarStyles = () => {
const scrollbarTrack = darkMode ? "rgba(202, 204, 206, 0.04)" : "#EDECE9",
scrollbarThumb = darkMode ? "#474c50" : "#D3D1CB",
scrollbarThumbHover = darkMode ? "rgba(202, 204, 206, 0.3)" : "#AEACA6";
cssRoot += `--theme--scrollbar-track: ${scrollbarTrack};
--theme--scrollbar-thumb: ${scrollbarThumb};
--theme--scrollbar-thumb_hover: ${scrollbarThumbHover};`;
cssBody += `
.notion-body${modeSelector} ::-webkit-scrollbar-track {
background: var(--theme--scrollbar-track, ${scrollbarTrack}) !important;
}
.notion-body${modeSelector} ::-webkit-scrollbar-thumb {
background: var(--theme--scrollbar-thumb, ${scrollbarThumb}) !important;
}
.notion-body${modeSelector} ::-webkit-scrollbar-thumb:hover {
background: var(--theme--scrollbar-thumb_hover, ${scrollbarThumbHover}) !important;
}
`;
};
generateScrollbarStyles();
const prismTokens = [
// all standard tokens from https://prismjs.com/tokens.html
"keyword",
"builtin",
"class-name",
"function",
"boolean",
"number",
"string",
"char",
"symbol",
"regex",
"url",
"operator",
"variable",
"constant",
"property",
"punctuation",
"important",
"comment",
"tag",
"attr-name",
"attr-value",
"namespace",
"prolog",
"doctype",
"cdata",
"entity",
"atrule",
"selector",
"inserted",
"deleted",
],
generateCodeStyles = () => {
const inlineCode = document.querySelector(
'.notion-text-block .notion-enable-hover[style*="mono"]'
),
inlineFg = inlineCode
.getAttribute("style")
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)?.[1],
inlineBg = inlineCode
.getAttribute("style")
.match(/(?:^|(?:;\s*))background:\s*([^;]+);?/)?.[1];
cssRoot += `
--theme--code-inline_fg: ${inlineFg};
--theme--code-inline_bg: ${inlineBg};`;
cssBody += `
.notion-body${modeSelector} .notion-text-block
.notion-enable-hover[style*="mono"][style*="color:${inlineFg}"] {
color: var(--theme--code-inline_fg, ${inlineFg}) !important;
}
.notion-body${modeSelector} .notion-text-block
.notion-enable-hover[style*="mono"][style*="background:${inlineBg}"] {
background: var(--theme--code-inline_bg, ${inlineBg}) !important;
}
`;
const blockFg = document
.querySelector('.notion-code-block > [style*="mono"]')
.getAttribute("style")
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)?.[1],
blockBg = document
.querySelector('.notion-code-block > div > [style*="background"]')
.getAttribute("style")
.match(/(?:^|(?:;\s*))background:\s*([^;]+);?/)?.[1];
cssRoot += `--theme--code-block_fg: ${blockFg};
--theme--code-block_bg: ${blockBg};`;
cssBody += `
.notion-body${modeSelector} .notion-code-block > [style*="mono"] {
color: var(--theme--code-block_fg, ${blockFg}) !important;
}
.notion-body${modeSelector} .notion-code-block > div > [style*="background"] {
background: var(--theme--code-block_bg, ${blockBg}) !important;
}
`;
const refs = {},
el = document.querySelector(".notion-code-block .token");
for (const token of prismTokens) {
el.className = `token ${token}`;
const cssVar = `--theme--code-${token.replace(/-/g, "_")}`,
colorVal = getComputedPropertyValue(el, "color");
refs[colorVal] ??= cssVar;
cssRoot += `${cssVar}: ${
refs[colorVal] === cssVar ? colorVal : `var(${refs[colorVal]})`
};`;
cssBody += `.notion-body${modeSelector} .notion-code-block .token.${token} {
color: var(${cssVar}, ${colorVal}) !important;
}`;
}
};
generateCodeStyles();
const cssDoc = `body${modeSelector} { ${cssRoot} } ${cssBody}`;
console.log(cssDoc);
Reference in New Issue View Git Blame Copy Permalink