CSS'de hafif veya koyu modlar nasıl uygulanır

Sep 10, 2025
Nasıl Yapılır
Use light and dark mode in CSS

CSS şartnamesi hiç gelişmektedir. CSS'de yeni özelliklerin uygulanması için işlem karmaşıktır, ancak basitleştirilmiş versiyon, CSS çalışma grubunun, belirtilenlere eklenecek yeni elementlere karar vermesidir. Bu yeni elemanları uygulamak için tarayıcılara kadar olan tarayıcıların ve tarayıcıları uygulamanın hangi sırasına göre uygulamasını seçer, bu yüzden şimdi yeni özellikler için bir destek uyumsuzluğumuz var. Bu, zaman zaman can sıkıcı olsa da, web'in ilk günlerinde gördüğümüz gibi, tam şartnameyi uygulayan tarayıcılardan çok daha iyi bir yoldur. Sitenizin tam yeteneğiyle çalıştığı için endişeleniyorsanız, bir destekleyici desteğini listeleyin ağ sağlayıcısı hizmet.

Bütün bu ses çok fazla iş gibi mi? İşleri basit tutmak Web Sitesi Oluşturucu .

CSS Çalışma Grubu, tüm büyük tarayıcı satıcılarından ve elma ve Adobe gibi diğer teknoloji şirketlerinden üyelerden oluşur. Son zamanlarda MacOS'u yeni sürümünü başlatan Apple, tarayıcıdaki Snazzy'nin yeni koyu modunu tespit etmenin bir yolunu istedi. Bunu yapmak için, Apple, yeni bir seviye 5 medya sorgusu için şartnameye bir öneri itti. 

 @Media (tercih-renk şeması: ışık | karanlık)
{...}

Bu medya sorgusunu kullanarak, kullanıcının şu anda işletim sisteminde açık veya koyu mod kullanıp kullanmadığını tespit edebiliriz. Şu anda bu yalnızca Safari Teknoloji Önizleme 69 ve üzeri tarafından desteklenir, ancak diğer tarayıcıların geride olmamalıdır.

  • CSS Metodolojilerine Bir Web Tasarımcısı Kılavuzu

Bunu test etmek için MOJAVE 10.14 (MACOS) (MACOS) için yükseltilmeniz gerekir ve sistem tercihlerinde karanlık görünüm seçtiniz. Farklı temaları uygulamak için bu yeni medya sorgusunu kullanabileceğimiz birkaç yol var. Bunlardan birkaçını bu eğitimde keşfedeceğiz.

01. Sayfayı ayarlayın

Başlamak için, stil için bazı HTML öğeleri oluşturmamız gerekiyor, bu yüzden kodlamada yeni bir kalem oluşturarak ve bazı öğeler ekleyerek başlayacağız. İçeriğimize bir konteyner ekleyeceğiz, ortadan kaldırmak ve bazı başlıklar ve metinler. CSS'de yuvalanmayı kullanmak için SASS kullanmaya CSS'yi ayarlayacağız. 

 & LT; DIV sınıfı = "İçerik-Konteyner" & GT;
& lt; h1 ve gt;
& lt; H2 ve GT; iki ° '/ H2 ve GT;
& lt; hr & gt;
& lt; p & gt; ... / p & gt;
& lt; p & gt; ... / p & gt;
& lt; / div & gt;

02. Stil Temel Öğeleri

Sonra bazı temel stilleri ekleyeceğiz ve sayfamızı biraz daha güzel görünmesini sağlamak için Google'dan bazı yazı tiplerini içereceğiz. Tüm temel unsurlarımızı, yeni yazı tipi boyutları, renkleri ve yazı tiplerini uygulayacağız. 

 vücut {
Yazı Tipi ailesi: 'Merriweather', Serif;
Arka plan rengi: #eded;
Renk: # 212121;
Dolgu: 1.618rem;
Hat yüksekliği: 1.618;
Yazı tipi boyutu: 16px;
}

03. Stil Konteyner

CSS light and dark: style container

Rahat bir çizgi uzunluğuna sahip bir kap oluşturun

Daha sonra içeriği okumak için rahat bir çizgi uzunluğu yapmak için konteynerimizi tarlayacağız. Ayrıca bir arka plan rengi ekleyeceğiz ve gölge bırakacağız. Sayfadaki içerik kutusunu ortadan kaldırmak için, marj özelliklerinin sol ve doğru değerleri üzerindeki 'Otomatik' anahtar kelimesini kullanacağız. 

 .Content-container {
Dolgu: 1.618REM 3.236REM;
Maksimum genişlik: 48.54REM;
Marj: 3.236REM AUTO;
arka plan rengi: #fff;
Kutu gölgesi: 0 0 12px 6px RGBA (0,0,0,0.05);
Sınır-yarıçap: .269666667REM;
}

04. Vurgu rengi ekleyin

CSS light and dark: highlight colour

Bir vurgu rengi seçin ve bunun için bir stil yapın

Çoğu web sitesi bir yerde renk kullanır ve şu anda sadece beyazlar ve griler var, bu yüzden şimdi bir vurgu rengi seçelim ve bu rengi uygulamak için bir stil oluşturalım. Renkli bir etiket kullanarak uygulayacağız ve içeriğimizde bir şeyi vurgulamak için kullanacağız. 

 & lt; span sınıfı = "metin - alfa" & gt; lorem IPSum; / span & gt;
.Text - alfa {
Renk: # C3423F;
}

05. Medya sorgusunu uygulayın

CSS light and dark: highlight colour

Şimdi bazı stillerin var, medya sorgusunu uygulayabilirsiniz.

Şimdi bazı temel stilleri olan bir sayfamız var, medya sorgusunu uygulayabileceğimiz yollara bakalım. Buna dahil edelim ve bazı tarzlarımızı geçersiz kılar. Vücut stilleriyle başlayacağız. 

 @Media (tercih-renk şeması: karanlık)
{
vücut {
Arka plan rengi: # 111;
}
}

06. Kalan stilleri geçersiz kıl

CSS light and dark: override styles

Şimdi stillerin geri kalanını geçersiz kılabilirsin

Artık medya sorgusunun çalıştığını ve vücudumun arka plan rengimizin değiştiğini görebiliyoruz, kalan tüm stillerimizi geçersiz kılmamız gerekiyor. 

 .Content-konteyner
{
Beyaz renk;
Arka plan rengi: # 212121;
}
.Text - alfa {
Renk: # 50A8D8;
}

07. Bakım

Daha yeni yaptıklarımız, demosumuz için mükemmel bir şekilde iyi çalışırken ve daha küçük web sitelerinde tutulabilirken, bu yöntem daha büyük bir projeyi yönetecek bir kabus olacaktır, hepsinin geçersiz kıldığı birçok farklı unsurla. Ayrıca, örneğimizdeki cascad'ı ağır kullanıyoruz, oysa büyük bir sistem tüm unsurları hedeflemek için daha fazla özgüllük gerektirebilir.

08. Başka bir yaklaşım yapın

CSS light and dark: another approach

Hızlı ve kirli karanlık bir mod için, sadece 'ters' kullanın ...

Peki sorun nasıl sorun olabiliriz? CSS filtrelerine bakalım. CSS filtrelerinde kullanabileceğimiz değerlerden biri 'ters', bu yüzden bunu HTML'ye uygulayabilir ve tüm renkleri ters çevirebiliriz, bize bir 'karanlık mod' verebilir. 

 @Media (tercih-renk şeması: karanlık) {
html {
Filtre: Ters Çevir (% 100);
}
}

09. Resim ekleyin

CSS light and dark: images

... elbette, fotoğraflarınız böyle görünecek

Filtre yöntemi, belgemizde sahip olduğumuz içerikle çalışırken, hala harika görünmüyor - örneğin kutum gölgemiz de ters görünüyor, bu da oldukça garip görünüyor. Renkli arka planlar olduğunda daha büyük bir sorun haline gelen stillerin üzerinde kontrolü kaybettik. Görüntülerin dahil olduğunda göz önünde bulundurulması için yepyeni bir problemimiz var. Bakalım sayfamıza bir resim eklediğimizde ne olacağını görelim.

10. Özel özellikleri kullanın

Şimdiye kadar keşfettiğimiz yöntemler, her şeyin karanlık modda güncellendiğinden emin olmak için stilleri kontrol etmemize ya da çok fazla bakım gerektiren yöntemler. Buna yaklaşabileceğimiz başka bir yol var: Renklerimizi tanımlamak ve ardından medya sorgusunu kullanarak onları geçersiz kılmak için özel özellikleri kullanabiliriz.

11. Özel özellikler oluşturun

Özel özellikleri kullanmak için, bunları CSS'nin üst kısmında tanımlarız. :kök 'unsur. Kök eleman, HTML ile aynı kapsama sahiptir, bu nedenle küresel olarak mevcut olacaktır. Değişken adlarına karar vermemiz ve değerlerini tanımlamamız gerekiyor. 

