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	/* Indica que esta página soporta los
13	* temas claro y oscuro */
14	html {
15	color-scheme: light dark;
16	}
17
18	/* Reglas solo para el tema claro. El
19	* color del fondo debe ser
20	* preferentemente claro y el color de
21	* texto dene ser oscuro. */
22	@media (prefers-color-scheme: light) {
23	html {
24	--backgroundColor: yellow;
25	--color: blue;
26	}
27	}
28
29	/* Reglas solo para el tema oscuro. El
30	* color del fondo debe ser
31	* preferentemente oscuro y el color de
32	* texto dene ser claro. */
33	@media (prefers-color-scheme: dark) {
34	html {
35	--backgroundColor: blue;
36	--color: yellow;
37	}
38	}
39
40	h1 {
41	color: var(--color);
42	background-color:
43	var(--backgroundColor)
44	}
45	</style>
46
47	</head>
48
49	<body>
50
51	<h1>color-scheme</h1>
52
53	<p>
54	Este ejemplo usa color-scheme.
55	</p>
56
57	</body>
58
59	</html>