Karanlık mod popüler bir tercih haline geldi; bu nedenle sitelerinizde ve web uygulamalarınızda bu modu desteklemeye çalışmalısınız.
Son yıllarda karanlık mod, bir kullanıcı arayüzü seçeneği olarak önemli bir popülerlik kazandı. Daha açık metinle tamamlanan daha koyu bir arka plan sunar; bu, özellikle OLED ekranlarda yalnızca göz yorgunluğunu azaltmakla kalmaz, aynı zamanda pil ömrünü de korur.
CSS ve JavaScript kombinasyonunu kullanarak web sitelerinize ve web uygulamalarınıza nasıl karanlık mod seçeneği ekleyebileceğinizi keşfedin.
Karanlık Modu Anlamak
Karanlık mod alternatif bir renk şemasıdır web siteniz için geleneksel açık renkli arka planı karanlık bir arka planla değiştiren. Özellikle düşük ışık koşullarında sayfalarınızın gözlerinizi yormasını kolaylaştırır. Karanlık mod, kullanıcı dostu yapısı nedeniyle birçok web sitesi ve uygulamada standart bir özellik haline geldi.
Projenizi Kurma
Bunu uygulamadan önce, bir proje kurduğunuzdan ve üzerinde çalışmaya hazır olduğunuzdan emin olun. HTML, CSS ve JavaScript dosyalarınızı yapılandırılmış bir şekilde düzenlemelisiniz.
HTML Kodu
Sayfanızın içeriği için aşağıdaki işaretlemeyle başlayın. Bir ziyaretçi kullanabilecektir. tema__değiştirici Karanlık ve aydınlık mod arasında geçiş yapmak için öğe.
<body>
<navclass="navbar">
<spanclass="logo">Company Logospan><ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul><divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav><main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.
main>
<scriptsrc="./script.js">script>
body>
CSS Kodu
Örneğe stil vermek için aşağıdaki CSS'yi ekleyin. Bu, daha sonra karanlık mod görünümü için yeni stillerle zenginleştireceğiniz varsayılan ışık modu görevi görecektir.
@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}
.navbarspan { margin-right: auto; }
.logo { font-weight: 700; }
.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}
#theme__switcher { cursor: pointer; }
main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}
Şu anda arayüzünüz şöyle görünmeli:
CSS ve JavaScript Kullanarak Karanlık Modu Uygulama
Karanlık modu uygulamak için görünümünü CSS kullanarak tanımlayacaksınız. Daha sonra karanlık ve aydınlık mod arasındaki geçişi gerçekleştirmek için JavaScript'i kullanacaksınız.
Tema Sınıflarını Oluşturma
İki mod arasında kolayca geçiş yapabilmek için her tema için bir sınıf kullanın. Daha eksiksiz bir proje için, nasıl yapılacağını düşünmelisiniz. karanlık mod tasarımınızın her yönünü etkileyebilir.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Etkileşimli Öğeleri Seçme
Aşağıdaki JavaScript'i dosyanıza ekleyin script.js dosya. Kodun ilk kısmı, geçiş işlemini gerçekleştirmek için kullanacağınız öğeleri seçer.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Geçiş İşlevselliğini Ekleme
Daha sonra, ışık modu (ışık) ve karanlık mod (karanlık) sınıflar. Geçerli modu gösterecek şekilde geçiş anahtarını değiştirmenin de iyi bir fikir olduğunu unutmayın. Bu kod şunu yapar: bir CSS filtresi.
// Function to set the themefunctionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
bodyEl.classList.toggle("dark", theme "dark");
// If the theme is "light," add the "light" class, remove "dark" class,
bodyEl.classList.toggle("light", theme !== "dark");
// adjust filter of the toggle switch
themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}
// Function to toggle the theme between light and dark
functiontoggleTheme() {
setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}
themeToggle.addEventListener("click", toggleTheme);
Bu, geçiş kapsayıcısına bir tıklamayla sayfanızın temalarını değiştirmesini sağlar.
Karanlık Modu JavaScript ile Geliştirme
Karanlık mod sitelerinizi ziyaretçileriniz için daha keyifli hale getirebilecek aşağıdaki iki iyileştirmeyi göz önünde bulundurun.
Kullanıcı Tercihlerini Tespit Etme
Bu, web sitesi yüklenmeden önce kullanıcının sistem temasını kontrol etmeyi ve sitenizi buna göre ayarlamayı içerir. Bunu kullanarak nasıl yapabileceğiniz aşağıda açıklanmıştır: maçMedya işlev:
// Function to detect user's preferred themefunctiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
// Run the function to detect the user's preferred theme
detectPreferredTheme();
Artık sitenizi ziyaret eden her kullanıcı, cihazının mevcut temasıyla eşleşen bir tasarım görecektir.
Yerel Depolamayla Kalıcı Kullanıcı Tercihi
Kullanıcı deneyimini daha da geliştirmek için, yerel depolamayı kullan oturumlar arasında kullanıcının seçtiği modu hatırlamak için. Bu, tercih ettikleri modu tekrar tekrar seçmek zorunda kalmamalarını sağlar.
functionsetTheme(theme) {
bodyEl.classList.toggle("dark", theme "dark");
bodyEl.classList.toggle("light", theme !== "dark");themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
// Setting the theme in local storage
localStorage.setItem("theme", theme);
}// Check if the theme is stored in local storage
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}
Kullanıcı Odaklı Tasarımın Benimsenmesi
Karanlık mod, görünümün ötesine geçiyor; Kullanıcı konforunu ve tercihlerini ilk sıraya koymakla ilgilidir. Bu yaklaşımı takip ederek kullanıcı dostu arayüzler oluşturabilir ve tekrar ziyaretleri teşvik edebilirsiniz. Kodlama ve tasarım yaparken kullanıcı sağlığına öncelik verin ve okuyucularınıza daha iyi bir dijital deneyim sunun.