DarkMode

Dark mode for Pluto 🎉

NOTE: This is a work in progress, feel free to make a PR if you see any badly visible colors which I missed! You can experiment by using your browser console (Ctrl+Shift+I or Cmd+Alt+I), selecting elements & manually adding style rules, which you can put into a html"<style> $css_rules_go_here </style>" to always enable them in your notebook. Please make a PR if you find any! The colors themselves don't really matter, just make sure it's legible. This way we can sort of crowdsource the workload :)

Update: this gif is outdated, see code below!

Add this cell to your Pluto notebook:

begin
    import Pkg
    Pkg.add(PackageSpec(url="https://github.com/Pocket-titan/DarkMode"))
    import DarkMode
    DarkMode.enable()
    # OR DarkMode.Toolbox(theme="default")
end

or install the package from the julia commandline using ] add https://github.com/Pocket-titan/DarkMode, and then import it in Pluto using import DarkMode.

DarkMode.enable optionally takes a theme argument (which is the name of a codemirror theme), and a cm_config Dict allowing you to provide custom CodeMirror options. Like this:

DarkMode.enable(theme="monokai", cm_config=Dict("tabSize" => 2))

See the function signature in the Pluto docs (type ?DarkMode.enable or click on the enable call) for more info. For a list of all available CodeMirror themes, see here. For a list of all CodeMirror options, see here.

NOTE: if you remove the DarkMode.enable() call, you have to refresh your page in order to go back to the light theme.

CSS Dark Mode

A CSS Mode is provided on top of DarkMode.enable().

You can enable CSS mode typing DarkMode.CSSDarkMode("zenburn") (where "zenburn" is a theme, from the same theme list). Optionally, you can pass a keyword argument to darken Pluto, like this: DarkMode.CSSDarkMode("zenburn", darkenPluto=true).

Pluto Opt-Ins

DarkMode.Toolbox() provides a set of opt-in utilities, if you want them.

PresentationMode() is the familiar to many presentation mode. Use it to add the arrows bottom right
Ligatures() optionally activates ligatures.
WidthOverDocs() activates a bigger width for the editor, while hiding LiveDocs

Pass a boolean argument if you want the feature enabled the next time you open your notebook.

You can also pass defaults to the DarkMode.Toolbox() using keyword arguments.

Signature is the following:

DarkMode.Toolbox(ligatures=false,
		presentation=false,
		theme="lucario",
		darkenPluto=false,
		width="normal")

(use width = "wide" to enable WideOverDocs())

Quickstart for CSS Dark Mode & Opt-Ins is the following:

begin
    import Pkg
    Pkg.add(url="https://github.com/pankgeorg/DarkMode")
    import DarkMode
    DarkMode.Toolbox(theme="lucario")
end

Limitations/Caveats

Some themes may not play well with live docs code (some classes are missing, but you can test using the arrows on the dropdown!)
CSSDarkMode's default is not to darken the whole UI but only code blocks! Pass darkenPluto=true to get a really dark Pluto!
Please use each Opt-in once in each notebook!
Wide mode hides docs (what will probably change in the future)

Next steps

Make this a toolbar?
Integrate parts in Pluto?

Pocket-titan / DarkMode