Dark theme

[notable]

Dark theme

[duynguyenhoang]

@fabiospampinato, I have implemented new version of dark mode according to @RomanKornev 's implementation. Thank @RomanKornev for your first idea.

Features:

• Switch between 2 modes.
• Rewrite misc.css (Using scss)

You guys can check it here https://github.com/duynguyenhoang/notable/tree/feature/add_dark_mode

It is still under early phase, I am fixing all styles to make sure it work correctly with both themes

Please give me your idea or feedback.

[fabiospampinato]

Refactoring all that UI-related code (7713012) took longer than expected, but now a dark theme, and eventually third-party themes, are much easier to implement:

Light theme:

Dark theme:

It isn't quite ready yet, as I still have to integrate into the code and properly theme a few more things (rendered Markdown theme, codemirror/monaco, syntax highlighting, katex formulas, mermaid diagrams), but I think it's a good start, what do you guys think?

PS. I've modeled the dark theme around my Monokai Night theme for vscode, perhaps you might want to take a look at that too.

PS2. A complete dark theme might land in about 2 releases, as there are some pressing bugs that I'd like to get fixed for the next release.

[fabiospampinato]

Not sure how much of an effort it is to do this. As far as I know it also took the Visual Studio Code devs quite a while until they got this working.

Yeah that's basically unthemeable, it would have to be reimplemented entirely, that's way it took a while for the vscode team to get there too.

Now the next step obviously would be user defined themes 😉

Definitely, we'll to wait a while for that though, as that's a quite complicate thing to put up properly, and there are still lots of pressing issues to address, let's track that here #104

[fabiospampinato]

Definitely, if there's a dark version of the CSS GitHub is using for styling Markdown notes this should be easy to implement.

[fabiospampinato]

if there's a dark version of the CSS GitHub is using for styling Markdown notes this should be easy to implement.

Famous last words, pretty much everything except theming the rendered Markdown was difficult to do in some way.

I went all the way with the darkness, I'd be interested in hearing your feedback about this theme, here there are some screenshots:

[fabiospampinato]

@mikaelmello Hopefully this should land in v1.5. If you want to try it today (but keep in mind that it's very much not complete yet) you'll have to execute the following in the devtools: $('body').toggleClass ( 'theme-light theme-dark' )

[mikaelmello]

Thanks! I'll let you know about any issues I might encounter (hopefully I can fix them too!)

Also, if you have other "beta" features that are functional but need more robustness, feel free to ask me, I'm using notable a lot so my usecase can be useful

[RomanKornev]

Take a look at https://github.com/StylishThemes/GitHub-Dark.
It also has loads of syntax highlighting themes including One Dark.

[RomanKornev]

Darkmode Alpha is here: RomanKornev/notable/tree/darkmode

What would be the best way to merge it?
I'm open to suggestions or potential issues.

[fabiospampinato]

@RomanKornev Thanks but this should probably be implemented by compiling 2 separate versions of Svelto's CSS, we also need to properly reorganize the src/renderer/template/src directory first. Also while I do appreciate the effort the result looks a bit off to me 🤔

[RomanKornev]

Check out the new dark theme PR in #333 😄 .
@duynguyenhoang Sorry, but your implementation had too many merge conflicts and didn't compile.

[mikaelmello]

What is the status after v1.4? Is there some way I can activate it on my install?

[raags]

The inline highlights are not visible in dark mode, and so is the table :

[fabiospampinato]

@raggs yeah the editor & preview components are very much unthemed yet.

[eddex]

Just tried the new dark theme and I really like it. The menu bar at the top is not themed yet. Not sure how much of an effort it is to do this. As far as I know it also took the Visual Studio Code devs quite a while until they got this working.

Now the next step obviously would be user defined themes 😉

[narfman0]

nb4 solarized dark :). User defined would be great, too.

Thanks so much for yalls work, looking forward to any incarnation of this!