הגדרת ערכת נושא כהה (מצב כהה) ב-1C-Bitrix: ניסיון ופתרונות

למה ערכת נושא כהה בביטריקס שוברת את הפריסה ואת ממשק הניהול

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

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

המקור הראשון לבעיות הוא התנגשות סגנונות התבנית. ה-cascade בביטריקס נדרס לעתים קרובות על ידי סלקטורים ממוקדים ו-!important, ולכן מתג ערכת נושא גלובלי מפסיד לכללים שנכתבו עבור בלוק ספציפי.

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

סיפור נפרד הוא מטמון הסגנונות. ביטריקס מאגד ומכווץ CSS, וכן שומר רכיבים במטמון; לאחר התיקונים הדפדפן והשרת ממשיכים להגיש קבצים ישנים. המהנדס משנה צבעים, ובאתר שום דבר לא זז — וזה נראה כמו "ערכת הנושא לא עובדת", אף שהבעיה היא בשכבת המטמון וב-versioning של הסטטיקה.

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

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

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

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

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

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

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

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

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

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

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

דרכים למימוש ערכת נושא כהה: השוואת גישות

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

משתני עיצוב לעומת תבנית נפרדת

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

מתג והגדרת המערכת

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

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

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

יישום ערכת נושא כהה ב-Bitrix אינו "החלפת דגל", אלא עבודה עקבית עם התבנית והרכיבים. ערכת נושא כהה ב-Bitrix נוגעת בפריסה, בסגנונות ובלוגיקת התצוגה, ולכן אנו מתקדמים בשלבים, כאשר כל שלב נשען על תוצאת השלב הקודם.

1. ביקורת התבנית. בוחנים כיצד בנויים הסגנונות: כמה צבעים מוגדרים באופן קשיח בסימון ובמאפיינים inline, היכן משתמשים במשתנים, אילו רכיבים יורשים את העיצוב. מתעדים רשימת מקומות שיהיה צורך להעביר למקור צבעים אחיד.
2. איסוף הפלטה. יוצרים שתי קבוצות ערכים — למצב בהיר ולמצב כהה: רקע, משטחים, טקסט, גבולות, הדגשות, מצבי כפתורים וקישורים. בודקים את הניגודיות של הטקסט מול הרקע, כדי שהקריאות לא תיפגע.
3. הגדרת משתנים. מעבירים את הצבעים לשכבת משתנים אחידה ומחליפים אותם לפי מצב — באמצעות מחלקה על האלמנט השורשי או מאפיין ערכת הנושא. צבעים שהוגדרו באופן קשיח מוחלפים בהפניות למשתנים, כך שהחלפת מצב לא תדרוש עריכה של כל עמוד.
4. בדיקת רכיבים. עוברים על בלוקים טיפוסיים: טפסים, סל קניות, אזור אישי, חלונות קופצים, טבלאות, עורך תוכן. כל רכיב נבדק בשני המצבים — דווקא כאן צצים לרוב "כתמים לבנים" על רקע כהה.
5. בדיקות. בוחנים את ההתנהגות ברזולוציות שונות ובדפדפנים עיקריים, בודקים מצבי ריחוף ומיקוד, קריאות של תמונות ואייקונים. בנפרד בודקים שהבחירה של המשתמש נשמרת בין ביקורים.
6. מסירה. מוסרים את התבנית המוגדרת, תיאור המשתנים והכללים להוספת צבעים חדשים, כדי שהצוות יוכל לפתח את ערכת הנושא בלעדינו.

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

מה הלקוח מקבל לאחר ההגדרה

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

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

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

מקרה בוחן: כיצד פתרנו קונפליקטים של עיצוב בפורטל

מה היה לפני ההתערבות

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

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

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

מה שינינו

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

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

מה התוצאה

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

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

במה שונה ערכת נושא כהה בחלק הציבורי ובממשק הניהול

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

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

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

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

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

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

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

ספקות טכניים נפוצים בעת הטמעה

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

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

האם הפריסה תישבר

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

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

מה עם תוספים מותקנים ותבנית

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

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

מה עם ניגודיות ונגישות?

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

נדון במשימה שלך בנושא ערכת נושא כהה

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

מה מבררים בהתחלה

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

מה לשלוח להערכה

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

איך נחזור עם הערכה

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