Introduce a Dark Theme #4

Merged
jtbx merged 2 commits from styling-improvements into main 2024-05-26 12:14:06 +02:00
Showing only changes of commit 1eb181567c - Show all commits

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;
}