Websitelerine dark mode(kodu mod – karanlık modu) görünümü kaznadırmak ve dark mode hakkında birkaç yazı eklemiştim;
- Websitesine kolayca dark mode eklemek
- JavaScript ile dark mode sorgulamak
- HTML ile görsellerde dark mode seçeneği
- Chrome, Opera ve Firefox Dark modu
AMP sayfalarına da dark mode seçeneği eklemek mümkün, nasıl yapacağımızı ve örnek paylaşacağım.
AMP bildiğiniz gibi açılımı; “Hızlandırılmış Mobil Sayfalar / Accelerated Mobile Pages”, hızlandırılmış mobil sayfalar yapısı ile oluşturulan sayfaları yüksek performanslarla telefonlarda erişim imkânı tanımaktadır. Yüksek performans ve katılım ile kullanıcılara mükemmel bir internet deneyimi yaşatmak içi neredeyse sayfa yükleme oranlarını ortadan kaldırmaktadır. Mobil ve masaüstü uygulamalarında yüksek katılımlara ulaşmaktadır.
AMP sayfalarında neler yapabileceğimiz ile ilgili örnek fikirler verebilen bir playground sayfası var erişmek için: playground.amp.dev.
AMP sayfalarında Dark Mode eklemek için örnek kod aşağıdaki gibi:
<!--
## Introduction
This sample demonstrates how to use dark mode. It shows both `prefers-color-scheme`
as well as a manual toggle for people on non-supporting browsers.
You can read more about `prefers-color-scheme` in the article
https://web.dev/prefers-color-scheme.
-->
<!-- -->
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://preview.amp.dev/./Dark_Mode_Toggle.html">
<meta name="viewport" content="width=device-width">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Dark Mode</title>
<style amp-custom>
.wrapper{
--padding: 0.25rem;
color: black;
background-color: white;
padding: var(--padding);
}
@media (prefers-color-scheme: dark){
.wrapper, .wrapper h1{
color: white;
background-color: black;
}
#dark-mode-checkbox,
#dark-mode-label{
display: none;
}
}
#dark-mode-checkbox:checked ~ *{
color: white;
background-color: black;
}
#dark-mode-checkbox,
#dark-mode-label{
position: absolute;
}
#dark-mode-checkbox{
display: none;
}
</style>
<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>
</head>
<body>
<div>
<input id="dark-mode-checkbox" type="checkbox">
<label id="dark-mode-label" for="dark-mode-checkbox">Turn on dark mode</label>
<div class="wrapper">
<h1>Dark Mode Sample</h1>
<ul>
<li>
On browsers that support <code>prefers-color-scheme</code> and report the user prefers <code>dark</code>,
just obey and don’t give the user an override option, since they clearly state they like dark.
</li>
<li>
On browsers that support <code>prefers-color-scheme</code> and report the user prefers <code>light</code>
or <code>no-preference</code>, offer the option to toggle dark mode manually.
</li>
<li>
On browsers that don’t support <code>prefers-color-scheme</code>,
offer the option to toggle dark mode manually.
</li>
</ul>
</div>
</div>
</body>
</html>Aslında kısaca CSS’de cihazın dark mode kullanıp kullanıp kullanmadığını sorgulamak AMP’de de çalışıyor diyebiliriz.
/* Dark mode */
@media (prefers-color-scheme: dark){
body{
background-color: black;
color: white;
}
}