Kullanıcı tercihine göre Drupal 8 (veya 9)'da Karanlık ve Açık Mod arasında nasıl geçiş yapılır

Kullanıcılarınıza arayüzlerini tercihlerine göre özelleştirme özgürlüğü vermek ne kadar harika olurdu? Birçok kullanıcı açık renkli bir arayüzü (koyu metinli açık renkli arka plan) tercih ederken, bazı kullanıcılar koyu renkli bir arayüz (açık metinli koyu renkli arka plan) seçer. Daha koyu arayüzler havalı ve modaya uygun olarak algılanırken, bazıları özellikle ekranın önünde çok fazla zaman harcayan geliştiriciler için göz yorgunluğunu azalttığına inanıyor. Kullanıcılarınıza bir seçenek sunmanın erişilebilirlik ve kullanıcı deneyimi açısından muazzam bir kazanç olduğuna inanıyorum. Bunu başarmanın birkaç yolu vardır. Bu yazıda, koyu/açık web tasarım modları arasında nasıl geçiş yapılacağını ve bunun Drupal 8 veya Drupal 9'da nasıl uygulanacağını tartışacağız.

Bunu uygulamak için iki yönteme odaklanacağız -
1. Yalnızca CSS kullanmak.
2. CSS ve JS geçiş anahtarını uygulama

Yalnızca CSS kullanma

Herhangi bir web sitesinde yalnızca CSS ile Karanlık moda ulaşmak için bazı sistem gereksinimleri akılda tutulmalıdır. Böyle önemli bir gereksinim, sistem genelinde karanlık moddur . Bir kullanıcı bilgisayarında koyu modu kullanmayı tercih ederse, kullanıcıya üzerinde açık metin bulunan koyu renkli bir arka plan gösteren bir web sitesi sunulur. Tercihler-renk şeması (medya sorgusu), kullanıcının sistemden açık veya koyu renk teması kullanmasını isteyip istemediğini belirlemek için kullanılır.

Uygulama:

1. CSS değişkenlerini bildirin.
2. Gerektiğinde değişkenleri kullanın.

Sonuç:

Not: Sonucu bazı desteklenmeyen cihazlarda taklit etmek için F12 tuşuna basarak DevTool'a girmeniz yeterlidir. Ardından, CTRL+SHIFT+P tuşlarına basın, ardından tercihler-renk şeması: koyu öğesini arayın ve enter tuşuna basın.

CSS ve JS geçiş anahtarını uygulama

Bu yaklaşımla gideceksek, sistem gereksinimleri hakkında endişelenmemize gerek yok. Sadece birkaç satır CSS ve JS yazın ve hazır olmalısınız. Değişkenleri başlattıktan sonra, stil sayfalarımızda bu değişkenlere referans verebiliriz. Bu, karanlık ve aydınlık mod arasında geçiş yapmak için HTML yapısı olacaktır.

Ve bazı CSS satırları bu geçişle sonuçlanmalıdır.

Son kısım, hepsini birbirine bağlamak için biraz JavaScript eklemektir.
● Gelecekteki ziyaretler için kullanıcı tercihini saklayın
● Web sitesi yüklendiğinde kayıtlı kullanıcı tercihini (varsa) kontrol edin

Bu kadar! Aşağıdaki tam demoya göz atın.

Veya demoyu görüntülemek için buraya tıklayın.

Drupal 8'de (veya Drupal 9) Dark / Light Toggle'ı Uygulama

Özel bir Drupal 8 teması oluşturmaya başlamak için lütfen buradaki harika makaleye bakın. Şimdi, Drupal 8 veya Drupal 9'da karanlık tema/açık temanın nasıl kullanılacağını göstermek için bir tema oluşturmaya başlayalım.

Dosya yapısı şöyle görünecektir:

Şimdi page.html.twig içindeki başlık bölümünü aşağıdaki kodla güncelleyin.

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

HTML yapısının geri kalanı tasarımınıza veya gereksinimlerinize bağlı olacaktır.
HTML yapısıyla işiniz bittiğinde, öğeleri CSS'de şekillendirerek güzel görünmelerini sağlamanın zamanı geldi.
İlk olarak, Açık/Koyu modunda renklerden sorumlu olacak tüm varsayılan değişkenleri oluşturmalısınız.

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

Değişkenleri tanımlamayı bitirdiğinize göre, gerekli sonucu elde etmek için Header bölümüne stil ekleme zamanı.

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

Stilin gereksinimlerinize göre değişebileceğini lütfen unutmayın. Tüm stillerden sonra, şimdi Jquery kodunda bazı işlevler yazmanın zamanı geldi. Jquery kodu şöyle görünecek (bizim durumumuzda script.js)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

Ayrıca JS ve CSS dosyalarınızı theme_name.libraries.yml dosyanızın içine eklemeyi unutmayın.

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

Şimdi sonucu görmek için site önbelleğini temizleyin. Nihai sonucunuz şöyle görünmelidir: