چگونه حالت تاریک را تغییر دهیم

با استفاده از CSS و JavaScript می‌توانید بین حالت تاریک و روشن تغییر دهید.

آزمایش شخصی کنید

تبدیل کلاس

مرحله اول - اضافه کردن HTML:

از هر عنصری که باید محتوای طراحی قابل تغییر شما را ذخیره کند، استفاده کنید. در مثال ما، برای سادگی، از <body>:

<body>

مرحله دوم - اضافه کردن CSS:

تنظیم <body> استایل عناصر و ایجاد یک کلاس برای تغییر .dark-mode کلاس:

body {
  پادکش: 25 پیکسل;
  رنگ پس‌زمینه: سفید;
  رنگ: سیاه;
  اندازه فونت: 25 پیکسل;
}
.dark-mode {
  رنگ پس‌زمینه: سیاه;
  رنگ: سفید;
}

مرحله سوم - اضافه کردن JavaScript:

دریافت <body> عنصر و در .dark-mode تبدیل بین کلاس‌ها:

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

آزمایش شخصی کنید

صفحات مرتبط

آموزش:چگونه انجام دهیم: افزودن کلاس

منابع مرجع:HTML DOM Element property classList