جوملا فارسی
جوملا فارسی
خواندن ۳ دقیقه·۹ ماه پیش

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

دارک مود در جوملا ۵
دارک مود در جوملا ۵


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

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

مشکلی اول این سیستم دارک مود در نسخهی ۵ جوملا، بهرهگیری از سیستمعامل یا مرورگر برا ایجاد دارک مود روی سایت است. به عبارتی شما گزینهای برای غیر فعال کردن این قابلیت ندارید مگر اینکه کلا سیستم عامل خود را در حالت 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 ایجاد می‌شود که با کلیک روی آن به حالت لایت و دارک سوییچ می‌شود.

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

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