كيف - تبديل الوضع الداكن
قم بالتبديل بين الوضع الداكن والفاتح باستخدام CSS و JavaScript.
تبديل الفصل
الخطوة 1) أضف HTML:
استخدم أي عنصر يجب أن يخزن المحتوى الذي تريد تبديل التصميم له. في مثالنا ، سنستخدم <body>
من أجل البساطة:
مثال
<body>
الخطوة 2) أضف CSS:
صمم <body>
العنصر وأنشئ .dark-mode
فئة للتبديل:
مثال
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
الخطوة 3) أضف JavaScript:
احصل على <body>
العنصر وقم بالتبديل بين .dark-mode
الفصل الدراسي:
مثال
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
نصيحة: راجع أيضًا كيفية إضافة فصل .
نصيحة: تعرف على المزيد حول خاصية classList في مرجع JavaScript الخاص بنا.