forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathamp-toggle-theme.html
76 lines (74 loc) · 4.94 KB
/
amp-toggle-theme.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- ## Setup -->
<link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-toggle-theme/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<style amp-custom>
.is-dark-mode {
background-color: #20202A;
color: #FFF;
}
</style>
<body data-prefers-dark-mode-class="is-dark-mode">
<main>
<button on="tap:AMP.toggleTheme()">Toggle Mode</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Eget arcu dictum
varius duis at. Volutpat consequat mauris nunc congue. Ultrices sagittis
orci a scelerisque purus. Feugiat pretium nibh ipsum consequat nisl vel
pretium lectus quam. Id aliquet lectus proin nibh nisl condimentum id.
Facilisis sed odio morbi quis commodo odio aenean sed adipiscing. Non
curabitur gravida arcu ac. In egestas erat imperdiet sed euismod. Eu
lobortis elementum nibh tellus. In nisl nisi scelerisque eu ultrices.
Leo in vitae turpis massa sed elementum tempus egestas sed. Id neque
aliquam vestibulum morbi blandit cursus risus at. Dui accumsan sit amet
nulla facilisi morbi tempus. Integer eget aliquet nibh praesent
tristique magna sit amet. Nibh ipsum consequat nisl vel pretium lectus
quam id. Vel turpis nunc eget lorem dolor. Dignissim sodales ut eu sem
integer vitae justo. Amet est placerat in egestas erat imperdiet sed.
Vulputate dignissim suspendisse in est ante. Eleifend donec pretium
vulputate sapien. Magna sit amet purus gravida quis blandit turpis.
Morbi tristique senectus et netus et malesuada fames. Nec feugiat nisl
pretium fusce. In fermentum et sollicitudin ac orci phasellus egestas
tellus. Eget nunc lobortis mattis aliquam faucibus. Arcu cursus vitae
congue mauris rhoncus aenean vel elit. Turpis egestas sed tempus urna
et. Nulla facilisi morbi tempus iaculis urna id volutpat lacus laoreet.
Ullamcorper eget nulla facilisi etiam. Cras sed felis eget velit aliquet
sagittis id consectetur purus. Diam volutpat commodo sed egestas egestas
fringilla phasellus faucibus scelerisque. Odio facilisis mauris sit amet
massa vitae tortor. Interdum consectetur libero id faucibus nisl. Ipsum
nunc aliquet bibendum enim facilisis gravida neque convallis a. In
fermentum et sollicitudin ac orci phasellus egestas. Eu mi bibendum
neque egestas congue quisque. Et netus et malesuada fames ac. Nam libero
justo laoreet sit amet cursus sit amet. Magna fringilla urna porttitor
rhoncus dolor purus. Cursus turpis massa tincidunt dui ut ornare. Mauris
sit amet massa vitae tortor. Nisi est sit amet facilisis. Lobortis
feugiat vivamus at augue eget. Sit amet consectetur adipiscing elit
pellentesque. Dignissim sodales ut eu sem integer vitae. Libero justo
laoreet sit amet cursus sit amet dictum sit. Nulla pellentesque
dignissim enim sit amet. Tincidunt dui ut ornare lectus sit. Volutpat ac
tincidunt vitae semper quis lectus nulla at. Diam volutpat commodo sed
egestas egestas fringilla phasellus faucibus. Duis at tellus at urna
condimentum mattis pellentesque. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Suspendisse potenti nullam ac tortor
vitae purus faucibus ornare. Eget magna fermentum iaculis eu non. Enim
nec dui nunc mattis enim ut tellus. Quam viverra orci sagittis eu
volutpat odio facilisis mauris sit. Orci a scelerisque purus semper eget
duis. Sit amet nisl suscipit adipiscing bibendum est ultricies. In
iaculis nunc sed augue. Amet nulla facilisi morbi tempus iaculis urna id
volutpat lacus. Eros in cursus turpis massa tincidunt dui ut ornare.
Pharetra et ultrices neque ornare aenean. Enim sed faucibus turpis in eu
mi bibendum neque. Sit amet commodo nulla facilisi nullam vehicula ipsum
a arcu. Eget felis eget nunc lobortis mattis aliquam faucibus purus in.
Massa massa ultricies mi quis. Aenean vel elit scelerisque mauris.
Tristique risus nec feugiat in fermentum posuere.
</p>
</main>
</body>
</html>