M. `color-scheme`

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>color-scheme</title>
8	<meta name="viewport"
9	content="width=device-width">
10
11	<style>
12	html {
13	color-scheme: light dark;
14	}
15
16	@media (prefers-color-scheme: light) {
17	html {
18	--color: yellow;
19	--backgroundColor: blue;
20	}
21	}
22
23	@media (prefers-color-scheme: dark) {
24	html {
25	--color: blue;
26	--backgroundColor: yellow;
27	}
28	}
29
30	h1 {
31	color: var(--color);
32	background-color: var(--backgroundColor);
33	}
34	</style>
35
36	</head>
37
38	<body>
39
40	<h1>color-scheme</h1>
41
42	<p>
43	Este ejemplo usa color-scheme.
44	</p>
45
46	</body>
47
48	</html>