Proje: Okul B2B App · Hub: Okul B2B App — Conventions

Tema ve Renk Sistemi

ThemeContext

Üç tema seçeneği: 'light' | 'dark' | 'system'

const { resolvedTheme, isDarkMode, themePreference, setThemePreference } = useTheme();
const colors = Colors[resolvedTheme]; // light veya dark renkleri

Tercih AsyncStorage’da @okulcomtr_theme_preference key’i ile saklanır.

Brand Colors (APP_COLORS)

PRIMARY: '#005779'           // Ana marka rengi (koyu mavi-yeşil)
PRIMARY_LIGHT: '#E6F6FC'    // Açık marka arka planı
BUTTON_PRIMARY: '#007AFF'   // Buton ana rengi (iOS mavi)
BUTTON_SECONDARY: '#6B7280'
SUCCESS: '#00CC00'
ERROR: '#FF0000'
WARNING: '#FFA500'
INFO: '#3b82f6'

Colors (Light/Dark)

constants/Colors.ts light/dark tema için tam renk seti:

Değişken	Light	Dark
text	11181C	ECEDEE
background	ffffff	#121212
primary	#005779	4DB8E8
card	ffffff	1E1E1E
border	E5E5E5	(dark karşılığı)

Kullanım Pattern

// Her bileşende:
const { resolvedTheme } = useTheme();
const colors = Colors[resolvedTheme];
// StyleSheet içinde colors.background, colors.text, colors.primary

APP_COLORS statik renkler için (tema değişmez):

import { APP_COLORS } from '@/constants/AppColors';
// APP_COLORS.PRIMARY, APP_COLORS.BUTTON_PRIMARY

Flash Önleme

ThemeContext Appearance.getColorScheme() ile synchronous ilk değer alır. Böylece ilk render’da tema flash’ı önlenir.

Font Scaling

utils/DisableFontScaling.ts tüm Text bileşenlerinde font scaling’i devre dışı bırakır. Bu _layout.tsx’in ilk import’u olmalı (critical).

Related

• naming-ve-klasor-yapisi — dosya/import konvansiyonları
• context-state-yonetimi — ThemeContext context hiyerarşisi