: root {
--Background-rengi: #eded;
- Sayfa-arka plan: #fff;
- Text-rengi: # 212121;
- Renk-alfa: # C3423F;
}

12. Özel Özelliklerimizi Uygulayın

Şimdi, bunları CSS'imizde kullanabileceğimiz bazı özel özelliklerimiz var. Vücutla başlayacağız ve arka plan ve metin renklerini uygulayacağız. Özel bir özelliği kullanmak için kullandığımız ' Var (- Özel özellik adını) 'Sözdizimi. 

 vücut {
arka plan rengi: var (- arka plan rengi);
Renk: var (- metin rengi);
}

13. Kalan özellikleri uygulayın

Aynı yöntemi kullanarak, konteynırızın 'arka plan rengini' ve 'rengimin' 'rengini' güncelleyebiliriz. metin-alfa 'Özel özelliklerimizi kullanmak için sınıf. Sayfamızdaki tüm renkler şimdi özel özellikler kullanılarak kontrol edilir. 

 .Content-container {
arka plan rengi: var (- sayfa arka plan);
}
.Text - alfa {
Renk: var (- renk-alfa);
}

14. Medya sorgusunu tekrar ekle

Şimdi medya sorgusunu tekrar ekleyebiliriz, ancak bu sefer içinde olan özel özellik değerlerini geçersiz kılabiliriz. Orijinal kök tanımından hemen sonra bunu sağlayacağız ve medya sorgunun içinde artık tüm renk özel özelliklerimiz için yeni değerler seçebiliriz. 

 @Media (tercih-renk şeması: karanlık) {
:kök {
--Background-rengi: # 111;
- Arka plan: # 212121;
-Text-rengi: #eded;
- Renk-alfa: # 50A8d8;
}
}

15. Tam kontrol alın

Özel Özellikler Hangi renkleri ve diğer özellikleri değiştirdiğimiz ve kullandığımız diğer özellikleri seçmek için bize tam kontrol sağlar. Koyu modu kullanırken daha az şeffaf hale getirmek için sayfalemizdeki kutu gölgesini güncelleyin. Bunu yapmak için sayfa gölge için yeni bir özel özellik oluşturmamız gerekiyor. 

: root {
...
--sayfa-gölge: 0 0 12px 6px RGBA
(0,0,0,0.05);
}

16. Gölgeyi uygulayın

Şimdi başka bir özel mülk oluşturduk, sayfadaki doğru elemana uygulamak için ihtiyacımız var. Daha sonra saydamlığı azaltmak için kök elemanımızın içindeki değeri geçersiz kılabiliriz. 

 @Media (tercih-renk şeması: karanlık) {
:kök {
...
--paj-gölge:
0 0 12PX 6PX RGBA (0,0,0,0.33)
;
}
}
.Content-Container {
...
kutu-gölge: var (- sayfa-gölge);
}

17. Bir resim ekleyin

CSS light and dark: images

Bir resim ekleyin ve içeriğin yanında yüzer

Şimdi içeriğimize bir görüntü ekleyelim ve ardından içeriğin yanındaki görüntüyü yüzdürmek için bazı temel stiller ekleyebiliriz. 

 img {
Genişlik:% 100;
Yükseklik: Otomatik;
Şamandıra: Sol;
Maksimum genişlik: 300px;
Marj-sağ: 1.618rem;
Marj-alt: 1.618rem;
}

Gördüğümüz gibi, herhangi bir filtre kullanmadığımız için görüntü iki tema arasında değişmez.

18. Daha fazla bileşen ekleyin

Şimdi özel özelliklerimizi bulduk, sayfaya öğe ekleyebilir ve bunları değişkenlerimizle şekillendirebiliriz. Bir düğme sınıfı oluşturalım ve sayfamıza bir düğme ekleyelim. 

 .button {
Ekran: Inline-Flex;
Yazı Tipi ailesi: Miras;
arka plan rengi: var (- renkli alfa);
Renk: var (- metin rengi);
Dolgu: 1.618REM 3.236REM;
Sınır: 0 Yok;
Sınır Yarıçapı: 0.25REM;
Metin Dekorasyonu: Yok;
}

19. Düğme Hover Stilleri Oluşturma

