Boje u Xcode-u: tamna tema, visok kontrast i generisani simboli

Boje izgledaju kao najlakši deo aplikacije sve dok ne dodate tamnu temu, drugu platformu i dizajnera koji po treći put preimenuje „plavu”. Malo strukture u katalogu resursa štedi mnogo hex kodova rasutih po kodu.

Imenujte boje po ulozi, ne po vrednosti

Boja nazvana blue500 kaže kako izgleda; boja nazvana textSecondary ili statusSuccess kaže čemu služi. Imena po ulozi preživljavaju redizajn: kada se plava boja brenda promeni, menjate jedan set boja i svi ekrani ga prate. Počnite od malog skupa — pozadina, izdignuta površina, primarni i sekundarni tekst, akcenat, uspeh, upozorenje, greška — i dodajte nove tek kada se pojavi stvarna potreba.

Jedan set boja, više izgleda

Color Set u katalogu resursa može da sadrži različite vrednosti za različite uslove:

• ✦izglede Any i Dark, pa sistem automatski menja boju sa tamnom temom;
• ✦varijante High Contrast za ljude koji uključe Povećani kontrast u podešavanjima pristupačnosti;
• ✦prostor boja za svaku vrednost — sRGB za većinu boja, Display P3 kada vam trebaju zasićenije nijanse na savremenim ekranima.

Pre nego što posegnete za sopstvenim bojama, pogledajte sistemske: label, secondaryLabel, systemBackground i slične već se prilagođavaju tamnoj temi i podešavanjima kontrasta.

Koristite generisane simbole

Od Xcode-a 15 svaka boja i slika u katalogu resursa dobija generisani Swift simbol. Nema više imena u stringovima koja tiho prestanu da rade posle preimenovanja:

// SwiftUI: Xcode generiše .statusSuccess i .surfaceElevated iz kataloga resursa
Text("Connected")
    .foregroundStyle(Color(.statusSuccess))
    .padding()
    .background(Color(.surfaceElevated))

// UIKit koristi iste generisane resurse
let tint = UIColor(resource: .brandAccent)

Ako se boja preimenuje ili obriše, build pada umesto da aplikacija tiho ne prikaže ništa.

Proveravajte kontrast brojevima

Čitljivom tekstu treba odnos kontrasta od najmanje 4,5:1 u odnosu na pozadinu, ili 3:1 za veliki tekst (WCAG AA). Procena od oka nije dovoljna. Dok smo pravili sopstvenu konzolu, za sekundarni tekst na kartici #111111 izabrali smo toplu sivu #6F6B63. Na našim ekranima je izgledala dobro, ali izmereni kontrast je bio samo 3,56:1 i naši automatski testovi pristupačnosti su je odbili. Prelazak na #A39F95 podigao ga je na oko 5,6:1 bez promene izgleda dizajna.

Dosledne palete kroz aplikacije

Kada jedan studio izdaje mnogo aplikacija, doslednost postaje zaseban problem: svaki projekat počinje tako što neko ručno bira boje. Za taj trenutak smo napravili ColorsGen. Od osnovne boje koju izaberete pravi skladnu paletu — ili je generiše nasumično — i priprema je za Xcode u nekoliko dodira, na iPhone-u, iPad-u i Mac-u. Za ikonice i grafičke resurse pogledajte naš vodič o veličinama ikonica u 2026.