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:
parent
576a6c4c56
commit
1eb181567c
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue