הטמעת ערכת נושא כהה ב-1C-Bitrix באמצעות prefers-color-scheme

כיצד להתאים עיצוב ל-prefers-color-scheme ב-1C-Bitrix

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

אנו פותרים זאת באמצעות שאילתת המדיה prefers-color-scheme, תוך התאמת העיצוב ללא עומס על השרת. הניסיון שלנו בפריסת ערכות נושא כהות בפרויקטים עם קטלוגים של עד 100,000 פריטים מבטיח היעדר FOWT עם יישום נכון. המשימה נראית פשוטה, אך בפועל דורשת טיפול זהיר בתשתית CMS: מהחלפת צבעים מקודדים בתבניות קטלוג ועד להצבת סקריפט האתחול ב-header.php. הגישה שלנו משלבת מאפייני CSS מותאמים אישית ו-JavaScript, תוך התחשבות במאפייני Bitrix.

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

קשיים אופייניים ביישום ערכת נושא כהה ב-Bitrix כוללים שלוש בעיות עיקריות:

• FOWT (הבזק של ערכת נושא שגויה) — כאשר הסקריפט רץ לאחר רינדור ה-DOM, המשתמש רואה תחילה את ערכת הנושא הבהירה ולאחר מכן היא משתנה בפתאומיות. זה קריטי במיוחד לחיבורים ניידים איטיים — ב-95% מהמקרים, FOWT נעדר עם סקריפט סינכרוני.
• צבעים מקודדים ברכיבים — רכיבי קטלוג, עגלה, חיפוש וטופס הזמנה סטנדרטיים מכילים לעתים קרובות סגנונות מובנים עם #fff ו-#333 קבועים. החלפתם במאפייני CSS מותאמים אישית דורשת מעבר על כל התבניות.
• תמונות על רקע לבן — לוגואים, אייקונים, תמונות מוצר עם רקע לבן נראים זרים על רקע כהה. יש לשנות תמונות או להחיל מסנני CSS.

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

כיצד פועל prefers-color-scheme ומדוע הוא חשוב ל-Bitrix?

prefers-color-scheme הוא שאילתת מדיה CSS המזהה את הגדרות ערכת הנושא של המערכת של המשתמש. עבור Bitrix, הוא הופך לבסיס למעבר אוטומטי בין ערכות נושא בהירות וכהות. שימוש במאפייני CSS מותאמים אישית (var(--color-surface) במקום #ffffff) מאפשר לשנות את כל ערכת הצבעים באמצעות הוראת מדיה או מחלקה אחת. זה מאיץ את התחזוקה פי שניים ומפחית את נפח הקוד: אין צורך לעקוף כל בורר ידנית. השוו: עם גישת עקיפת הבוררים עבור 50 רכיבים, נדרשים כ-500 שורות CSS; עם מאפיינים מותאמים אישית, רק 20 שורות. חיסכון בזמן תחזוקה מגיע ל-70%. מידע נוסף על שאילתות מדיה ניתן למצוא ב-תיעוד MDN.

כיצד להימנע מ-FOWT בעת טעינה?

הסקריפט שבודק את ערכת הנושא של המערכת חייב לרוץ בצורה סינכרונית לפני הציור הראשון. אנו מציבים אותו ב-<head> מיד לאחר <meta charset>:

(function() {
    var saved = localStorage.getItem('theme');
    var dark = saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (dark) document.documentElement.classList.add('dark');
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
        if (!localStorage.getItem('theme')) document.documentElement.classList.toggle('dark', e.matches);
    });
})();

ב-Bitrix, אנו כוללים סקריפט זה כקוד מוטבע ב-(function(){ var saved = localStorage.getItem('theme'); var dark = saved ? saved==='dark' : window.matchMedia('(prefers-color-scheme: dark)').matches; if(dark) document.documentElement.classList.add('dark'); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e){ if(!localStorage.getItem('theme')) document.documentElement.classList.toggle('dark', e.matches); }); })(); :

<script>
  <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'/local/js/theme-init.min.js'); ?>
</script>

מתג ערכת נושא למשתמש

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

document.getElementById('theme-toggle').addEventListener('click', function(){
    var isDark = document.documentElement.classList.toggle('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    this.setAttribute('aria-label', isDark ? 'Светлая тема' : 'Тёмная тема');
});

האייקון משתנה באמצעות מאפייני CSS מותאמים אישית או פסאודו-אלמנט.

התאמת תמונות

עבור הלוגו, השתמשו ב-header.php עם התכונה <script> <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'/local/js/theme-init.min.js'); ?> </script> :

<picture>
  <source srcset="/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="/img/logo-light.svg" alt="Логотип">
</picture>

למעבר ידני, JavaScript משנה את ה-document.getElementById('theme-toggle').addEventListener('click', function(){ var isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); this.setAttribute('aria-label', isDark ? 'Светлая тема' : 'Тёмная тема'); }); של <picture>. עבור תמונות מוצר על רקע לבן, החילו מסנן CSS:

html.dark .product-image img { filter: brightness(0.9) contrast(1.05); } 

אילו רכיבים דורשים התאמה חובה?

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

השוואת גישות יישום

מה כלול בעבודה

אנו מספקים חבילה מלאה:

• ביקורת סגנונות האתר הנוכחיים — זיהוי כל הצבעים המקודדים.
• עיצוב פלטת צבעים לערכת נושא כהה.
• יישום מאפייני CSS מותאמים אישית בכל תבניות הרכיבים (קטלוג, עגלה, חיפוש, טופס הזמנה).
• שילוב סקריפט מוטבע ומתג.
• התאמת תמונות (לוגו, אייקונים, באנרים).
• בדיקות ב-Chrome, Firefox, Safari, Edge.
• תיעוד לתחזוקה עתידית.

תהליך עבודה

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

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