CSS auto dark mode?

[trentbuck]

Static CSS can automatically switch to "dark theme".
It would be nice if klaus had this (github does since about 2021).
Looking at https://github.com/jonashaag/klaus/blob/master/klaus/static/klaus.css I'm not sure if you can just leave the colors where they are and shove an "if dark then color1 else color2" around each one...

https://caniuse.com/prefers-color-scheme
https://css-tricks.com/dark-modes-with-css/
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[jonashaag]

Great idea. Do you want to come up with an initial version?

The CSS desperately needs a remake so if you feel like it, feel free to create an entirely new one. Feel free to use a CSS framework like Tailwind.

[trentbuck]

On Sun 08 Jan 2023 22:19:06 -0800, Jonas Haag wrote: Great idea. So you want to come up with an initial version?

Honestly, no. :-) I only know CSS well for prepress (i.e. https://www.princexml.com/), and my klaus deployment is for legacy repos I'm supposed to deprecate, not encouraging users to keep using. :-) I can't justify spending much time on it. The last time I did something like this I pretty much just started with :root { color: cmyk(0, 0, 0, 0); background: cmyk(0, 0, 0, 1); } And then added exception for anything that was invisible. Probably that's a bit too lofi for regular humans.

[jonashaag]

not encouraging users to keep using

Anything in particular that can be improved in klaus?

[trentbuck]

On Mon 09 Jan 2023 00:32:57 -0800, Jonas Haag wrote: > not encouraging users to keep using Anything in particular that can be improved in klaus?

dark mode was the main thing that jumped out at me :-) I suppose the other thing I noticed is with a narrow screen (like a smartphone) you still get a left/right layout (file list / commit list). With flexbox you can set it up to automatically reflow from left/right to above/below. It requires a little bit of trial and error with how the divs are laid out. Looks like you can test that in firefox using Ctrl+Shift+M. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox It would also be nice if I could link to a range of lines with shift+click, like github does. e.g. https://github.com/jonashaag/klaus/blob/master/klaus/static/pygments.css#L22-L26 These are all nitpicky things -- overall I was quite happy with klaus. The use of pygments/docutils/markdown were pleasant additions.

[jonashaag]

Thanks for the feedback! Yeah CSS remake is long overdue.

[trentbuck]

On Mon 09 Jan 2023 05:51:32 -0800, Jonas Haag wrote: Thanks for the feedback! Yeah CSS remake is long overdue.

I found another super annoying one. If in ./README.rst you do .. WARNING:: NEVER DO THIS Never stick more than 7 pennies up your nose. Then right now "WARNING" looks like ordinary <p> text, which kinda sucks. I fixed this recently in gitit, the quick fix I did was uh... trentbuck/gitit-bootstrap-theme@421b3e3 Which then looks like this: <attached>

[trentbuck]

Let me try those attachments again, but inside a browser.