-
Notifications
You must be signed in to change notification settings - Fork 1
/
themes.html
56 lines (48 loc) · 1.68 KB
/
themes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: pink;
margin: 0;
}
* {
color: var(--text-color);
}
.light, .dark {
background-color:var(--background-color);
}
@font-palette-values --Contextual {
font-family: bungee;
base-palette: 0;
override-colors:
0 var(--text-color),
1 var(--background-color);
}
.light {
color: black;
--background-color: white;
}
.dark {
color: white;
--background-color: black;
}
</style>
</head>
<body>
<div class="light">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates nulla sint vel deleniti at repudiandae possimus similique fugit eligendi voluptatem laborum cum maxime explicabo impedit autem omnis tempore veniam ratione, distinctio suscipit rem unde deserunt blanditiis obcaecati? Assumenda, rem deserunt.</p>
</div>
<div style="padding: 24px;" class="dark">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, neque.</p>
<div style="padding: 8px;" class="light">
<p style="margin: 24px;" >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque quibusdam sunt ea ullam dicta, distinctio id quia esse illum corrupti?</p>
<p style="padding: 8px;" class="dark">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam non esse maiores necessitatibus voluptates eius odit explicabo asperiores nemo quaerat.</p>
</div>
</div>
</body>
</html>