Notion-Enhancer

[UniqueYang]

Hello, I found a customization tool for Notion's Windows client (https://www.notion.so/Notion-Enhancer-147abdd0b5ed47c9b472520f9ee212a4). Since Lotion is also encapsulated in Electron, I think it can also be used to beautify Lotion. But I don't know anything about Electron or CSS, I'm just a Linux desktop user.I still changed the style of Notion in version 0.02. By modifying /Lotion/resources/app/lib/preload.js, adding

function userscript() {
    /* Style Injecting */
    var fs = require("fs");
    let css = fs.readFileSync("lotion/Lotion/resources/app/lib/userscript.css"); //will be replaced in python patcher
    let head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
    /* Style Injecting */
}
require('electron').remote.getGlobal('setTimeout')(() => {  userscript(); }, 100);

userscript.css

[style^="font-weight:600"]
{
font-family: Arial, Helvetica, sans-serif;
}

.notion-sidebar-container
{
background-color: #fff!important;
}

.notion-code-block
  {
    background: #F8F8FF;
  }

/* To make cursor style as pointer when hover on scrollbar */
.notion-scroller {
    cursor: auto;
}
/* Scrollbar size */
::-webkit-scrollbar {
    width: 5px; /* To change vertical scrollbar width */
    height: 7px; /* To change horizontal scrollbar height */
}
/* Element where vertical and horizontal scrollbars converge */
::-webkit-scrollbar-corner{
    background-color: transparent;
}

/* Light Theme style for Scrollbars */
.notion-light-theme ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #afafaf;
}
.notion-light-theme ::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #e4e4e4;
}
.notion-light-theme ::-webkit-scrollbar-thumb:hover{
    background: #969696;
}
/* Light Theme style for Scrollbars */

/* Dark Theme style for Scrollbars */
.notion-dark-theme ::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #3d3d42;
}
.notion-dark-theme ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #5d5d5d;
}
.notion-dark-theme ::-webkit-scrollbar-thumb:hover{
    background: #868686;
}
/* Dark Theme style for Scrollbars */

But in the 0.03 version I can't restore this scene. Hope you can guide me

[UniqueYang]

On the webpage, many NotionHacks can be implemented through violetmonkey-script(https://github.com/Penguinlay/notion-inline-latex), such as the inline formula I want, and I hope it can be implemented in Lotion. thank you very much

[UniqueYang]

ok, I get it. In nativefier, just add inject.css or inject.js file in ”Lotion/resources/app/inject“, and then add the above content. Forgive me for not knowing anything

[puneetsl]

let me know if all these beautifications worked for you mentioned in the link?

I would love to make them default look in the next release of lotion

[UniqueYang]

The part about custom_style.css ((https://www.notion.so/Notion-Enhancer-147abdd0b5ed47c9b472520f9ee212a4)) all work . The content here(https://userstyles.org/styles/browse?search_terms=notion&type=false) can be added as well. Not all people like these styles and I don't think it's appropriate to change to default look. There are also many styles that require dev tools and filling in data-block-id (each one is different). My suggestion,the CSS can be written in and and comment the more personalized content. Just let everyone remove the comments if necessary.

[UniqueYang]

I'm willing to move a README to here if needed,help people like me who have little programming foundation to get a prettier Notion,on this project

[UniqueYang]

I'll share what I sorted. It has a lot of changes to the page, probably a lot of errors, select what's needed and comment off the rest. Let everyone modify it themselves. just put a gist link here, after all this isn't just needed.😂 https://gist.github.com/uniqueyang/2654b827f0e637e4d0cd0172ccbce8a8

[ya-nsh]

I'll share what I sorted. It has a lot of changes to the page, probably a lot of errors, select what's needed and comment off the rest. Let everyone modify it themselves. just put a gist link here, after all this isn't just needed.joy https://gist.github.com/uniqueyang/2654b827f0e637e4d0cd0172ccbce8a8

Hey, I have tried replacing the inject.css from the gist that you have created with the default inject.css. I have tried reloading Notion but, the changes didn't take place. Any help would be appreciated.

[UniqueYang]

I didn't check them all, I don't have a problem here. can you tell me which items don't work as expected, such as background color, TOC changes, fonts It may be necessary to install it, there is still a lot of content that is commented, remember to remove the comments. jnject.css don't get the location wrong! Is the position of V0.03 and V0.02 different, I forget too! V0.03 below。 . └─ resources            └─ app                  └─ inject                           └─ inject.css

[ya-nsh]

Hey, I just wanted to change the scroll bar in dark mode and remove the top bar. I had looked at your inject.css. I had replaced the default one with the one you made in the exact directory. Nothing really changed. Do I have to reinstall it? Because in Win10, to do this, the author made a .py file that executed and installed it. Do I need to change any JS files? I had only replaced the inject.css. Thanks.