Activate dark mode

[dometto]

Resolves #1893.

• Dialogs don't use primer's dark mode styling, since we use our own dialog code and CSS
• activate dark theme for memaid
• Equally for the spinners
• The ACE editor shows an ugly vertical line, probably because it isn't auto-configured to use dark mode
• Update $border-standard definition
• Update CSS for.toc and .toc_title
• Update CSS for highlights (?)
• Update CSS in editor.scss
• Update syntax highlighting CSS in highlights.scss (not sure -- does this need separate colours in dark mode?)
• Check background colour of code blocks in dark mode
• Update CSS for help block (in editor)
• Check all octicon occurrences, including the fillcolor (which is currently set to black)
  • Note: octicons are also generated by Macros. To support them in dark mode, we should look into using the filter trick for all svg's with the octicon class.

Please feel free to add to this todo and work on this branch!

[dometto]

I've rebased this after merging #1914. Here's a screenshot of a page so we can see what needs tweaking:

[dometto]

For posterity:

Since we're including the octicon SVG as content, we can't style it as a normal element (for instance by setting the fill color for svg path). This is a trick to transform the color of the svg. I used this to calculate the filters needed to get the color we want (which is just the main text color in dark mode).

[svoop]

@dometto With gollum/gollum-lib#441, the last box can be checked, can't it? (Btw, would love to help, but I'm pretty useless with CSS.)

[bartkamphorst]

CSS styling for the help section also needs work.

[bartkamphorst]

Still not perfect with the borders, but a little better overall nonetheless.

[bartkamphorst]

This resolves the styling of the TOC.

[bartkamphorst]

To ensure proper styling of the mermaid diagrams, we not only have to tell mermaid to use the dark theme, but ensure that the enclosing iframes get styled.

[bartkamphorst]

To ensure proper styling of the mermaid diagrams, we not only have to tell mermaid to use the dark theme, but ensure that the enclosing iframes get styled.

So, this turns out to be a little more involved than I had anticipated, mostly because we use mermaid's sandbox security level. Normally, mermaid diagrams will be responsive to dark mode automatically; however, in sandbox mode, they are not. I've managed to work around this by checking for dark mode before rendering and listening for color scheme change to rerender the diagrams if needed. However, this does require storing the source of diagrams somewhere. I've opted to simply add the source to a hidden div, but we could also try to save it to localStorage or something.

[bartkamphorst]

Also, to make mermaid responsive to my theme directive, I had to upgrade to v. 10.6.0.

[bartkamphorst]

Before:

After:

[bartkamphorst]

Manually adding

<meta name="color-scheme" content="light dark">

to the head of the iframe has the effect I'm after.

Unfortunately, we cannot manipulate the contents of the iframe ourselves because this is considered cross-origin scripting (Uncaught DOMException: Permission denied to access property "document" on cross-origin object).

I'm not sure how to proceed from here. We could leave it (and have white background), or try to open an issue with mermaid (though they are already overburdened with issues and PRs). @dometto @benjaminwil Any ideas?

[benjaminwil]

I haven't really dug into Mermaid at all yet and don't feel like I can weigh in fully. But as long as Mermaid documents remain readable, even if they don't fully respect dark mode, I think this is okay for the time being.

So, this turns out to be a little more involved than I had anticipated, mostly because we use mermaid's sandbox security level. Normally, mermaid diagrams will be responsive to dark mode automatically; however, in sandbox mode, they are not.

When you say responsive, do you mean when flipping the browser (or system) theme between light and dark without reloading the Gollum webpage?

[bartkamphorst]

When you say responsive, do you mean when flipping the browser (or system) theme between light and dark without reloading the Gollum webpage?

Exactly.

[benjaminwil]

Is everything working as expected on reload?

[bartkamphorst]

Is everything working as expected on reload?

In my limited test setup, everything (with respect to mermaid) works as I expect it to. I'm on OS X, toggling the System's Light and Dark mode and seeing how Firefox (119.0) responds. On page reload the correct color scheme is detected and passed to mermaid. When the color scheme changes, gollum detects this and rerenders the mermaid diagrams. Others are very welcome to take this branch for a spin. Maybe @chiragthakur09 has anything to add?

[chiragthakur09]

Is everything working as expected on reload?

In my limited test setup, everything (with respect to mermaid) works as I expect it to. I'm on OS X, toggling the System's Light and Dark mode and seeing how Firefox (119.0) responds. On page reload the correct color scheme is detected and passed to mermaid. When the color scheme changes, gollum detects this and rerenders the mermaid diagrams. Others are very welcome to take this branch for a spin. Maybe @chiragthakur09 has anything to add?

I also have the same setup, OS X, toggled systems theme mode between light and dark. In fact it didn't require me to reload the page. Themes got rendered in real time as I kept toggling between light and dark.

Currently I am in the middle of a job switch, relocating to a new city. I won't be able to contribute further on the issue for some time.

[dometto]

I'm not sure how to proceed from here. We could leave it (and have white background), or try to open an issue with mermaid (though they are already overburdened with issues and PRs).

I also think the white background is ok for now, but we should also open an issue with mermaid. :) I opened a bug report there and it was picked up in a couple of month. Even if it takes longer this time, we'll eventually be able to have nice looking dark. mode diagrams.

Thanks for continuing work on this PR, @bartkamphorst!

[bartkamphorst]

we should also open an issue with mermaid.

Done. See mermaid-js/mermaid#5034.