Dark mode #1661

pbignardi · 2021-11-14T22:34:54Z

Addresses issue #23

Outline of the changes:

Extracted colors from `editor.css` into separate css files

All the colors in editor.css have been replaced by CSS variables that are defined in light_color.css and dark_color.css.
These two files contains media queries to decide which of the variables to use depending on the prefered user theme.
For simplicity, all the variables are set in the :root scope, but the names are quite descriptive, in case they need to be modified down the line.

Included `cm-cursor` and `cm-docs-binding` styling in `editor.css`

Styling for cm-cursor and cm-docs-binding classes are moved in editor.css for clarity and improve code maintainability. CSS variables are created in light_color.css and dark_color.css to specify the colors.

Modified `CellInput.js` and `FilePicker.js` to allow for dark theming

The default code-mirror setup only support light theming. An optional parameter was added to allow for dark theming in the cell input and file picker.

SVG graphics inverted

SVG graphics are reused with appropriate filters in editor.css. A good improvement would be to create custom svg graphics for the dark theme.

Try this Pull Request!

Open Julia and type:

julia> ]
(@v1.6) pkg> activate --temp
(@v1.6) pkg> add https://github.com/pbignardi/Pluto.jl#main
(@v1.6) pkg> # press backspace/delete to go back
julia> import Pluto; Pluto.run()

fonsp · 2021-11-15T21:55:17Z

This looks really good @pbignardi, thanks so much! Can you resolve the merge conflicts?

pankgeorg · 2021-11-16T12:03:54Z

This is awesome, from a software engineering perspective! I tried to push a commit with some styling adjustments - can you give us access? I'll get a more detailed list soon!

Great work overall!!

pbignardi · 2021-11-16T13:02:29Z

Thank you for the kind words 😄 Shall I set you as collaborator in my forked repo?

pbignardi · 2021-11-16T13:03:07Z

I also pushed some changes to resolve the conflicts earlier this morning.

pankgeorg · 2021-11-16T13:43:27Z

Thank you for the kind words 😄 Shall I set you as collaborator in my forked repo?

Can you check if you can do this process? if yes, it will be easier

pbignardi · 2021-11-16T13:48:11Z

Thank you for the kind words 😄 Shall I set you as collaborator in my forked repo?

Can you check if you can do this process? if yes, it will be easier

Done, box checked. Sorry, it's my first PR 😅

pankgeorg · 2021-11-16T19:21:00Z

Oops I closed this by mistake - I messed the git - the commits got lost but managed to restore the code.

pbignardi · 2021-11-18T10:15:41Z

Sorry, I'm quite newbie in project contributing. Are there any changes that I need to do to the code?

fonsp · 2021-11-18T10:22:10Z

Hi @pbignardi, thanks again for contributing! I think there were some technical problems because this PR is coming from the main branch of your fork instead of a new branch for your PR. Something to remember for your next contribution to Pluto!

I think the PR will take a couple of weeks of tweaking from our side until we are happy with how all the styles look, and we will have to try how well it plays together with other packages, but the technical side looks really good!

pbignardi · 2021-11-18T10:32:18Z

Oh, ok thank you for the heads up! I'll start looking for a new issue to contribute to 😄

frontend/components/CellInput.js

fonsp · 2021-12-23T00:04:01Z

Sorry for the slow response! The reason is: we think dark mode is a really exciting feature, and we are saving it up for our next big release, either 0.18.0 (or 1.0.0 if that is soon). 🙊

pbignardi · 2021-12-23T14:59:19Z

It's exciting to see so much hype for this feature 😄 😎

Also removed SyntaxColorsParsers.js as it's no longer needed

pbignardi · 2021-12-23T22:20:27Z

Just noticed the background in the dark mode. Very nice, I like it! 👍🏻

fonsp · 2022-01-11T16:55:13Z

We are getting close!

TODO:

errored focused cell in light mode has glitched traffic light
selection highlight color in CM needs more contrast

Future PR:

Pattern for background on main menu and large screens!

icweaver · 2022-01-12T19:13:00Z

Y'all got thiss

pbignardi · 2022-01-12T21:37:26Z

