Kategoriler
Kodlama

AMP Dark Mode

AMP sayfalarında da Dark Mode kullanabilirsiniz.

Websitelerine dark mode(kodu mod – karanlık modu) görünümü kaznadırmak ve dark mode hakkında birkaç yazı eklemiştim;

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>

Kaynak: https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fstyle-layout%2Fdark_mode_toggle

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;
   }
}
Websitesine kolayca dark mode eklemek – Herhangi bir web sitesine veya uygulamaya dark mode(Koyu renk, karanlık tema veya gece modu) uygulamak.
HTML ile görsellerde dark mode seçeneği – Resimleri kullanıcının tercih ettiği renk düzenine göre değiştirebileceğinizi biliyor muydunuz?