Add darkness

[supertassu]

Add dark mode support using prefers-color-scheme: dark CSS media query.

Explicitly set default background color in addition to text color in case any browser has non-black-on-white defaults.

Screenshots

  

closes #481

[supertassu]

force pushed since I made a typo in the commit message and wanted to correct it :(

[edk0]

It pains me to suggest adding yet another colour to the palette, but maybe link text could be a little lighter in dark mode?

[supertassu]

How does this look:

    --link-color-dark:        #00c8e8;
    --link-hover-color-dark:  #21a9c1;

[swantzter]

I don't know how well our postcss setup handles it, but I prefer changing variable values rather than the actual styles with media queries, for example

:root {
  --bg-color: #fff;
} 

@media (prefers-color-scheme: dark)
  :root {
    --bg-color: #000;
  }
}

this way you're very explicitly changing the palette, not the actual styles

[supertassu]

@swantzter I didn't even realize that was possible, I'll adjust the patch tomorrow.

[supertassu]

{{done}}

[swantzter]

I'm not sure you wanted --c-light as the border colour of the header?

[supertassu]

Fixed, thanks, also rebased against main.

[swantzter]

Hi sorry for not having had time to have a second look yet.

I have one last concern about tables (and less so about code-blocks/inline code) where I'm wondering if there's enough contrast between the body background and the row/element background. it's sometimes hard for me to distinguish table rows here, or code blocks.

I'm not sure what colour would be better, I might be able to experiment a little the next 5 minutes

[swantzter]

how would you feel about --c-shadow: var(--c-bg-light); in dark mode combined with changing tr:nth-child(odd)to tr:nth-child(even) on L349?

[supertassu]

how would you feel about --c-shadow: var(--c-bg-light); in dark mode combined with changing tr:nth-child(odd)to tr:nth-child(even) on L349?

@swantzter works for me, done in 616c533

[swantzter]

@supertassu awesome, can I make one last little request? in dark mode can we use the same box-shadow for the footer as we do for the navbar?

[swantzter]

or I should perhaps try that out myself first to see if it looks good. that shadow just feels a a little light to me

[swantzter]

okay after testing I feel like rgba(70, 70, 70, 0.5) looks better in dark mode for the footer

[supertassu]

@swantzter footer shadow color is also done now

[swantzter]

Thanks a lot @supertassu for making this PR!