errored focused cell in light mode has glitched traffic light

@fonsp Are you referring to this?

pbignardi · 2022-01-13T16:44:54Z

selection highlight color in CM needs more contrast

Regarding this problem, the best solution would be to modify the CodeMirror config files, since in there it is defined the selection background color that it's used when in dark mode. Alternatively we could also bodge it by forcing such color afterwards by changing it in the css and using the !important keyword; not the cleanest solution but it works.

Edit: fyi, in the index.es.js file the selection background color is at line 10862.

pankgeorg · 2022-01-13T17:09:11Z

selection highlight color in CM needs more contrast

Regarding this problem, the best solution would be to modify the CodeMirror config files, since in there it is defined the selection background color that it's used when in dark mode. Alternatively we could also bodge it by forcing such color afterwards by changing it in the css and using the !important keyword; not the cleanest solution but it works.

Edit: fyi, in the index.es.js file the selection background color is at line 10862.

there is a clean CSS solution, but we are looking for the right candidate color!!

pbignardi · 2022-01-13T17:18:03Z

Fair point 😄

pbignardi · 2022-01-14T16:28:10Z

Ok I updated the color, I made it green. See if you like it 😉

…nto pr/1661

fonsp · 2022-01-15T00:11:37Z

diegozea · 2022-01-21T13:36:34Z

This is awesome! 🎉 I want to test it; how should we do to activate the dark mode? 🌑

pankgeorg · 2022-01-21T13:52:34Z

Just update to the latest version and set you operating system theme to dark!

diegozea · 2022-01-21T14:23:43Z

It seems that it doesn't work in Ubuntu 18.04. I have followed these instructions to set the dark mode on the system: https://nixytrix.com/how-do-i-enable-dark-mode-in-ubuntu-18-04/

pankgeorg · 2022-01-21T14:46:03Z

What pluto version are you on? If you go here https://github.com/settings/appearance and set
"Sync with system" does it get dark?

diegozea · 2022-01-21T16:07:57Z

No, it doesn't work with the GitHub page either. So, it should be a problem with Ubuntu 18.04 and Tweaks.

diegozea · 2022-07-11T08:57:24Z

Ok. It was a problem with Chrome & Ubuntu; I have fixed it following this steps: https://radu.link/enable-dark-mode-chrome-ubuntu/

fonsp linked an issue Nov 15, 2021 that may be closed by this pull request

Dark mode #23

Closed

fonsp requested a review from pankgeorg November 15, 2021 21:55

pankgeorg closed this Nov 16, 2021

Reset branch

6a9a847

pankgeorg reopened this Nov 16, 2021

pankgeorg and others added 5 commits November 16, 2021 21:41

Merge branch 'main' of github.com:fonsp/Pluto.jl into pb-main

7158300

Restore TryThisPR.yml

dffbee0

Restore topological_order.jl

78029a1

Restore Run.jl

e8adfb3

Restore SessionActions.jl

b6ef746

pankgeorg added 2 commits December 4, 2021 21:59

Merge branch 'main' into pb-main

a0da195

Merge branch 'main' of github.com:pbignardi/Pluto.jl into pb-main

1cde1f2

fonsp added wide audience This affects a wide audience of Pluto users and future Pluto users frontend Concerning the HTML editor labels Dec 13, 2021

Merge branch 'main' into pb-main

db3b0ae

fonsp requested changes Dec 23, 2021

View reviewed changes

frontend/components/CellInput.js Outdated Show resolved Hide resolved

Reference colors for highlight style to the css variable

44e897b

Also removed SyntaxColorsParsers.js as it's no longer needed

fonsp added 9 commits January 9, 2022 18:55

fix some light styles

3691ac5

header color

e991a6b

Merge branch 'main' into pr/1661

e8a8af2

tweakytweaks

b526db6

Merge branch 'main' into pr/1661

cf8b38a

button tweaks

b6e57a7

a tag tweaks

674ba0a

highlightjs

5c1dc36

Update dark_color.css

8167acd

pbignardi and others added 2 commits January 12, 2022 23:07

fixed focued error cell trafficlight color

293d6d1

update meta tags

