Use CSS media block for dark theme
Moved CSS dark theme rules into a media dark theme to automatically use it if the user device is configured to prioritize dark themes.
This commit is contained in:
parent
5e40e44cc8
commit
ba5dba9664
|
@ -144,39 +144,41 @@ p {
|
||||||
/**************/
|
/**************/
|
||||||
/* Dark theme */
|
/* Dark theme */
|
||||||
/**************/
|
/**************/
|
||||||
body {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
}
|
}
|
||||||
|
|
||||||
main a {
|
main a {
|
||||||
color: #1ca6c6;
|
color: #1ca6c6;
|
||||||
transition: color 0.08s linear 0s;
|
transition: color 0.08s linear 0s;
|
||||||
}
|
}
|
||||||
main a:visited {
|
main a:visited {
|
||||||
color: #c658e6;
|
color: #c658e6;
|
||||||
}
|
}
|
||||||
main a:hover {
|
main a:hover {
|
||||||
color: #63cae1;
|
color: #63cae1;
|
||||||
}
|
}
|
||||||
header a {
|
header a {
|
||||||
color: #0d2f95;
|
color: #0d2f95;
|
||||||
transition: color 0.08s linear 0s;
|
transition: color 0.08s linear 0s;
|
||||||
}
|
}
|
||||||
header a:visited {
|
header a:visited {
|
||||||
color: #650a73;
|
color: #650a73;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
background-color: rgb(225, 178, 117);
|
background-color: rgb(225, 178, 117);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contentWarning {
|
.contentWarning {
|
||||||
color: black;
|
color: black;
|
||||||
background: linear-gradient(to top, rgb(238, 112, 0), rgb(255, 178, 30));
|
background: linear-gradient(to top, rgb(238, 112, 0), rgb(255, 178, 30));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
|
Loading…
Reference in New Issue