18 May 2020
Custom styles for Notion
I recently helped someone with strong aesthetic preferences set up a custom Mac app for Notion. It’s approximately the same thing you could get with a browser extension like Stylus, but it retains the convenient Electron app parts of getting its own app icon and its own separate cookie storage.
Luckily enough, someone else had already figured out how to do it on Linux, which was close enough for me to reuse most of the work for Mac.
Custom CSS in Notion turned out to be more interesting than I expected, since almost all of the CSS in the app is inlined directly into style attributes. That makes it… awkward to apply site-wide styles using CSS files.
Changing the font to Latin Modern Mono Italic turned out to be easy enough, but led to a somewhat unexpected result: slanted emoji. 😆 Adding an override for span[role=image] turned out to be enough.
Changing colors, though, was a real challenge. There’s no class, there’s no element, there’s no attribute… wait. The style attribute is always going to have the color in it, right? You can select based on “attribute value contains”, right? Turns out yes, you can select elements based on the inline style that gives them the color that you want to overrule. 😂
This is probably the most cursed CSS I have ever written.
div[style*="rgb(173, 26, 114)"] {
color: #F9D2EE !important;
}
It works, though!
