CodePen Embed - prefers-color-scheme

<h1>This is a demo of the CSS Media Queries Feature</h1>

<h2>@media (prefers-color-scheme) preference </h2>
<p>The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.</p>

body {
 text-align: center;
 background: #e78900;
 color: #fff;
}

@media (prefers-color-scheme: light) {
 body {
   background: #e78900;
 }
}

@media (prefers-color-scheme: dark) {
 body {
   background: #191a1a;
 }
}

This Pen is owned by Gift Egwuenu on CodePen.

See more by @lauragift21 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.