ویژگی‌های جوملا - دارک مود

این قابلیت جدید در جوملا ۵ به ظاهر خیلی زیبا و قابلیتی با یوایکس جذاب به شمار میرود. اما این قابلیت به دو دلیل فعلا آزار دهنده شده است. و اما دو دلیل

۱. دستور از سیستم

مشکلی اول این سیستم دارک مود در نسخهی ۵ جوملا، بهرهگیری از سیستمعامل یا مرورگر برا ایجاد دارک مود روی سایت است. به عبارتی شما گزینهای برای غیر فعال کردن این قابلیت ندارید مگر اینکه کلا سیستم عامل خود را در حالت Light قرار دهید.

۲. عدم سازگاری

هنوز افزونه‌های خود جوملا و حتی قالب جوملا درک درستی از دارک مود ندارند و برخی از نوشته‌ها در حالت دارک مود به یک حالت ناخوانا نمایش داده میشوند. هر چند که دستورات باید توسط CSS های خود قالب باطل شوند چرا که دارک مود ویندوز چندان جالب نیست و خوانایی جداول و دکمهها سخت و دشوار است.

خبر خوب این است که کنترل دارک مود قرار است در بخش قالب جوملا قابل کنترل شود و دکمه‌ی غیر فعال کردن این ویژگی اضافه شود. همچنین سازگاری افزونه‌ها نیز بهبود پیدا کند.

راهکارها:

1. غیر فعال کردن دارک مود ویندوز: سادهترین روش که شاید برای علاقهمندان به زمینهی مشکی چندان جالب نباشد، غیر فعال کردن این ویژگی در ویندوز است. ناگفته نماند که دارک مود ویندوز هم چنگی به دل نمیزند و ممکن است برخی از المانها مانند رنگ متن دکمههایی که بک گراند سفید دارند را سفید نشان دهد.
2. تغییر استایلهای قالب پیشفرض مدیریت: با این روش شما المانهایی که برای دارک مود خوب نمایش نمیدهد را مثتثنی میکنید و استایلهای جداگانهای برای آن مینویسید. برای مثال جداول در برخی از افزونهها به خوبی نمایش نمیدهد. شما میتوانید سلکتور مورد نظر را انتخاب کرده و به آن استایل سفارشی بدهید. این راهکار موقت است تا زمانی که افزونهها همگی برای جوملا ۵ سازگار شوند و دارک مود را به رسمیت بشناسند.
   ایجاد یک دکمهی سفارشی در پنل مدیریت: برای اینکار ابتدا ویرایشگر خود را در حالت Code Mirror قرار دهید و به قسمت مدیریت ماژولهای مدیریت بروید.
   سپس یک ماژول از نوع Custom HTML یا همان HTML سفارشی ایجاد کنید و یک عنوان دلخواه برای آن بگذارید.
   کد زیر را در محتوای HTML وارد کنید و ماژول را در موقعیت Status و با سطح دسترسی Special قرار دهید:

<button type=&quotbutton&quot class=&quotheader-item-content dms-button&quot style=&quotborder: none;&quot>

  <span class=&quotheader-item-icon&quot>

    <span style=&quotmargin: 3px; font-size: 1.2rem; transition: all .6s ease;&quot>🌓</span>

  </span>

  <span class=&quotheader-item-text&quot>Dark Mode Switcher</span>

</button>

  (() => {

    'use strict';

    // Run script only once

    if (typeof window.jDarkMode !== &quotundefined&quot) return;

    // Initial settings

    let darkMode = window.jDarkMode = (getDarkModeLocalStorage() === &quottrue&quot);

    setDarkModeLocalStorage(darkMode);

    // Update the first visible &quotDark Mode Switcher&quot button to avoid flickering

    updateButton(document.querySelector(&quotbutton.dms-button&quot), darkMode);

    updateMode(darkMode);

    function updateButton(btn, darkMode) {

      const icon = btn.querySelector(&quot.header-item-icon > span&quot);

      const text = btn.querySelector(&quot.header-item-text&quot);

      if (darkMode) {

        icon = &quot🌙&quot

        icon.style.backgroundColor = &quotrgb(31, 48, 71)&quot

        text = &quot Dark Mode&quot

      } else {

        icon = &quot☀️&quot

        icon.style.backgroundColor = &quottransparent&quot

        text = &quotLight Mode&quot

      }

    }

      function updateMode(darkMode) {

      for (const sheet of document.styleSheets) {

        //if (sheet.href && sheet.href.includes(&quotatum/css/template&quot)) {

        for (let i = sheet.cssRules.length - 1; i >= 0; i--) {

          let rule = sheet.cssRules[i].media;

          if (typeof rule !== &quotundefined&quot && rule.mediaText.includes(&quotprefers-color-scheme&quot)) {

            if (darkMode) {

              if (!rule.mediaText.includes(&quot(prefers-color-scheme: light)&quot)) rule.appendMedium(&quot(prefers-color-scheme: light)&quot);

              if (!rule.mediaText.includes(&quot(prefers-color-scheme: dark)&quot)) rule.appendMedium(&quot(prefers-color-scheme: dark)&quot);

              if (rule.mediaText.includes(&quotoriginal&quot)) rule.deleteMedium(&quotoriginal-prefers-color-scheme&quot);

            } else { //else if (!darkMode) {

              rule.appendMedium(&quotoriginal-prefers-color-scheme&quot);

              if (rule.mediaText.includes(&quotlight&quot)) rule.deleteMedium(&quot(prefers-color-scheme: light)&quot);

              if (rule.mediaText.includes(&quotdark&quot)) rule.deleteMedium(&quot(prefers-color-scheme: dark)&quot);

            } /*else {

              rule.appendMedium(&quot(prefers-color-scheme: dark)&quot);

              if (rule.mediaText.includes(&quotlight&quot)) rule.deleteMedium(&quot(prefers-color-scheme: light)&quot);

              if (rule.mediaText.includes(&quotoriginal&quot)) rule.deleteMedium(&quotoriginal-prefers-color-scheme&quot);        

            }*/

          }

        }

        //}

      }

    }

    // Sets localStorage state

    function setDarkModeLocalStorage(state) {

      localStorage.setItem(&quotjDarkMode&quot, state);

    }

    // Gets localStorage state

    function getDarkModeLocalStorage() {

      return localStorage.getItem(&quotjDarkMode&quot);

    }

    // Update all &quotDark Mode Switcher&quot buttons after DOMContentLoaded

    document.addEventListener('DOMContentLoaded', () => {

      const dmsBtns = document.querySelectorAll(&quotbutton.dms-button&quot);

      dmsBtns.forEach((dmsBtn) => {

        updateButton(dmsBtn, darkMode);

        // Set eventListeners for all &quotdark-mode&quot-toggle-buttons on click and set localStorage

        dmsBtn.addEventListener(&quotclick&quot, () => {

          let darkMode = window.jDarkMode = (getDarkModeLocalStorage() === &quotfalse&quot);

          setDarkModeLocalStorage(darkMode);

          dmsBtns.forEach((dmsBtn) => updateButton(dmsBtn, darkMode));

          updateMode(darkMode);

        });

      });

    });

  })();

با این کد یک دکمه در موقعیت status ایجاد می‌شود که با کلیک روی آن به حالت لایت و دارک سوییچ می‌شود.

البته همه‌ی این راهکارها موقت است و بزودی در نسخه‌های جدید شاهد بهبود وضعیت این قابلیت خواهیم بود.