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

text, which kinda sucks.

I fixed this recently in gitit, the quick fix I did was uh...

https://github.com/trentbuck/gitit-bootstrap-theme/commit/421b3e304887c29882fd37f1ba68bd912a258556

Which then looks like this:

[trentbuck]

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