WordPress Sitenize Koyu Modu Hızlıca Ekleme

Birden fazla cihaz artık karanlık modu desteklediğinden, WordPress sitenize karanlık mod eklemek isteyebilirsiniz. WP Dark Mode adlı ücretsiz bir WordPress eklentisiyle bunu başarmak kolaydır . Gelişmiş bir kullanıcıysanız, özel karanlık mod CSS eklemek için karanlık mod medya sorguları da ekledim.

Bir Eklenti Kullanarak WordPress Sitenize Hızlıca Karanlık Mod Ekleme

WordPress sitenize karanlık mod eklemenin en kolay yolu, WP Dark Mode eklentisini kullanmaktır . WordPress sitenize karanlık bir tema eklemenin birçok yolu vardır, ancak önce bu kullanımı kolay eklentiyi kullanacağız.

WP Dark Mode, web sitenize kolayca karanlık mod eklemenizi sağlar. Diğer herhangi bir WordPress eklentisini eklediğiniz gibi sitenize ekleyebilirsiniz .

Wordpress.org Repo'da WP Dark Mode
WordPress.org Repo’da WP Dark Mode

Eklentiyi etkinleştirdikten sonra, sitenizde kullanıcıların siteyi hızlı bir şekilde karanlık moda (veya açık moda) değiştirmesine izin veren bir düğmeye sahip olacaksınız.

WP Dark Mode geçiş düğmesi
WP Dark Mode geçiş düğmesi

Ek olarak, eklenti, kullanıcının cihazındaki karanlık tema seçeneğiyle eşleştirme seçeneğine sahiptir. Dolayısıyla, birisi cihazında karanlık modu kullanıyorsa, siteniz doğru bir şekilde görünecektir. Ayrıca, kullanıcı sitenin hafif sürümünü isterse, ay düğmesini kullanarak temalar arasında geçiş yapabilir.

MacOS'ta koyu mod etkin

WP Dark Mode eklentisi bir dizi ayar sunar. WordPress yöneticisinin karanlık mod olması için bir seçeneği bile var. Ayrıca, kullanıcıların stiller arasında geçiş yapmasını sağlayan düğmenin stilini de kontrol edebilirsiniz. Ayrıca, düğmenin konumunu kontrol edebilir ve hatta herhangi bir sayfaya karanlık mod geçişini koymak için dahil olan kısa kodu kullanabilirsiniz.

WP Karanlık mod ayarları sayfası
WP Dark Mode ayarlar sayfası

Bu eklentinin en iyi yanı, sitenizi otomatik olarak karanlık moda dönüştürmesidir. Şimdi bu, her site için mükemmel olmayabilir, özellikle sitenizi sıfırdan oluşturduysanız ve her özelliği kontrol etmek istiyorsanız.

Aşağıda CSS kullanarak kendi karanlık temanızı nasıl oluşturacağınız anlatılmaktadır.

CSS ile Koyu Mod Stil Sayfası Oluşturma

Daha ileri düzeydeyseniz ve CSS’ye aşinaysanız, ortam sorgusu tercih edilen renk şeması: koyu ile koyu modu hedefleyebilirsiniz. Bu, stilleri yalnızca karanlık moda ayarlanmış tarayıcılara uygulayacaktır. Örneğin, bir kullanıcı iOS14’te koyu modu etkinleştirdiyse, tercihler-renk-şema medya sorgusundaki stilleri etkinleştirecektir.

/ * CSS için koyu mod renk şeması örneği * /
@media ( renk düzenini tercih eder : koyu) {
body {
arka plan rengi : # fff ;
renk : # 000 ;
}
img {
opaklık : .8 ;
geçiş : opaklık .3 s kolay giriş;
}
img : hover {
opaklık : 1 ;
}
}
Cevap bırakın

E-posta hesabınız yayımlanmayacak.