ایجاد دارک مود (Dark Mode) در وردپرس و المنتور بدون افزونه

سلام رایا وردپرسی عزیز! 🙂❤️

امروز تو این پست ویژه می‌خوام بهت یاد بدم که چطور بدون نصب هیچ افزونه‌ای، فقط با المنتور و کمی کدنویسی، یه دارک مود جذاب به سایتت اضافه کنی. 😍 اگه کنجکاوی که بدونی چطوری می‌تونی این ویژگی رو روی سایتت پیاده کنی، این مقاله رو به هیچ وجه از دست نده! 😎

همونطور که می‌دونی، دارک مود (Dark Mode) این روزا به یک قابلیت محبوب در دنیای وب تبدیل شده؛ اما واقعاً دارک مود چیه و چرا باید ازش استفاده کنی؟ 🤔 شاید این سوالا الان داره توی ذهنت میچرخه و دنبال جواب براشون می‌گردی. نگران نباش، من تو این مقاله به همه سوالاتت جواب میدم! 💡

🌌 دارک مود چیه و چرا اهمیت داره؟

دارک مود یه حالت نمایشه که رنگ‌های روشن صفحه رو با رنگ‌های تیره جایگزین می‌کنه. این حالت به کاربر این امکان رو می‌ده که رابط کاربری سایت رو متناسب با شرایط محیطی و ترجیحات شخصی خودش تنظیم کنه. در واقع، دارک مود به افراد اجازه می‌ده تا تم سایت رو از حالت روشن (Light Mode) به حالت تاریک (Dark Mode) تغییر بدن.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

این ویژگی به‌ویژه برای افرادی که در محیط‌های کم‌نور وبگردی می‌کنن، فوق‌العاده مفیده. چرا؟ چون باعث کاهش فشار روی چشم‌ها و راحت‌تر شدن خوندن محتوا می‌شه. 🌙

🎯 مزایای اصلی دارک مود

دارک مود یا حالت تاریک مزایایی زیادی داره از جمله:

1. سلامت چشم و راحتی بیشتر

• کاهش خستگی چشم در مشاهده طولانی مدت صفحات وب
• مناسب برای مطالعه شبانه و محیط‌های کم نور
• کاهش نور آبی که باعث اختلال در خواب می‌شه
• جلوگیری از سردرد و فشار چشم

2. بهینه‌ سازی مصرف باتری 🔋

• کاهش قابل توجه مصرف باتری در گوشی‌های هوشمند با نمایشگر OLED
• صرفه‌جویی در مصرف انرژی
• افزایش طول عمر باتری دستگاه‌ها

3. زیبایی و جذابیت بصری ✨

• ایجاد ظاهری مدرن تر و حرفه‌ای تر
• ایجاد تضاد رنگی مناسب و خوانایی بهتر
• امکان خلاقیت بیشتر در طراحی

4. تجربه کاربری بهتر 👥

• قابلیت شخصی‌ سازی برای کاربران
• حس لوکس و پیشرفته بودن سایت
• افزایش زمان حضور کاربر در سایت

حالا که با دارک مود و مزایاش آشنا شدی، بیایید بریم سراغ اصل مطلب: چطور بدون افزونه دارک مود رو به سایت وردپرسی اضافه کنیم؟ 🤔

🔦ایجاد دارک مود (Dark Mode) در سایت بدون افزونه

من به صورت مرحله به مرحله بهت می‌گم که برای ایجاد قابلیت دارک مود در سایتت باید چه کارهایی انجام بدی. پس لطفاً دقیقاً طبق آموزش‌ ها پیش برو تا بدون هیچ مشکلی دارک مود رو روی سایتت پیاده کنی. 🙂

گام اول: ایجاد دکمه تغییر حالت بین روشن و تاریک 🌓

اولین قدم اینه که یک دکمه برای فعال یا غیرفعال کردن دارک مود بسازیم. این دکمه به‌عنوان سوئیچ عمل می‌کنه که کاربران می‌تونن با استفاده از اون تم سایت رو تغییر بدن. برای این کار:

• ویجت HTML رو به برگه المنتوری خودت اضافه کن.
• سپس کدهای زیر رو داخل ویجت قرار بده تا سوئیچ دارک مود رو ایجاد کنی. 🌙

