Dark mode?

[saxxie-dev]

Would adding dark mode be valuable enough to justify some extra scss complexity?

I'd be happy to handle it, albeit with no guarantees about whether the alternative color scheme is any good.

Proposal 1) CSS-only solution with prefers-color-scheme and some presumably heavy sass restructuring 2) Add a toggle override and store in localstorage.1lab.dark_mode : 'enabled' | 'disabled'

[plt-amy]

@SquidDev do you have any thoughts on this?

[SquidDev]

My main thought is I should be kept a long way away from this, as I'm terrible at theming :p.

That said, I think there's three steps we probably want to do here:

1. Switch over to CSS variables rather than SASS ones for colours. Then we can just change colour schemes by setting variables on :root.
2. Add a dark colour scheme using prefers-color-scheme. Picking the colours and making sure they look good everywhere is the hardest part for sure!
3. Add a JS toggle to override the browser default. Hopefully by this point we'll have unified our settings system a bit too!

[plt-amy]

@saxxie-dev If you feel up to refactoring our stylesheet to use CSS variables I'll be more than happy to merge that; No need to take a stab at coming up with a dark colour scheme, but ofc feel free to :)

[SquidDev]

Fiddling around with this, and hit a bit of a problem.

I'm not honestly sure how to fix this, at least if we want to support toggling dark mode with JS. Maybe we need to embed the SVG inline (like we do for KaTeX) instead of linking to a separate file.

@plt-amy, don't know if you have any thoughts?

[plt-amy]

What would embedding the SVG inline solve here?

[plt-amy]

I'm more concerned about commutative diagrams with arrows that cross over eachother, since iirc those have a solid background

[SquidDev]

What would embedding the SVG inline solve here?

Ahh, sorry! It allows us to style the SVG using the main page's CSS variables, so if we've got rules like body.dark-mode { --background: black; }, the SVG will pick up those - with images that's not the case.

[SquidDev]

I'm more concerned about commutative diagrams with arrows that cross over eachother, since iirc those have a solid background

Ahh yes, that is a little ugly.

[varkor]

I'm more concerned about commutative diagrams with arrows that cross over eachother, since iirc those have a solid background

Just a quick reply prompted by https://github.com/varkor/quiver/issues/139: it may be that you can get around this particular issue by using the background color option tikz-cd provides. E.g.

\documentclass{minimal}
\usepackage{tikz-cd}

\begin{document}

\pagecolor{gray}

% https://q.uiver.app/?q=WzAsMixbMCwwLCJBIl0sWzEsMCwiQiJdLFswLDEsImYiLDFdXQ==
\[\begin{tikzcd}[background color=gray]
    A & B
    \arrow["f"{description}, from=1-1, to=1-2]
\end{tikzcd}\]

\end{document}

(I shall reply to the quiver issue soon.)