מונים שמתאימים את עצמם למצב כהה

מונה הוא תמונה בדף של מישהו אחר. כשלדף הזה יש מצב כהה, התמונה אינה יודעת: היא צוירה בשרת הרבה לפני שהעדפת המערכת של המבקר הייתה עובדה קיימת. תג לבן בדף כהה הוא התוצאה הרגילה, והוא נראה כמו חור.

חמישה עשר מהעיצובים כאן מטפלים בכך בכל זאת. לא באמצעות שאלה לדף, ולא עם JavaScript — אין בו שימוש כלל. התמונה מתחלפת מעצמה.

איך

קובץ SVG אינו תמונה, אלא מסמך, ומסמך יכול להכיל גיליון סגנונות. לכן השרת מצייר את העיצוב פעמיים, בהיר וכהה, מכניס את שניהם לקובץ אחד ומוסיף שלוש שורות CSS:

.s4uD{display:none} @media(prefers-color-scheme:dark){.s4uL{display:none}.s4uD{display:inline}}

הדפדפן מחיל את שאילתת המדיה הזאת בתוך התמונה, גם כשהתמונה נטענת דרך תגית <img> פשוטה מדומיין אחר. יש להעביר את המערכת למצב כהה והמונה יתאים את עצמו — ללא טעינה מחדש, בלי שהדף שסביבו מעורב כלל.

מה זה עולה

שתי הגרסאות נמצאות בקובץ, ולכן גודל הקובץ כפול בערך. נמדד בעיצוב אחד: 1,029 בתים כרגיל, 2,041 עם התאום הכהה. זה המחיר הכנה והסיבה שזאת אינה ברירת המחדל: הוא מתבקש לכל הטמעה במקום להיכפות על כולם.

אין בקשה שנייה ואין סבב תקשורת שני. קובץ אחד מגיע, והמחצית שאינה נדרשת לעולם אינה נצבעת.

המלכודת באמצע

מעברי צבע, מסננים ומסכות ב־SVG מופנים לפי id. שתי גרסאות של עיצוב נוצרות באותו קוד, ולכן שתיהן מביאות מעברי צבע שנקראים g1, g2, וכן הלאה. אם מכניסים את שתיהן למסמך אחד, ההגדרה השנייה של id פשוט אינה חלה — הגרסה הכהה מצוירת בשקט בצבעי הגרסה הבהירה.

שום דבר אינו מציג שגיאה. הקובץ תקף. הוא פשוט נראה לא נכון, באופן שקל להאשים בו את העיצוב ולא את ההרכבה.

לכן לפני שמחברים את שתי המחציות, כל id בגרסה הכהה מקבל שם חדש עם קידומת, וכל ביטוי url(#...) שמצביע על אחד מהם נכתב מחדש בהתאם. זה צעד קטן, ודילוג עליו מפיק באג שמבט מהיר אינו יכול להסביר.

מתי יש סירוב

אם אחת המחציות חסרה, אם אחת אינה מפיקה רכיב מסוג <svg> כלשהו, או אם השתיים מתקבלות זהות בית לבית — כלומר לעיצוב אין גרסה כהה — הגרסה הבהירה מוחזרת ללא שינוי. חצי SVG מורכב יהיה גרוע יותר מהיעדר מצב כהה, ומונה שמצויר שווה יותר ממונה מתוחכם.