Colour Shift

מה זה עושה, לפי הסדר

1. 1
   סקשן מסומן. data-body-theme="dark" על כל סקשן. הוא לא צריך רקע משלו: הוא מקבל את הרקע של הדף, וזה בדיוק מה שמתחלף.
2. 2
   חוצה את האמצע. כשהסקשן מכסה את קו האמצע של המסך, ה-body מקבל uk-body-dark.
3. 3
   הטוקנים מתהפכים. הרקע, המלל, הכרטיסים והגבולות בנויים על טוקנים, אז הם מתחלפים יחד. מה שיש לו צבע משלו נשאר כמו שהוא: סקשן עם תמונה או ink, וגם התפריט.
4. 4
   וחוזר. כשהסקשן עוזב את האמצע, ה-class יורד והצבעים חוזרים. אותו דבר בשני הכיוונים.

data-body-theme

<section data-body-theme="dark">…</section>

body.uk-body-dark        while the section covers the screen's middle line
body.uk-body-switching   0.8s around each switch: the colours fade only then

A demo's own dark (default: the site's .dark):
[data-demo="spa"] {
  --uk-body-dark-bg: #2a221d;      --uk-body-dark-fg: #f5efe6;
  --uk-body-dark-muted: …;         --uk-body-dark-muted-fg: …;
  --uk-body-dark-border: …;        --uk-body-dark-card: …;
}

מה שמתחלף הוא הטוקנים, לא פלטה שכתובה ביד: כל מה שבנוי על --background, --foreground, --muted, --border ו---card מתחלף לבד, ומה שיש לו צבע משלו נשאר. ההחלפה דוהה רק סביב הרגע עצמו (uk-body-switching), אז טעינה ו-hover לא מקבלים transition. עם prefers-reduced-motion היא מתחלפת בלי דהייה.

IntersectionObserver על פס צר באמצע המסך, בלי scroll handler, אז Lenis ומעברי דפים לא צריכים כלום, ומעבר דף מחזיר את הצבעים. ניטרלי: לא שואל כלום על התוכן, אבל הוא רגע, אז סקשן אחד או שניים לדף. אתר שמתחלף בכל סקשן הוא כבר קונספט אחר.

בהדרגה, לא מתג

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

<section data-ground-fade="">…</section>          {/* fades to the default dark (--uk-ground-fade) */}
<section data-ground-fade="#2a221d">…</section>   {/* to a colour of its own */}
<section className="…dark…">…</section>          {/* the next one, on that ground */}

נראה הכי טוב בסקשן גבוה ממסך (יותר מ-100VH)

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

והסקשן הבא כבר על הצבע האחרון

ועם כמה צבעים באותו מאפיין: הרקע של הסקשן עצמו עובר בין הצבעים רק בזמן שהוא ממלא את כל המסך, אז אף קצה שלו לא נראה מול הסקשן שלפניו או אחריו ואין קו. הצבע הראשון הוא של הסקשן שלפניו, האחרון של זה שאחריו, ואז הדף לא מתחלף, הוא נוסע: זה נראה כאילו הדף עבר מסלול. ולא יחד עם המתג באותו מקום: המתג החזיק את הדף כהה אחרי שהסקשן כבר הגיע לבהיר, ונוצר פס. בלי שכבה. data-ground-fade-fg מזיז באותה צורה את צבע המלל, כדי שהוא לא ייעלם כשהרקע מתבהר.

<section data-ground-fade="#0f1d22 #7e8c8a #f2efe8"
         data-ground-fade-fg="#eaf0ec #eaf0ec #141a1c">…</section>