I don't like Notion's dark mode colours, so I spent way too long figuring out how to change it.
I found two ways to edit the CSS (and json) of Notion; either using nativefier or a browser + stylus extension. Nativefier has the added benefit of being able to use js, while browsers can use extensions.
My theme :)Nativefier:
Go to https://github.com/nativefier/nativefier and follow the instructions there to install it.
Note: if using
nativefier 'notion.so'or just typingnativefierin cmd doesn't work
navigate to
C:\Users\YOUR USER NAME\AppData\Roaming\npm(or just copy-paste this, with your computer's username inserted)click the address bar to copy the directory
enter
cd "above path"(with the "") into cmd and try the first command again.
Navigate to where the folder created is (in the
npmfolder usually) and move it to wherever you want it to be. Should be called something similar to "Webapp-win32-x64"Go to that folder > resources > app > inject to add any css/json files in there! I don't think folders work though, but you can have multiple css/json files.
Some app settings are also found in resources > app > nativefier.json
Open it in an editor to change the settings, such as
"hideWindowFrame"
Open the webapp exe file back in the first folder to launch Notion with any of your css/json edits.
Web Browser:
Go to notion.so on whatever browser you use
If your browser supports it, you can install the site as an app (I use Edge) so that it takes up a separate slot in the taskbar. This is not required, but I prefer this.
Note: installing the site as an app takes the icon and title of whatever page you have open. If notion.so renavigates to your home page, it will take the icon and title of that. To avoid this, go to notion.so and quickly install the site as an app before your homepage loads (easier with my terrible internet).
Install the stylus extension
Go to notion.so, press the stylus extension icon and write a style for notion.so (without anything after the /)
Any edits will update live in the notion webpage/app
CSS stuff
I would not recommend trying to make your own css theme from scratch if you do not know how to code css. There are a lot of elements that need to be edited, and it's easier to simply edit an existing theme. Full credit for the code goes to dragonwocky and the other contributors of Notion Enhancer, I simply copied the required parts and edited/added stuff to customise it to my need (I don't use Notion Enhancer cause I can't get it to work and I don't really need all its features).
To use a theme from Notion Enhancer:
Go to the github page > mods > core > css > theme.css
Copy and paste the code into Stylus / css file in Nativefier as described above.
Go to mods > core > variables.css and copy that in as well
go to mods > whatever theme you want to use (see all the themes by scrolling down the README.md)
Copy the code in app.css and variables.css into your own script
Also go to https://github.com/notion-enhancer/tweaks and https://www.notion.so/b45fb337c1ea4348a31903bb0769c3ef?v=14c05bc589944da497927be673f2c660 and other Notion Enhancer repositories for little customisations
colours can be changed by changing the
:rootvariables
Custom CSS
Small things can be edited with inspect element, press ctrl+shift+i and select something you want to change. Try look for something like prefixed with a . to edit. The main css functions you would probably use are background-color, color (text colour) and display (set to none to remove something).
If you wish, you can find what I use here, which uses the dracula theme, and has some extra customisations. Everything before the Dracula theme script is a tweak/custom code, and some of the dracula theme is also edited (ctrl+f for [myedits] to see what i changed, and remove that line/uncomment if you want to remove it)
There also exists gloation, a css and js script to have a custom image background. Requires nativefier.
Removing '/' menu
Also found a way to remove the menu that pops up when you type '/' anywhere, with an option to show the menu if the '/' is the first character, and a fix for scrollbars disappearing when the menu pops up, very annoying when working on large pages where the page would scroll up because of the slightly larger width.Link to script here. (is already included in my script)
If you just want to remove the / menu entirely, the first 3 lines is all that is needed. To show it if you type '/' as the first character of a block, it requires a little config based on the resolution of your screen.
type a '/' as the first character of a block
Press
ctrl+shift+ito open inspect elementPress the button on the top left of inspect element, and select the slash menu's scrollbar
Scroll up a little until you see something along the lines of
<div style="position: fixed; left: 348.475px; top: 583.581px; pointer-events: none;">Copy the value of
leftand paste it into the position in the scriptDo the same for pages of full width, normal width and preview pages
If you have multiple monitors with different resolutions, you would have to do this for each monitor
EDIT: This seems to affect other blocks, so far I have found it to affect inline math blocks. Simple fix is to just add another left: value for inline math, same method as above.EDIT 2: no longer need, updated both scripts. probably still has some bugs, but idk css enough to do it properly
Caveats:
the menu still exists, so the lag that comes with it is still there
pressing enter will still execute whatever the slash menu usually would execute
slash menu pops up if its the left most character, not only the first character of a new block
Have fun!
Videos
How do I include custom CSS when generating images from Notion content?
Do I need coding skills to integrate Notion with HTML/CSS to Image?
What kind of data can be included from Notion when creating an image?
I also looked for the answer for your question. I think this article is helpful for you to understand why we can improve the site's performance by inlining CSS. Below is my summary:
- To prevent render-blocking resource. The site only needs to request to the server once (for html files), they don't need to check
<head>to request other times for css files. - Notion might already check the performace and compared between using inline and not using inline. I think they chosed the better one.
- You should (but not always) use inline. Why? Because it may lead to First First Contentful Paint (FCP) -- because there are some things duplicated (in style), the browser takes much time to render again and again the same things for all DOM elements. As you can see, notion doesn't apply inline CSS for all of their elements, they use classes also. However, when you check their site speed test with Google's PageSpeed Insight, the first problem is FCP and the score is really really bad!!!
For me, the main problem Notion chose this way is the performance. They handle their site with components (all are in div even for headings,...). They depend too much on the styling of divs to make them become other HTML parts. These components are not always their, they appear when you add them, check them,... Notion also save your works automatically every second,... You can imagine the number of requests their server must listen to. That's why the performce (server side) is the most important thing they considered, I think.
Hope I can help and sorry for my bad English.
Generally you want to keep the css in a separate style sheet since it's much easier to maintain. Going through the HTML file to restyle the page is simply not efficient enough.
Also, If you want to have multiple elements with the same attributes, doing the styling on the specific element would take much more time.
I'm new to the world of Notion and I was wondering if there's any way to create custom widgets or blocks using HTML/CSS/JS and embedding them in my pages. I'm a software engineering student so I'm familiar with working with websites and apps. Rn I wanted to make a movie card that has the title input, poster input, 5 star rating system that I can click on, and a date input for when I watched the movie. I'm also planning on making other stuff in the future. Any good tutorial links or videos would also be helpful. Thanks!