Açık/koyu tema

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' }.

Örnek çözümü göster

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 />;
}

Kendini test et

Açık temada arka plan nasıl olur?
- Koyu
- Parlak
- Saydam
- Resim
Cevabı göster

Parlak — Açık tema parlak arka plan kullanır.

Açık tema arka planı

const light = { background: '____', text: '#000' };

Cevabı göster

const light = { background: '#fff', text: '#000' };

Tema kavramlarını eşleştir

açık tema

Parlak arka plan
koyu tema

Koyu arka plan
background

Arka plan rengi
text

Metin rengi

Sıradaki ders: Theme context

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler