שינוי נושא ממשק

1) עקרונות

1. מערכת> עור. הנושא אינו רק היפוך רקע, אלא קבוצה של אסימונים (צבע, רקע, ניגוד, צללים, מצבים, איורים, גרפים).
2. מערכת-ראשונה. כברירת מחדל - מערכת (”מעדיף-צבע-סכימה”) עם היכולת לבחור באופן ידני אור/כהה/ניגודיות גבוהה.
3. ניגודיות ברירת מחדל. המטרה - WCAG AA, עבור טקסט קטן/תוויות חשובות - AAA.
4. אין התפרצויות. ניישם את הנושא לפני התרגום (תסריט אינליין), ונבצע את המעברים בזהירות.
5. יציבות מותג. המבטא והסמנטיקה של המדינות נשמרים בכל הנושאים.

2) מצבים ותרחישים

תסריטים/טפסי תשלום/קריאה ארוכה.
ערב כהה/אור נמוך/גפרורים חיים; מפחית את הזוהר.
מערכת - עקוב אחר מערכת ההפעלה/דפדפן (”מעדיף ערכת צבעים”).
ניגודיות גבוהה - ניגוד מוגבר ותכשיטים ממוזערים (Incl. צמצום תנועה).
פרומו/עונתי (אופציונלי) - מעל הנושא הבסיסי לטורניר/אירוע (לא לשבור אסימונים).

3) ארכיטקטורה טוקנית

css
:root {
/ semantics/
--bg:    hsl(0 0% 99%);
--bg-elev:  hsl(0 0% 100%);
--fg:    hsl(220 15% 15%);
--muted:   hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success:  hsl(152 55% 40%);
--warning:  hsl(36 85% 45%);
--danger:  hsl(0 75% 50%);
--border:  hsl(220 10% 90%);
--focus:   hsl(260 95% 60% /.6);
--shadow:  0 6px 24px hsl(220 20% 10% /.08);

/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg:   hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg:   hsl(0 0% 96%);
--muted:  hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}

כלל: רכיבים משתמשים רק באסימונים סמנטיים.

4) גלאי ושמור בחירה

html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light'    'dark'    'hc'    'system'    null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>

js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});

5) מעברים חלקים ללא FOUC

הפעל את הנושא לפני טעינת התסריט (inline script).

css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}

לאחר הגדרת היישום, הוסף "מחלקה =" נושא מוכן ".

6) רכיבים ומצבים

טקסט/סמלים: ניגוד בין AA; טקסט משני לא נמוך מ-4. 5:1 (בקלות ”נמוג” בחושך).
שדות/כרטיסים: רקע ”- bg-elev”, גבול ”- בורדר”, צל ”- צל”.
CTA: רקע '- מבטא', טקסט ניגוד ('# fff' או מחושב).
מצבים (ריחוף/מיקוד/פעילות/נכה): שנה את הבהירות/אלפא, ולא ”האר את הקשת”.
גרפיקה/ניצוץ: פלטות נפרדות לאור/כהה; רשת/גרזנים הם ניגודים נמוכים אבל קריאים.

7) תמונות/מדיה/לוגוס

סמלים מונוכרומיים - דרך 'צבע ' (להתאים לטקסט).
אל תהפוך את המותג לוגוס; הכן שתי גרסאות (אור/חושך).
כרזות/צילומי מסך: כיסוי קל בחושך (8-12%) עבור קריאת טקסטים.
SVG: להימנע ממילוי ”קשה”, להשתמש var 'var (- - fg) '/' var (- מבטא).

8) יכולת מזמינות

ניגוד גבוה: פרוסט נפרד' נושא נתונים =” hc”.
מוקד מצלצל: תמיד נראה ('מתאר: 2px var מוצק (- - פוקוס); קיזוז קווי מתאר: 2px '.
אל תסמוך על צבע. סמל/טקסט/תבנית לסטטוס.
גופנים: 'פונט-וריאנט-מספרי: tabular-nums; " עבור סכומים/גורמים.
RTL: הנושא אינו שובר שיקוף (אנו משתמשים בתכונות לוגיות).

9) ביצועים

