githubmirror/amphtml

examples/amp-toggle-theme.html
76 строк5 KB
Deepak Lalwani
✨ Register toggleTheme API action for dark mode support (#36958)
09 дек 2021, 22:17
09 дек 2021, 22:17b6124cb
<!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>