Persistent custom CSS and JS

[fabiospampinato]

Having a way to customize the app with some custom CSS and JS would make it possible to make the app more personal app, beyond what will be possible with plugins #128.

[Arecsu]

It would be awesome. Also, the option to load custom css/js from other people. I think that will open new possibilities, like loading specific configurations, themes, plugin bundles #128 maybe?

Both options should be implemented in my opinion: persistent custom css/js, and load external css/js.

Related: #104

[fabiospampinato]

and load external css/js

If that feature is implementable via plugins then there will/should be a plugin you can install.

If it can't be implemented via plugins you can just copy-paste any css/js you like into your own, this won't be some sort of secondary plugin system, more like a way to fine-tune the app to your needs, even if the APIs available don't allow you to do that.

[amelandri]

Since I don't know how Electron really works, I have a question, just out of curiosity.

How risky is allowing a user to insert a custom js? Could this custom js impact app functionality?
I'm thinking of an inexperienced user that inserts a custom js that screws up the app and then blames Notable for the problem.

[fabiospampinato]

How risky is allowing a user to insert a custom js? Could this custom js impact app functionality?

It's very possible, as one could do a lot of things with some custom JS. But I don't think we should restrict power users from this because somebody may actually make the app worse for himself.

[Tydox]

Hi,
First of all, thank you for creating this app, it is very neat and useful.
Currently I am using SnippetsLab which does more or less the same as your program, Only different is a bit of the GUI, now I know that a request for that is silly, but I wanted to ask if it possible to make the side bar transparent like native Mac apps.
I really enjoy using apps that look like the default one because they are simple and straight forward (hence SnippetsLabs=Apple Notes).
I was messing around with the CSS but I couldn't manage to make it actually transparent, it only turned white.
Thanks again!

TL:DR
Is it possible right now to change only the side bar color to transparent?

[fabiospampinato]

@Tydox can you open a separate issue about that? That's actually called "vibrancy", and you can't toggle it via CSS, but I guess we could add an option for it.

[Tydox]

@fabiospampinato #457 I did find Vibrancy, sadly I never worked with Electron so I do not know what to do with it :3
Thanks! :)

[washere]

I think the best way forward to spread the word on Notable. Then others will come and help.

This can be done by improving basic functionalities to make it go semi-viral by word of mouth.

To achieve this, can add temporary ways to do functions.

Then permanent implementation of those functions at a 'later stage'.

1. DARK THEME:

The most important is dark theme. Because many if not most coders only work in dark or black themes/modes on IDEs, code editors etc.

I have seen the issues and mods in issues thread on dark theme here. They look good as temporary measures.

I suggest adding an icon (google images: half moon icon), at top (next to paperclip icon) to:

Switch between Light/Dark themes.

Then later the ambitious plans for persistent CSS and user custom themes functions which take a lot of time can be coded in good time.

2. Sync Scroll:
'Sync-Scroll function' of both editor and preview is a must these days in good Markdown editors.

3. Settings:

A Settings/Preferences/Options section can be added by a settings.ini file in the root directory. This would help other coders to try things. Later it can be added as a major section.

[aburke161]

Just chiming in to say I'd really like to see this one. It's basically my only gripe with the application at this point. I was disappointed when I built it from source to change font sizes and realized that you've withheld the code for the past few releases. Though I completely understand your reasoning after looking through the updates. Thanks so much for this awesome app!

[fabiospampinato]

@aburke161 As a short-term workaround remember that you can open the devtools via Help -> Open Developer Tools, and you also have access to Node.js APIs (e.g. require ( 'fs' ) etc.), so you could craft a one liner than reads a custom CSS file and adds it to the DOM. It won't be persistent, but it should be a good enough workaround for now.

[RyanGreenup]

Just chiming in to say I'd really like to see this one. It's basically my only gripe with the application at this point. I was disappointed when I built it from source to change font sizes and realized that you've withheld the code for the past few releases. Though I completely understand your reasoning after looking through the updates. Thanks so much for this awesome app!

as Fabio pointed out you can change the CSS via the Developer Tools, more over you can include <style> </style> if you're willing to permanently attach the changes to export.

It is also possible to unpack and repack the app.asar, I've created a gist on how to do that here

[MMK21Hub]

Custom CSS/JS is now available (in the Insiders builds): https://github.com/notable/notable-insiders/releases/tag/v1.9.0-alpha.6