/
githubmirror
/
amphtml
Обзор
Документация
Войти
/
githubmirror
/
amphtml
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
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:17
b6124cb
Код
Авторство
О чём код?
<!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>