feat: follow system preference dark mode

This commit is contained in:
Ayo Ayco 2024-04-30 21:14:43 +02:00
parent 4675c6a6fa
commit f2a3ccf666

View file

@ -32,7 +32,6 @@
header, footer { header, footer {
background: linear-gradient(45deg, #3054bf, #416fff); background: linear-gradient(45deg, #3054bf, #416fff);
color: white; color: white;
border-radius: 5px;
& a { & a {
color: white; color: white;
} }
@ -48,7 +47,6 @@
} }
.card { .card {
margin-left: -40px; margin-left: -40px;
background-color: #fff;
display: grid; display: grid;
grid-template-columns: 55px auto; grid-template-columns: 55px auto;
gap: 5px; gap: 5px;
@ -173,6 +171,41 @@
display: inline; display: inline;
width: 50px; width: 50px;
} }
@media (prefers-color-scheme: dark) {
html, body {
background: #212529;
color: #f8f9fa;
}
main a {
color: orange;
}
.card_content {
& .action {
color: orange;
}
& .heading .author a {
color: #f8f9fa;
}
& .body {
code {
background: rgb(45, 51, 59);
color: rgb(197, 209, 222);
}
& .media, & .link_card {
border: 1px solid rgba(197, 209, 222, 0.15);
color: #888;
}
& .media:hover, & .link_card:hover {
color: orange;
text-decoration-color: orange;
border-color: orange;
}
}
}
}
</style> </style>
</head> </head>
<body> <body>