Aynı değişkenleri kullanarak, her iki temalar için de kullanılabilecek bir vurgulu stilini de oluşturabiliriz. Bunu başarmak için, kullanıcının düğmenin üzerine geldiğinde renkleri ters çevireceğiz ve deneyimi daha az jarring yapmak için bu özellikleri geçiş yapacağız. 

 .button {
...
Geçiş: arka plan rengi 150ms,
renk 150ms;
& amp;: hover {
arka plan rengi: var (- metin rengi);
Renk: var (- renk-alfa);
}
}

20. Düğme özel özellikleri yapın

Özel özellikler normal CSS elemanları ile aynı kapsama sahiptir; Bu, daha spesifik bir seçici kullanarak onları geçersiz kılabileceğimiz anlamına gelir. Bundan yararlanabilir ve butonumuza kapsanan bazı değişkenler oluşturabiliriz. 

 .button {
- Boşaltma-arka plan: var (- renkli alfa);
- Button-Metin: var (- arka plan rengi);
arka plan rengi: var (- düğme arka plan);
Renk: var (- düğme-metin);
...
}

21. Kapsam kullanın

CSS light and dark: scope

Düğmeniz için farklı stiller ve etkileşimler oluşturmak için kapsam kullanın

Bu kapsamın farklı stiller oluşturmak ve karanlık ve hafif temalardaki düğmemiz için etkileşimlerini ortaya çıkarmak için kullanabiliriz. Mülkiyet sorgusuna veya öğenin durumuna göre değişkenlerimizin değerini, normalde olduğumuz gibi yeni bir değerle tekrarlamak yerine değiştirebiliriz. 

 .button {
...
& amp;: hover {
- Boşaltma: # AE3937;
@Media (tercih-renk şeması: karanlık) {
- Boşalt-arka plan: # 2E98D1;
- Botton-Metin: var (- arka
renk);
}
}
}

Bir ekible bir yapıda çalışmak? Prosesinizin yapışmasını iyi tutun Bulut depolama .

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com

Web Tasarımcıları için ödüllü kazanan konferans, 24-25 Nisan'da NYC'ye döner! Bilet ziyaret etmek www.generateconf.com

Bu makale başlangıçta yaratıcı web tasarım dergisinin 283'ü yayınlandı. Web tasarımcısı . Sayı satın al 283 veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

  • CSS Sanatı ile başlayın
  • 12 Büyük CSS Animasyon Kaynakları
  • Hangi CSS çerçevesini kullanmalısınız?

Nasıl Yapılır - En Popüler Makaleler

Instagram fotoğrafları nasıl indirilir: Bilmeniz gereken her şey

Nasıl Yapılır Sep 10, 2025

(Image Credit: Instagram'da Joseph Foley) İnstagram resimlerini indir - Instagram..

Perspektifi nasıl çizilir

Nasıl Yapılır Sep 10, 2025

Perspektifin nasıl doğru çizileceğini öğrenmek, tüm çizim sürecinizi değiştirebilir. Geleneksel olarak kalem ve kağıtla çizin veya bir grafik tableti kullanarak dijital olarak, ..

Windows, MacOS ve Android için Web Bildirimleri Nasıl Kapanır

Nasıl Yapılır Sep 10, 2025

(Görüntü Kredi: Gelecek) Düzenli bir web kullanıcısıysanız, ekranınızın sağ üst köşesinde düzenli ola..

Afinite Tasarımcısı: Efektler ve stilleri nasıl kullanılır?

Nasıl Yapılır Sep 10, 2025

(Resim Kredi: Serif) Kombine vektör ve raster araçları ile, Afinite tasarımcısı Adobe CC'ye uygu..

Google'ın bulut vizyonuna yönelik bir rehber

Nasıl Yapılır Sep 10, 2025

Makine öğrenme. Derin öğrenme. Doğal dil işleme. Bilgisayar görüşü. Otomasyon. Ses tanıma. Muhtemelen tüm bunları ve..

Babel 7 ile başlayın

Nasıl Yapılır Sep 10, 2025

Javascript ekosistemin genişliği nedeniyle benzersizdir. Yeni standartlar sözdizimsel şeker eklerken, tarayıcılarda destekl..

TypeScript ile Nasıl Başarılır

Nasıl Yapılır Sep 10, 2025

Typscript, kullanan bir dil grubundan biridir. Javascript Yürütme ortamı olarak çalışma zamanı:. Ticture ko..

Grafik tasarımcıları için 3D metin öğretici

Nasıl Yapılır Sep 10, 2025

Sayfa 1/2: Sinema 4d ile başlamak Sinema 4d ile başlamak ..

Kategoriler