304cd3d

pbignardi added 2 commits January 13, 2022 18:18

added variable for code selection background color

60f80d6

updated background color of selection to green

8b75832

fonsp added 2 commits January 14, 2022 20:52

Merge branch 'dark-mode-1' of https://github.com/pbignardi/Pluto.jl i…

0de858c

…nto pr/1661

tweak

ff0cbc9

fonsp merged commit 8f854a2 into fonsp:main Jan 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark mode #1661

Dark mode #1661

pbignardi commented Nov 14, 2021 •

edited by fonsp

fonsp commented Nov 15, 2021 •

edited

pankgeorg commented Nov 16, 2021

pbignardi commented Nov 16, 2021

pbignardi commented Nov 16, 2021

pankgeorg commented Nov 16, 2021

pbignardi commented Nov 16, 2021

pankgeorg commented Nov 16, 2021 •

edited

pbignardi commented Nov 18, 2021

fonsp commented Nov 18, 2021

pbignardi commented Nov 18, 2021

fonsp commented Dec 23, 2021 •

edited

pbignardi commented Dec 23, 2021

pbignardi commented Dec 23, 2021

fonsp commented Jan 11, 2022 •

edited

icweaver commented Jan 12, 2022 •

edited

pbignardi commented Jan 12, 2022 •

edited by pankgeorg

pbignardi commented Jan 13, 2022 •

edited

pankgeorg commented Jan 13, 2022

pbignardi commented Jan 13, 2022

pbignardi commented Jan 14, 2022

fonsp commented Jan 15, 2022

diegozea commented Jan 21, 2022

pankgeorg commented Jan 21, 2022

diegozea commented Jan 21, 2022

pankgeorg commented Jan 21, 2022 •

edited

diegozea commented Jan 21, 2022

diegozea commented Jul 11, 2022

Dark mode #1661

Dark mode #1661

Conversation

pbignardi commented Nov 14, 2021 • edited by fonsp

Extracted colors from editor.css into separate css files

Included cm-cursor and cm-docs-binding styling in editor.css

Modified CellInput.js and FilePicker.js to allow for dark theming

SVG graphics inverted

Try this Pull Request!

fonsp commented Nov 15, 2021 • edited

pankgeorg commented Nov 16, 2021

pbignardi commented Nov 16, 2021

pbignardi commented Nov 16, 2021

pankgeorg commented Nov 16, 2021

pbignardi commented Nov 16, 2021

pankgeorg commented Nov 16, 2021 • edited

pbignardi commented Nov 18, 2021

fonsp commented Nov 18, 2021

pbignardi commented Nov 18, 2021

fonsp commented Dec 23, 2021 • edited

pbignardi commented Dec 23, 2021

pbignardi commented Dec 23, 2021

fonsp commented Jan 11, 2022 • edited

icweaver commented Jan 12, 2022 • edited

pbignardi commented Jan 12, 2022 • edited by pankgeorg

pbignardi commented Jan 13, 2022 • edited

pankgeorg commented Jan 13, 2022

pbignardi commented Jan 13, 2022

pbignardi commented Jan 14, 2022

fonsp commented Jan 15, 2022

diegozea commented Jan 21, 2022

pankgeorg commented Jan 21, 2022

diegozea commented Jan 21, 2022

pankgeorg commented Jan 21, 2022 • edited

diegozea commented Jan 21, 2022

diegozea commented Jul 11, 2022

pbignardi commented Nov 14, 2021 •

edited by fonsp

Extracted colors from `editor.css` into separate css files

Included `cm-cursor` and `cm-docs-binding` styling in `editor.css`

Modified `CellInput.js` and `FilePicker.js` to allow for dark theming

fonsp commented Nov 15, 2021 •

edited

pankgeorg commented Nov 16, 2021 •

edited

fonsp commented Dec 23, 2021 •

edited

fonsp commented Jan 11, 2022 •

edited

icweaver commented Jan 12, 2022 •

edited

pbignardi commented Jan 12, 2022 •

edited by pankgeorg

pbignardi commented Jan 13, 2022 •

edited

pankgeorg commented Jan 21, 2022 •

edited