كيفية تبديل النمط الداكن

استخدام CSS و JavaScript لتتبادل بين نمطين داكن وأبيض.

تبديل الفئة

استخدم أي عنصر يجب أن يحتوي على محتوى التصميم الذي تريد تبديله. في مثالنا، لغرض البساطة، سنستخدم <body>:

<body>

الإعداد <body> تعديل أنماط العنصر، أنشئ ملفًا لتبديل الأنماط. .dark-mode الفئات:

body {
  السماح بالتمدد: 25 بكسل;
  لون الخلفية: أبيض;
  اللون: أسود;
  حجم الخط: 25 بكسل;
}
.dark-mode {
  لون الخلفية: أسود;
  اللون: أبيض;
}

الحصول <body> العنصر وفي .dark-mode تبديل بين الفئات:

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