צבעים - תכונות מותאמות אישית של CSS בשורש * שימוש חוזר ללא שינוי מרכיב.
הימנע מ ”צביעה מחדש” תמונות עם 'הפוך' מסננים על מיכלים גדולים.
החלפה עצלה של איורים כבדים עבור הנושא (אם יש צורך).
אל תאחסן פלטות גדולות בJS - הנושא נשלט על ידי המעמד/מאפיין.

10) הפרטים של iGaming

גורמים חיים בלילה: ניגוד ”רך” (AAA למספרים), הדגשת השינוי בגורם היא בלתי בולטת, ללא הבהוב.
מחזה אחראי: תזכורות והערות ניתנות לקריאה בשני הנושאים; בלי פרחים ”רעילים” בלילה.
קופות: שדות/חתימות/שגיאות ללא מבטא זוהר מעייף; הצלחה/טעות יציבה בנושא.
טורניר ”עורות”: רק כמבטא-עוקף שטחי, לא לשבור אסימונים בסיסיים.

11) סניפטס UI

html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme')          'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>

css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}

tsx import { useEffect, useState } from 'react';
type Theme = 'light'    'dark'    'hc'    'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme          'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}

12) מדדים

שיעור אימוץ הנושא: שיתוף משתמשים ב ־ Dark/System/HC.
שיעור FOUC: פרופורציה עם ”פרץ לבן” נראה לעין בהתחלה (<1%).
פגמים מנוגדים: מספר החרקים הנוגדים על ידי שחרור.
שגיאה בראות: קליקים/חזרות בשל שגיאות ”בלתי נראות” בנושאים שונים.
השפעה אנרגטית (ניידת): השוואה של זמן ההפעלה בחושך נגד lait (מטרי עקיף).

13) אנטי דפוסים

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

14) רשימת QA

ניגודיות וקריאה

[ ] כל הטקסטים של אלכוהוליסטים אנונימיים; תוויות קריטיות/טקסט קטן AAA.

[ ] שגיאות/הצלחה/אזהרות אינן ניכרות רק בצבע.

התנהגות

[ מערכת ] מכבדת "מעדיפה ערכת צבעים ומגיבה לשינויי מערכת ההפעלה.

[ ] NO FOUC (הנושא חל לפני התרגום).

[ ] החלפת הנושא אינה מאפסת את מצב הדף.

רכיבים

[ ] קלפים/טפסים/טבלאות משתמשים רק באסימונים.

[ ] גרפיקה יש פלטות לשני הנושאים.

[ ] לוגוס/אייקונים גלויים בשני הנושאים.

A11y

[ ] ריקוד גלוי; מצב ניגודיות גבוהה זמין.

[ ] לשקול 'מעדיף-מופחת תנועה'.

ביצועים

[ ] Transformation 200 ms; בלי השתקפויות גלובליות.

[ ] אין מסננים כבדים/משתלבים על מכולות.

15) תיעוד במערכת התכנון

אסימוני ערכת נושא: palettes, contractions, state (ריחוף/מיקוד/פעיל/נכה).
מדריכים: איך להוסיף מבטא חדש של ברנדו מבלי להסיג את הניגודיות.
תרשימים/מדיה: צבעים מוגדרים מראש לאור/כהה.
תבניות: מערכת ראשונה, ניגודיות גבוהה, מיתוג חלק ללא FOUC.
דו/אל: סינון היפוך, צבעים הפוכים, שגיאות/מיקוד בלתי נראים.

תקציר

מתג הנושא העובד הוא אסימונים סמנטיים + מערכת-ראשון + התחלה מהבהבת. ללכוד ניגודיות, לרכז צבעים, לכבד ”מעדיף ערכת צבעים” ולהפחית תנועה, לאחסן בחירת משתמש ולהימנע מהשפעות כבדות. אז עדיין ניתן לקרוא ולזהות את UI בכל הגדרה - החל ממשחק חי לילה לקופות יום ומסכי טורניר.