מבקר מגיע לאתר שלך בלילה, והממשק מסנוור אותו עם רקע לבן. אם מתג המצב הכהה מיושם בצורה גרועה, המשתמש רואה הבזק לבן (FOUC) לפני שהנושא משתנה. הוא עוזב תוך פחות מ-3 שניות. אנו מגדירים מצב כהה עבור 1C-Bitrix עם מעברים חלקים, העדפות שמורות, וללא רכיבים שבורים. אנו מציעים פתרון מפתח ביד עם אחריות ל-12 חודשים. קבל ייעוץ חינם — נעריך את הפרויקט שלך תוך שעתיים.
כיצד אנו מיישמים מצב כהה מפתח ביד
התהליך אורך 2–3 ימים. ראשית, אנו מבצעים ביקורת על התבנית הנוכחית: צבעים, גופנים, תמונות. לאחר מכן אנו ממירים את כל הצבעים למאפיינים מותאמים אישית של CSS. כבר יש לנו מערכת מוכחת של 20+ משתנים לאלמנטים בסיסיים (רקע, טקסט, הדגשות, גבולות). זה מהיר יותר מאשר לבנות מאפס. בפרויקט אחד עם קטלוג של 50,000 פריטים, חסכנו כ-30% מזמן הפיתוח על ידי שימוש חוזר במשתנים והימנעות מעקיפות סלקטורים.
התכונה המרכזית: סקריפט זיהוי הנושא נטען בתוך הקוד לפני הסגנונות. ללא זה, מתרחש FOUC. אנו מכניסים אותו לתוך header.php מיד אחרי <head>:
<head> <meta charset="UTF-8"> <script> (function() { const t = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', t); })(); </script> <?php $APPLICATION->ShowHead(); ?> </head> הסקריפט מגדיר מיד את התכונה <head> <meta charset="UTF-8"> <script> (function() { const t = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.setAttribute('data-theme', t); })(); </script> <?php $APPLICATION->ShowHead(); ?> </head> על האלמנט השורשי, וכל הסגנונות מוחלים ללא דיחוי. זה מונע את ההבזק הלבן האופייני גם במכשירים איטיים.
למה מאפיינים מותאמים אישית של CSS במקום מחלקות?
גישה חלופית היא הוספת מחלקת data-theme על ה-body ועקיפת סגנונות באמצעות ספציפיות. אבל זה מוביל לשכפול קוד ומסבך את התחזוקה. מאפיינים מותאמים אישית של CSS עובדים מהר יותר (הדפדפן לא מחשב מחדש סלקטורים) ומאפשרים שינוי נושא על ידי עקיפת הערכים במקום אחד בלבד. בבדיקות שלנו, מהירות העיבוד השתפרה ב-10–15%. העלות הראשונית של יישום עם משתנים דומה, אך התחזוקה לטווח ארוך זולה משמעותית.
| גישה | מהירות | תמיכת דפדפנים | מורכבות הגירה |
|---|---|---|---|
| מאפיינים מותאמים אישית של CSS | גבוהה | מודרניים (96%+) | נמוכה (רק לשנות ערכים) |
| מבוסס מחלקות | בינונית | כולל IE11 | גבוהה (לעקוף כל סלקטור) |
| קובץ CSS נפרד | נמוכה | כל הדפדפנים | גבוהה (שכפול קוד) |
אנו ממליצים על מאפיינים מותאמים אישית של CSS. עבור IE11, אנו מספקים ירידה הדרגתית ללא מצב כהה. מידע נוסף על מאפיינים מותאמים אישית של CSS ב-MDN.
כיצד להימנע מ-FOUC בעת טעינת העמוד
FOUC הוא הבעיה המרכזית במצב כהה. אם סגנונות המצב הכהה נטענים באופן אסינכרוני או לאחר העיבוד, המשתמש רואה הבזק לבן. הפתרון שלנו: הסקריפט הפנימי ב-.dark (ראה לעיל) מגדיר <head> לפני שסגנונות CSS נטענים. כל הסגנונות משתמשים ב-data-theme המוגדרים עבור כל תכונה.
התאמת תמונות ורכיבים
בלוקים סטנדרטיים של Bitrix (var(--color-xxx), .bx-sls, טופס הרשאה) כוללים סגנונות משלהם. אנו עוקפים אותם באמצעות סלקטורים עם .popup-window-content:
:root[data-theme="dark"] .bx-sls { background: var(--color-card-bg); color: var(--color-text); } :root[data-theme="dark"] .popup-window-content { background: var(--color-bg); border-color: var(--color-border); } עבור תמונות, אנו משתמשים ב-data-theme או בפילטרים של CSS. עדיף להכין גרסה כהה של הלוגו ולהכניס אותה דרך :root[data-theme="dark"] .bx-sls { background: var(--color-card-bg); color: var(--color-text); } :root[data-theme="dark"] .popup-window-content { background: var(--color-bg); border-color: var(--color-border); } . לוגואים עם שקיפות דורשים גרסה נפרדת. עבור אייקונים, ניתן להחיל פילטר CSS <picture> על רקע בהיר, אך על רקע כהה התוצאה עלולה להיות לא קריאה. אנו ממליצים להכין שתי קבוצות של אייקונים: בהירים וכהים. מעברי צבע ברקע צריכים להיות מוחלפים באמצעות מאפיינים מותאמים אישית של CSS.
טעויות נפוצות במהלך היישום
טעות ראשונה: שכחת רכיבים שמתערבבים באופן אסינכרוני (למשל, עגלת קניות בחלון קופץ). שנייה: לא לטפל בתמונות עם סגנונות פנימיים. שלישית: לא לשמור את בחירת הנושא בפרופיל המשתמש המורשה של Bitrix, מה שגורם לאיפוס ההגדרה לאחר התנתקות. אנו מכסים את כל המקרים הללו במהלך הבדיקות.
מה כלול בעבודה
- ביקורת על סגנונות ורכיבים נוכחיים
- המרת צבעים למאפיינים מותאמים אישית של CSS (קובץ ראשי + רכיבים)
- סקריפט זיהוי נושא פנימי (ללא FOUC)
- כפתור החלפת נושא (דסקטופ + מובייל)
- שמירת בחירה ב-localStorage ובפרופיל המורשה (Bitrix)
- התאמת תמונות (לוגואים, אייקונים, רקעים)
- עקיפת רכיבים סטנדרטיים: חיפוש חכם, חלונות קופצים, הרשאה
- בדיקות ב-Chrome, Firefox, Safari, Edge
- תיעוד משתנים ו-API
- הדרכת מנהלי תוכן
שלבים ולוחות זמנים
| שלב | זמן |
|---|---|
| ביקורת ועיצוב | 1–2 שעות |
| המרה למשתנים | 6–12 שעות |
| לוגיקת סקריפט ומתג | 2–3 שעות |
| התאמת תמונות | 2–4 שעות |
| עקיפת רכיבים | 3–6 שעות |
| בדיקות ותיקונים | 2–3 שעות |
סה"כ 2 עד 3 ימים תלוי במורכבות התבנית. צור קשר להערכה מקדימה — זה לוקח פחות משעה. ניסיון עם Bitrix: 8+ שנים, מעל 50 פרויקטים שהושלמו. אנו מספקים אחריות ל-12 חודשים על כל העבודה. הזמן יישום מצב כהה היום.