8000 Dark theme · Issue #18 · notable/notable · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Dark theme #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
AndreyAkinshin opened this issue Dec 27, 2018 · 16 comments
Closed

Dark theme #18

AndreyAkinshin opened this issue Dec 27, 2018 · 16 comments
Labels
enhancement New feature or request
Milestone

Comments

@AndreyAkinshin
Copy link

No description provided.

@fabiospampinato
Copy link
Member

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

@fabiospampinato fabiospampinato added the enhancement New feature or request label Dec 27, 2018
@RomanKornev
Copy link
Contributor

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

@RomanKornev
Copy link
Contributor
RomanKornev commented Dec 28, 2018

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

main_dark

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

@fabiospampinato
Copy link
Member

@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 🤔

@fabiospampinato fabiospampinato changed the title Feature request: Dark theme Dark theme Dec 30, 2018
@duynguyenhoang
Copy link

@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)

Main window
Switch mode menu
Editor

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.

@RomanKornev
Copy link
Contributor

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

@fabiospampinato
Copy link
Member
fabiospampinato commented Feb 21, 2019

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:

screen shot 2019-02-21 at 23 23 03

Dark theme:

screen shot 2019-02-21 at 23 23 29

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.

@mikaelmello
Copy link
Contributor

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

@fabiospampinato
Copy link
Member
fabiospampinato commented Mar 17, 2019

@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
Copy link
Contributor

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

@raags
Copy link
raags commented Mar 26, 2019

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

image

@fabiospampinato
Copy link
Member
fabiospampinato commented Mar 26, 2019

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

@fabiospampinato
Copy link
Member

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:

Screen Shot 2019-05-11 at 21 18 27

Screen Shot 2019-05-11 at 21 19 01

Screen Shot 2019-05-11 at 21 18 48

@eddex
Copy link
eddex commented May 13, 2019

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
Copy link

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

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

@fabiospampinato
Copy link
Member
fabiospampinato commented May 13, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Development

No branches or pull requests

8 participants
0