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:
luca0N! 2022-06-08 15:57:01 -03:00
parent 5e40e44cc8
commit ba5dba9664
Signed by: luca0N
GPG Key ID: 2E7B4655CF16D7D6
1 changed files with 32 additions and 30 deletions

View File

@ -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) {