Açık/koyu tema
- React Native kursu
- Orta seviye
- Ders 82/116
- 5 dk
Açık ve koyu tema yönetimini öğrenirsin.
Açık/koyu tema
Bir uygulama genellikle iki temayla gelir: açık (light) ve koyu (dark). Açık tema parlak arka plan, koyu metin; koyu tema koyu arka plan, açık metin kullanır. Kullanıcı tercihi ya da sistem ayarına göre değişir.
Tema, renkleri bir nesne halinde tutar: { background: '#fff', text: '#000' } açık için, { background: '#000', text: '#fff' } koyu için. Bileşenler bu nesneden okur; tek yerden değişir.
Tema nesnesi
Tema renkleri bir nesne olarak tanımlanır. Açık tema: { background: '#fff', text: '#000' }. Koyu tema: { background: '#000', text: '#fff' }. Bileşenler stilde bu değerleri kullanır.
Bu yaklaşım, renkleri tek yerden yönetmeyi sağlar. Yeni bir tema eklemek için yalnızca yeni bir nesne yazmak yeterlidir; bileşen kodu değişmez.
Uygulama light ve dark tema tanımla
İki tema nesnesi tanımla: const light = { background: '#fff', text: '#000' } ve const dark = { background: '#000', text: '#fff' }.
Başlangıç kodu
import React from 'react';
import { View } from 'react-native';
// light ve dark tema nesnelerini tanımla
export default function App() {
return <View />;
}Örnek çözüm
import React from 'react';
import { View } from 'react-native';
const light = { background: '#fff', text: '#000' };
const dark = { background: '#000', text: '#fff' };
export default function App() {
return <View />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Açık temada arka plan nasıl olur?
- Koyu
- Parlak Doğru cevap
- Saydam
- Resim
Açıklama: Açık tema parlak arka plan kullanır.
2 Açık tema arka planı
const light = { background: '____', text: '#000' };const light = { background: '#fff', text: '#000' };Açıklama: #fff beyaz arka planı temsil eder.
3 Tema kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
açık tema |
Parlak arka plan |
koyu tema |
Koyu arka plan |
background |
Arka plan rengi |
text |
Metin rengi |