Activate dark mode #1938
Activate dark mode #1938
Conversation
|
I've rebased this after merging #1914. Here's a screenshot of a page so we can see what needs tweaking: |
| @@ -53,6 +53,9 @@ h6 { | |||
|
|
|||
| &:before { | |||
| content: url('data:image/svg+xml;utf8,<%= rocticon_css(:link) %>'); | |||
| @media (prefers-color-scheme: dark) { | |||
| filter: invert(95%) sepia(4%) saturate(753%) hue-rotate(178deg) brightness(88%) contrast(92%); | |||
There was a problem hiding this comment.
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).
462d410 to
2f6b808
Compare
Co-authored-by: chiragthakur09 <chiragthakur09@gmail.com>
|
@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.) |
|
CSS styling for the help section also needs work. |
|
Still not perfect with the borders, but a little better overall nonetheless. |
|
This resolves the styling of the TOC. |
|
To ensure proper styling of the mermaid diagrams, we not only have to tell mermaid to use the |
So, this turns out to be a little more involved than I had anticipated, mostly because we use mermaid's |
|
Also, to make mermaid responsive to my theme directive, I had to upgrade to |
|
Before: After: |
|
Manually adding <meta name="color-scheme" content="light dark">to the Unfortunately, we cannot manipulate the contents of the iframe ourselves because this is considered cross-origin scripting ( 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? |
|
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.
When you say responsive, do you mean when flipping the browser (or system) theme between light and dark without reloading the Gollum webpage? |
Exactly. |
|
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 ( |
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. |
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! |
Done. See mermaid-js/mermaid#5034. |
Resolves #1893.
$border-standarddefinition.tocand.toc_titleeditor.scsshighlights.scss(not sure -- does this need separate colours in dark mode?)filtertrick for all svg's with the octicon class.Please feel free to add to this todo and work on this branch!