Dark mode in Mathematica

I occasionally work at low light environment (after the kids fall asleep), so I want to be able to reduce the brightness of my display. I use dark themes in the terminal and in vim. Most GUI apps I use are also set to use dark themes, at least after sunset. With Mathematica, it was a bit more difficult to achieve satisfactory results, but recently I learned a few tricks, and I’d call the result quite good. In fact, I am quite impressed by the result, so I decided I should summarize it here.

For TL;DR go to the very bottom

So the bare Mathematica looks like on the picture above.

Using a dark theme

The easiest first step is to use a custom dark theme. This can be done by executing the code below from within the notebook that we want restyled.

ResourceFunction["DraculaTheme"][]
(* (* Another option*) ResourceFunction["DarkMode"][] *)

The result with Dracula theme is on the screenshot below.

I would not call it particularly impressive, and the graphs are barely readable. On the other hand, it’s now much less bright.

The themes can be disabled by executing

ResourceFunction["DraculaTheme"][False]

from within the restyled notebook. Curiously, the “restyle-back” reverts the style of the current notebook to the default style of a Mathematica notebook. Given that I mostly use wls files (Wolfram language script) which initially look quite different from notebooks, that’s funny.

ResourceFunction apparently requires an internet connection. This question on stackexchange discusses ways to make these functions available offline.

Using a custom frontend.css

Using a theme leaves all the UI elements (menu bar, scroll bars etc) very bright. This is annoying, and the bright parts are now even more distractive. It turns out (see this answer, this question) that some UI elements can be restyled using a custom css file.

The css file named frontend.css should be placed in $UserBaseDirectory/Frontend, and I suppose that the filename is case-sensitive. On linux, $UserBaseDirectory is ~/.Mathematica, I guess on other systems, one has to evaluate this variable inside Mathematica to get the value.

I ended up using the css from this question. If the link dies, at the very bottom of this page there is a local copy stored on this site.

The result is as follows:

Note that the menu bar on the top and the scrollbar on the right are now mostly black.

Removing unnecessary UI elements

Well, the picture above is almost good, but there is still the ugly bottom bar with the magnification button. There can also be a toolbar on the top remaining bright, however, it has an option to hide it which I almost always use quite early. In Mathematica Student Edition there might be a toolbar which is not removable easily right below the menu bar. Still, most of these elements can be removed by executing

SetOptions[EvaluationNotebook[], 
 WindowElements -> {"VerticalScrollBar"}]

Documentation for WindowElements is here though it is not particularly informative. To revert the window elements back, we can open a blank notebook and evaluate there

Options[EvaluationNotebook[], WindowElements]
(* Out[1] = {WindowElements -> {"StatusArea", "MemoryMonitor", 
   "MagnificationPopUp", "HorizontalScrollBar", "VerticalScrollBar", 
      "MenuBar"}} *)

We can then use any combination of these to our liking.

An alternative would be

SetOptions[$FrontEnd, WindowElements ->
    (WindowElements /. Options[$DefaultFrontEnd, WindowElements])]

As I wrote above, I decided to keep only the vertical scrollbar. I would remove it as well because I never use it for scrolling (I never scroll by clicking anywhere on the bar), but it turns out that removing the vertical scrollbar also disables scrolling using the middle mouse button. It is still possible to navigate within the notebook using e.g. arrows or PageUp/PageDown though. There are ways to implement emacs shortcuts in Mathematica which would reduce the need of mouse scrolling. Once I become comfortable with that, I’d probably remove the vertical scrollbar as well.

Summary

To conclude, the darkest mode I could achieve is pictured above. It is done by executing the following code

ResourceFunction["DraculaTheme"][]
SetOptions[EvaluationNotebook[], WindowElements -> {"VerticalScrollBar"}]

and placing frontend.css in $UserBaseDirectory/FrontEnd.

I consider this a work in progress: vertical scrollbar could have been darker, and the bright vertical area next to it is quite annoying.

Note that none of these options persist after a restart, unless added to Mathematica’s startup files. I don’t want do that because permanent changes of the startup quite often have undesired side effects, and because most of my development is still in well-lit environments.

I hope these recipes can be useful for somebody, and would appreciate any corrections and suggestions how to improve them.