قابلیت دارک مود جوملا ۵

[miladsafa]

این قابلیت جدید در جوملا ۵ به ظاهر خیلی زیبا و قابلیتی با یوایکس جذاب به شمار میرود. اما این قابلیت به دو دلیل فعلا آزار دهنده شده است. و اما دو دلیل
۱. دستور از سیستممشکلی اول این سیستم دارک مود در نسخهی ۵ جوملا، بهرهگیری از سیستمعامل یا مرورگر برا ایجاد دارک مود روی سایت است. به عبارتی شما گزینهای برای غیر فعال کردن این قابلیت ندارید مگر اینکه کلا سیستم عامل خود را در حالت Light قرار دهید.
۲. عدم سازگاریهنوز افزونه‌های خود جوملا و حتی قالب جوملا درک درستی از دارک مود ندارند و برخی از نوشته‌ها در حالت دارک مود به یک حالت ناخوانا نمایش داده میشوند. هر چند که دستورات باید توسط CSS های خود قالب باطل شوند چرا که دارک مود ویندوز چندان جالب نیست و خوانایی جداول و دکمهها سخت و دشوار است.
خبر خوب این است که کنترل دارک مود قرار است در بخش قالب جوملا قابل کنترل شود و دکمه‌ی غیر فعال کردن این ویژگی اضافه شود. همچنین سازگاری افزونه‌ها نیز بهبود پیدا کند.
راهکارها:


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



<button type="button" class="header-item-content dms-button" style="border: none;">
<span class="header-item-icon">
<span style="margin: 3px; font-size: 1.2rem; transition: all .6s ease;">🌓</span>
</span>
<span class="header-item-text">Dark Mode Switcher</span>
</button>
(() => {
'use strict';
// Run script only once
if (typeof window.jDarkMode !== "undefined") return;
// Initial settings
let darkMode = window.jDarkMode = (getDarkModeLocalStorage() === "true");
setDarkModeLocalStorage(darkMode);
// Update the first visible "Dark Mode Switcher" button to avoid flickering
updateButton(document.querySelector("button.dms-button"), darkMode);
updateMode(darkMode);
function updateButton(btn, darkMode) {
const icon = btn.querySelector(".header-item-icon > span");
const text = btn.querySelector(".header-item-text");
if (darkMode) {
icon = "🌙"
icon.style.backgroundColor = "rgb(31, 48, 71)"
text = " Dark Mode"
} else {
icon = "☀️"
icon.style.backgroundColor = "transparent"
text = "Light Mode"
}
}
function updateMode(darkMode) {
for (const sheet of document.styleSheets) {
//if (sheet.href && sheet.href.includes("atum/css/template")) {
for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
let rule = sheet.cssRules[i].media;
if (typeof rule !== "undefined" && rule.mediaText.includes("prefers-color-scheme")) {
if (darkMode) {
if (!rule.mediaText.includes("(prefers-color-scheme: light)")) rule.appendMedium("(prefers-color-scheme: light)");
if (!rule.mediaText.includes("(prefers-color-scheme: dark)")) rule.appendMedium("(prefers-color-scheme: dark)");
if (rule.mediaText.includes("original")) rule.deleteMedium("original-prefers-color-scheme");
} else { //else if (!darkMode) {
rule.appendMedium("original-prefers-color-scheme");
if (rule.mediaText.includes("light")) rule.deleteMedium("(prefers-color-scheme: light)");
if (rule.mediaText.includes("dark")) rule.deleteMedium("(prefers-color-scheme: dark)");
} /*else {
rule.appendMedium("(prefers-color-scheme: dark)");
if (rule.mediaText.includes("light")) rule.deleteMedium("(prefers-color-scheme: light)");
if (rule.mediaText.includes("original")) rule.deleteMedium("original-prefers-color-scheme");
}*/
}
}
//}
}
}
// Sets localStorage state
function setDarkModeLocalStorage(state) {
localStorage.setItem("jDarkMode", state);
}
// Gets localStorage state
function getDarkModeLocalStorage() {
return localStorage.getItem("jDarkMode");
}
// Update all "Dark Mode Switcher" buttons after DOMContentLoaded

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

const dmsBtns = document.querySelectorAll("button.dms-button");

dmsBtns.forEach((dmsBtn) => {

updateButton(dmsBtn, darkMode);

// Set eventListeners for all "dark-mode"-toggle-buttons on click and set localStorage
dmsBtn.addEventListener("click", () => {
let darkMode = window.jDarkMode = (getDarkModeLocalStorage() === "false");
setDarkModeLocalStorage(darkMode);
dmsBtns.forEach((dmsBtn) => updateButton(dmsBtn, darkMode));
updateMode(darkMode);
});
});
});
})();

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


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



منبع: ویرگول جوملا (https://virgool.io/@Joomla/%D9%88%DB%8C%DA%98%DA%AF%DB%8C-%D9%87%D8%A7%DB%8C-%D8%AC%D9%88%D9%85%D9%84%D8%A7-%D8%AF%D8%A7%D8%B1%DA%A9-%D9%85%D9%88%D8%AF-ny45mwfealpc)