Dark mode

[malyvsen]

No description provided.

[fonsp]

#2

[fonsp]

The .css structure should be simpler - no <style> tags inside editor.html

[fonsp]

Perhaps PLUTOCONFIG can be used to send the .css file to the client? But this would give a 'flash of unstyled content'.

Or a simple substitution thing could be made for .jlhtml files: make it so that you can write $(string_interpolation) inside the HTML document, like:

<style src="$(path_to_css)">

This is needed anyways to do #77

Maybe check performance first?

[fonsp]

Maybe it would be good to first check whether Plots.jl (or whatever backend) can be persuaded to work in a dark mode? Otherwise your plots would look pretty bad

[malyvsen]

I think people would need to use PlotThemes.jl for this.
But even if there were a way to make Plots.jl work in dark mode, I don't think we should do it for the user? It would be invisible messing with someone's code.

[fonsp]

Ah okay, I agree 👍

[fonsp]

As discussed in #2, a dark mode can automatically match the system theme, we don't necessarily need our own config for this.

And I would say that the printed document is always in light mode?

[fonsp]

To new contributors: the plan is to rewrite editor.css to use more CSS variables defining a color scheme, font, etc. Then there would be a short CSS defining the color scheme (which can be swapped out for a 'dark mode CSS') and a longer CSS close to what it is today.

This makes it easier to maintain the package because we will only have one CSS file to worry about.

[fonsp]

And check whether all the sample notebooks still look nice

[dralletje]

https://github.com/Pocket-titan/DarkMode

[MarkNahabedian]

This is an accessability issue for me. Most of the Pluto user interface (hiding cells, and adding new cells are the only buttons I've found so far -- through painstaking examination of the DOM tree) is invisible if one's browser is in dark mode.

[pbignardi]

Currently working on this, and managed to separate all the color variables in a separate file. 😃 Though, some design decision are to be made about the way to select dark and light mode and the possibility to include other different themes (might as well since the code would support it). Any inputs? Thanks 😉

[MarkNahabedian]

Ideally it would query the browser to get the user's preferred theme. I think I'm stating the obvious though.

[dralletje]

@MarkNahabedian what do you mean with invisible if your browser is in dark mode? You're using an extension? Because by default dark mode doesn't change any styles for websites..

@pbignardi taking the user preferred color scheme would be ideal, I'm not too fond about having user specified themes integrated into Pluto.

[MarkNahabedian]

I mostly use Chrome. I think I installed an extension there before Chrome respected the system theme.

I seldom use Edge and have not extended it. It respects the system's dark theme. Pluto's buttons are just as invisible there.

[dralletje]

You happen to have a screenshot?

[MarkNahabedian]

I'm on a Microsoft Surface. is supposed to take a screenshot but doesn't.

I tried Microsoft Edge's "web capture" menu item and selected full screen capture. It did something but I don't know where it put the screenshot. It resulted in all of Pluto's non-cell background changing from black to white, and the icons becoming barely visible if I look real close, but the contrast is really poor. If I reload the page the black background is restored.

I took a photo which is shared here:
https://photos.app.goo.gl/AWURjmDozT99Qp759

Because of the heated competition to give us smart phones with cameras that give us a couple of orders of magnitude more pixels than we need, the image was too big to email. Sorry about the glare.

I meant to say this before: much thanks to those who are working on this issue. The very nature of vision limitations makes the so afflicted more likely to use computers than to play baseball.

[dralletje]

Thanks for the photo, that makes stuff a bit more clear.
You happen to have "Force Dark Mode for Web Contents" on? (As describes under "How to Force a Dark Theme on All Websites" in this article)

I hope introducing our own dark mode disables the force dark mode so you can see the buttons again 😁

[MarkNahabedian]

What I see doesn'y quite match that description.

In Edge settings, under Appearance, I have "overall appeaqrance" set to "dark" and "theme" set to "defailt".

[pbignardi]

I'm changing all the colours for all the elements in the DOM and I just found a little problem. Caret color cannot be set in any way through CSS for the pluto-input. Any inputs?

Also, the colours for highlighting the syntax in the input are fixed in the CellInput.js file; should the dark mode have different highlighting colors to allow for better readability? If so, how could we takle the problem without messing too much with the javascript part?

[dralletje]

It should definitely have different highlighting: we can add some javascript that pulls the colors from the computed css.

[pbignardi]

Code highlighting has been fixed. Though selecting code and cursor Color are buggy. Somehow, somewhere, the JavaScript code for CodeMirror chooses its own colors.

Those two problems aside, the dark mode is complete.

If anyone has suggestions to solve the two mentioned problems I'll be very grateful