<div>
<p>In dark mode, I'll be pink!</p>
</div>
$lightMode-Bg: white;
$lightMode-Modal: rgba(0,0,0,0.1);
$darkMode-Bg: black;
$darkMode-Modal: rgba(255,255,255,0.1);
$darkMode-Text: hotpink;
body {
background: $lightMode-Bg;
font-weight: 'bold';
text-align: center;
}
div {
background: $lightMode-Modal;
border-radius: 10px;
padding: 20px;
margin: 0 auto;
max-width: 400px;
}
p {
font-family: sans-serif;
font-weight: 600;
text-transform: uppercase;
}
@media(prefers-color-scheme: dark) {
body {
background-color: $darkMode-Bg;
}
div {
background-color: $darkMode-Modal;
}
p {
color: $darkMode-Text;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.