איך עובדים טוקנים למצב כהה
טוקנים למצב כהה הם מערכת ערכים שנייה שקשורה לאותם שמות סמנטיים כמו הערכה הבהירה, כך שמעבר בין מצבים מפנה שמות כמו --color-surface לצבעים אחרים בלי שאף רכיב יצטרך לדעת איזה מצב פעיל.
למה היפוך לא עובד
הגישה האינטואיטיבית - להפוך את הבהירות, להחליף שחור ולבן - מייצרת ערכת נושא כהה שנראית לא נכון בדרכים שקשה לנסח בהתחלה.
כמה סיבות קונקרטיות:
שחור טהור הוא קשה לעין. רוב ערכות הנושא הכהות העשויות היטב משתמשות באפור כהה מאוד, לעיתים קרובות עם גוון קל, במקום #000000. טקסט לבן בניגודיות מלאה על שחור טהור גורם להילה, והטקסט נראה כאילו הוא נוזל.
צבעים רוויים נקראים בהירים יותר על רקע כהה. כחול שיושב בנוחות על לבן עלול לרטוט מול רקע כהה. גרסאות למצב כהה בדרך כלל מופחתות ברוויה וגם מוארות, לא רק מוארות.
הרום מתהפך. בערכות בהירות, משטחים מורמים מטילים צל. בערכות כהות הצל כמעט בלתי נראה, ולכן משטחים מורמים מסומנים בכך שהם נעשים בהירים יותר. טוקני צל שעובדים במצב אחד לא נושאים מידע במצב השני.
יחסי ניגודיות לא שורדים את ההיפוך. שילוב שעובר AA במצב בהיר עשוי להיכשל בכהה. כל שילוב צריך בדיקה מחדש, לא רק חישוב מחדש.
המבנה שמאפשר את זה
מצב כהה הוא בעיה של מתן שמות לפני שהוא בעיה של צבע. הוא יוצא נקי רק אם השכבה הסמנטית כבר קיימת.
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}הרכיבים מפנים ל---color-surface. הם אף פעם לא לומדים שיש מצב. הוספת ערכת נושא שלישית בהמשך היא בלוק נוסף באותה צורה, ולא שינוי בכל רכיב.
אם הרכיבים מפנים ישירות לטוקנים גולמיים, אין למה להפנות מחדש, ומצב כהה הופך לתנאי בכל קובץ.
צרו את שניהם יחד
ערכת נושא כהה שמוסיפים כעבור חצי שנה היא סקירה של כל רכיב ורכיב. כשהיא נוצרת יחד עם הבהירה, מאותם סולמות, היא בחינם.
זה הטיעון החזק ביותר להחליט על המצבים כבר בהתחלה גם אם תשחררו רק אחד: העלות המבנית נמצאת במתן השמות, ומתן שמות זול לפני שיש רכיבים ויקר אחר כך.
איפה Flash DSM נכנס
כל מערכת שנוצרת מייצרת בהיר וכהה יחד, קשורים לאותם שמות סמנטיים, עם ניגודיות שנבדקת על פני השילובים במקום גזירת מצב אחד מהשני בדיעבד.