<label for="themeToggle" class="theme-toggle theme-toggle-btn">
  <input type="checkbox" id="themeToggle" class="theme-toggle-input" />
  <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" stroke="none">
    <mask id="moon-mask">
      <rect x="0" y="0" width="20" height="20" fill="white"></rect>
      <circle cx="11" cy="3" r="8" fill="black"></circle>
    </mask>
    <circle class="sun-moon" cx="10" cy="10" r="8" mask="url(#moon-mask)"></circle>
    <g>
      <circle class="sun-ray sun-ray-1" cx="18" cy="10" r="1.5"></circle>
      <circle class="sun-ray sun-ray-2" cx="14" cy="16.928" r="1.5"></circle>
      <circle class="sun-ray sun-ray-3" cx="6" cy="16.928" r="1.5"></circle>
      <circle class="sun-ray sun-ray-4" cx="2" cy="10" r="1.5"></circle>
      <circle class="sun-ray sun-ray-5" cx="6" cy="3.1718" r="1.5"></circle>
      <circle class="sun-ray sun-ray-6" cx="14" cy="3.1718" r="1.5"></circle>
    </g>
  </svg>
</label>

توجه! اگه می‌خوای این دکمه رو در هدر سایتت قرار بدی تا همیشه تو دید کاربر باشه و بتونه حالت دارک و لایت رو تغییر بده، دقت کن که عرض ویجت دکمه رو از طریق تب پیشرفته روی حالت “در متن” قرار بدی.

• بعد از این، برای اینکه دکمه تغییر حالت به درستی نمایش داده بشه، باید کدهای CSS مربوطه رو هم در قسمت تب پیشرفته ویجت HTML، بخش کدهای CSS اضافی قرار بدی. ✨

/*toggle styles By RayaWp.ir */
.theme-toggle {
  color: #bbb;
  width: 3em;
}

.theme-toggle-btn {
  position: relative;
  cursor: pointer;
}

.theme-toggle-btn .theme-toggle-input {
  opacity: 0;
  width: 100%;
  aspect-ratio: 1;
}

.theme-toggle-btn svg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform: rotate(40deg);
}

.theme-toggle-btn svg .sun-moon {
  transform-origin: center center;
  transition: inherit;
  transform: scale(1);
}

.theme-toggle-btn svg .sun-ray {
  transform-origin: center center;
  transform: scale(0);
}

.theme-toggle-btn svg mask > circle {
  transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
  transform: translate(0, 0);
}
.theme-toggle-btn svg .sun-ray-2 { animation-delay: 0.05s; }
.theme-toggle-btn svg .sun-ray-3 { animation-delay: 0.1s; }
.theme-toggle-btn svg .sun-ray-4 { animation-delay: 0.17s; }
.theme-toggle-btn svg .sun-ray-5 { animation-delay: 0.25s; }
.theme-toggle-btn .theme-toggle-input:checked + svg {
  transform: rotate(90deg);
}

.theme-toggle-btn .theme-toggle-input:checked + svg mask > circle {
  transform: translate(16px, -3px);
}

.theme-toggle-btn .theme-toggle-input:checked + svg .sun-moon {
  transform: scale(0.55);
}

.theme-toggle-btn .theme-toggle-input:checked + svg .sun-ray {
  animation: show-ray 0.4s ease forwards;
}

@keyframes show-ray {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.dark-theme {
  background-color: rgb(57, 57, 57);
  transition: background-color 0.3s, color 0.3s;
}

توجه! در کد بالا، از خط 67 به پایین، استایل های مربوط به دارک مود هستن. قبل از اون، استایل‌ها برای دکمه سوئیچ تغییر وضعیت دارک مود هستن. این استایل‌ها باعث می‌شن وقتی کاربر دارک مود رو فعال می‌کنه، پس‌زمینه سایت تیره بشه. 🌟

گام دوم: اضافه کردن کد جاوا اسکریپت برای فعال‌ سازی دارک مود 💻

حالا باید کاری کنیم با کلیک روی سوئیچ یا دکمه تغییر حالت، تم سایت تغییر کنه. کد زیر رو در پایین ترین قسمت بدنه سایت (قبل از بسته شدن تگ body) اضافه کن:

<script>
var themeToggle = document.querySelector('#themeToggle');

function setDarkMode(isDark) {
    var darkModeClass = 'dark-theme';
    
    if (isDark) {
        document.body.classList.add(darkModeClass);
    } else {
        document.body.classList.remove(darkModeClass);
    }
    
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    themeToggle.checked = isDark;
}

themeToggle.addEventListener('change', function(e) {
    setDarkMode(e.target.checked);
});

document.addEventListener('DOMContentLoaded', function() {
    var savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        setDarkMode(true);
    }
});
</script>

