Merge pull request #9 from rramiachraf/6-feature-request-a-prefers-color-scheme-dark-mode

feat: add support for `prefers-color-scheme`
This commit is contained in:
Achraf RRAMI 2022-12-17 22:04:22 +00:00 committed by GitHub
commit ea116f1bb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -57,6 +57,12 @@ body {
flex-grow: 1;
}
#lyrics a {
color: inherit;
cursor: initial;
}
/*** NOT YET IMPLEMENTED
#lyrics a {
background-color: #ddd;
color: inherit;
@ -65,6 +71,7 @@ body {
#lyrics a:hover {
background-color: #ccc;
}
***/
nav {
background-color: #ffcd38;
@ -208,7 +215,7 @@ footer {
footer a {
font-weight: 500;
color: #1b1a17;
transition: .3s ease text-decoration;
transition: 0.3s ease text-decoration;
font-size: 1.4rem;
text-transform: uppercase;
}
@ -222,3 +229,42 @@ footer a:hover {
flex-direction: column;
min-height: 100vh;
}
/* dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #181d31;
}
nav, footer {
background-color: #fec260;
}
#lyrics {
color: #ccc;
}
#metadata h1 {
color: #ddd;
}
#metadata h2, #credits p {
color: #eee;
}
#title {
color: #ddd;
}
#about p, #credits summary {
color: #ccc
}
#home h1 {
color: #eee;
}
#home p {
color: #ddd;
}
}