Introduce a dark theme and color the links with new accent colors

The accent colors are based on the c3cat logos pink, but modified such
that they work nicely for links and for the light/dark theme.

Also make the light theme be lighter on the eyes.
This commit is contained in:
June 2024-05-23 23:23:16 +02:00
parent 576a6c4c56
commit 1eb181567c
Signed by: june
SSH key fingerprint: SHA256:o9EAq4Y9N9K0pBQeBTqhSDrND5E7oB+60ZNx0U1yPe0

View file

@ -1,7 +1,27 @@
:root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B;
/* A modified version of accent-color-light, which works nicely as a link color
* and with the dark theme */
--accent-color-dark: #dc49b0;
}
body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
text-align: left;
/* Use dark grey instead of black to be lighter on the eyes. But also a grey
* which still works with the link color nicely. */
background-color: #ffffff;
color: #2B2B2B;
@media (prefers-color-scheme: dark) {
/* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
/* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
background-color: #1b1b1b;
color: #ebebeb;
}
}
.container {
@ -19,6 +39,14 @@ img {
}
a:link, a:visited {
color: var(--accent-color-light);
@media (prefers-color-scheme: dark) {
color: var(--accent-color-dark);
}
}
.title {
text-align: center;
}