برای افزودن کد بالا در المنتور، به پیشخوان برو، روی المنتور در منوی سمت راست کلیک کن، سپس در قسمت کد سفارشی یک عنوان دلخواه برای اسکریپت بنویس (مثلاً Dark Mode). حالا کدهای بالا رو وارد کن و موقعیتش رو در انتها (تگ بسته body) قرار بده. بعد روی دکمه انتشار بزن، در پنجره باز شده کل سایت رو انتخاب کن و تغییرات رو ذخیره کن. 🌟

گام سوم: سفارشی‌ سازی رنگ‌ها و استایل‌ها در دارک مود 🖌️

با انجام مراحل فوق، دکمه دارک مود به سایتت اضافه می‌شه و عملکرد تغییر حالت روشن به تاریک و بالعکس به درستی انجام و بکگراند سایت هم تیره می‌شه. اما یه مشکلی هست، وقتی حالت دارک فعال می‌شه، رنگ بعضی عناصر و المان های صفحه ممکنه مشکی و تیره باشه و تو حالت دارک مود به خوبی دیده نشه. 😬

و این اصلا چیز جالبی نیست! برای اینکه بتونیم استایل حالت دارک رو درست تنظیم کنیم، از کلاسی که برای دارک مودمون ایجاد کردیم (یعنی dark-theme) استفاده می‌کنیم و به المان‌ها و ویجت‌ها در حالت دارک استایل می‌دیم. میگی چطور؟! ادامه رو بخون تا بهت بگم !

با اضافه شدن کلاس dark-theme به هر المانی، استایلش در حالت تاریک تعریف می‌شه. مثلاً من یه ویجت دارم که کلاسش RayaWp هست. در تم روشن سایت، رنگ بکگراند ویجت مشکلی نداره، اما وقتی حالت تاریک رو فعال می‌کنم، رنگ بکگراندش مشکی می‌شه و دیگه دیده نمی‌شه. 😬

برای حل این مشکل، باید کد CSS زیر رو براش بزنم (یعنی قبل یا بعد کلاس .dark-theme رو قرار بدم تا به مرورگر بگم در حالت تاریک، استایل رو این شکلی نشون بده) اینطوری در حالت دارک رنگش به رنگی که می‌خوام، مثلاً خاکستری، تبدیل میشه. 🌑🎨

.dark-theme .Raya-G {
  background-color: #FFFFFF;
  }

به همین راحتی میتونی دارک مود سایت رو طبق سلیقه خودت کاستوم کنی.

توصیه: دکمه دارک مود رو فعال کن و ببین تو حالت تیره کدوم ویجت‌ها و المان‌ها رنگ بندیشون خوب نیست و به نوعی با رنگ بکگراند مشکی دارک یکی شدن. 🙈 کلاسشون رو پیدا کن و قبل یا بعد کلاس .dark-theme قرار بده، بعد کد CSS مدنظرت رو براشون بنویس. ✨ کدهای CSS دارک رو هم می‌تونی در قسمت تب پیشرفته ویجت HTML یا در قسمت CSS اضافی بخش سفارشی سازی وردپرس قرار بدی. 💻🌑

از !important در CSS استفاده کن هر جا دیدی استایلی که میدی اعمال نمیشه!

🌟 جمع بندی

تبریک می‌گم! حالا سایتت یک دارک مود شیک و کاربرپسند داره و کاربران می‌تونن بین حالت روشن و تاریک جابجا بشن. این ویژگی نه تنها تجربه کاربری رو بهتر می‌کنه، بلکه باعث میشه سایتت حرفه‌ای‌تر به نظر بیاد. ✨

اگر این آموزش برات مفید بود، لطفاً نظرت رو در کامنت‌ها برام بنویس! 😍 اگر سوالی داشتی یا مشکلی پیش اومد، حتماً بگو تا کمکت کنم. فعلن تا یه آموزش خاص دیگه خدانگهدار 🙂