هذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداك • الرجوع الى صفحة بيانات التصميم
الوضع الداكن والعادي
2 مشترك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: دعم مشاكل التومبلايت و الأكواد :: أرشيف قسم "مشاكل التومبلايت و الأكواد"
صفحة 1 من اصل 1
الوضع الداكن والعادي
السلام عليكم ورحمه الله وبركاتة?
ممكن? طريقة لآضافة الوضع الداكن لمنتداي وشكرا
ممكن? طريقة لآضافة الوضع الداكن لمنتداي وشكرا
عدل سابقا من قبل elmasry8214 في الجمعة 4 أكتوبر 2024 - 0:26 عدل 1 مرات
رد: الوضع الداكن والعادي
وعليكم السلام ورحمة الله وبركاته
اهلا اخي elmasry8214
ماهي نسخة منتداك
اهلا اخي elmasry8214
ماهي نسخة منتداك
Vito corleone يعجبه هذا الموضوع
رد: الوضع الداكن والعادي
اهلا
اولا ضع الكود التالي بالهيدر
الكود الثاني جافا واختار جميع الصفحات
الكود الاخير css
ربما لن يعمل على جميع الاماكن
لان نسخة phpBB2 هي الاكثر تعقيدا
لهذا يحتاج تركيب الكود في منتداك اولا
ثم نضع التعديلات المناسبة له
اولا ضع الكود التالي بالهيدر
- الكود:
<button id="theme-toggle-button">
المظهر الداكن
</button>
الكود الثاني جافا واختار جميع الصفحات
- Spoiler:
- الكود:
document.addEventListener("DOMContentLoaded", function() {
const themeToggleButton = document.getElementById("theme-toggle-button");
// تابع لتبديل المظهر
function toggleTheme(isDarkMode) {
if (isDarkMode) {
document.body.classList.add("dark-mode");
themeToggleButton.textContent = "المظهر العادي";
themeToggleButton.style.backgroundImage = "url('https://2img.net/i/fa/twemoji/16x16/2600.png')";
} else {
document.body.classList.remove("dark-mode");
themeToggleButton.textContent = "المظهر الداكن";
themeToggleButton.style.backgroundImage = "url('https://2img.net/i/fa/twemoji/16x16/1f319.png')";
}
}
// تابع لتعيين قيمة الكوكي
function setThemeCookie(isDarkMode) {
document.cookie = "darkMode=" + isDarkMode;
}
// تابع للحصول على قيمة الكوكي
function getThemeCookie() {
const cookies = document.cookie.split(';');
for (const cookie of cookies) {
const [name, value] = cookie.split('=');
if (name.trim() === 'darkMode') {
return value.trim() === 'true';
}
}
return false;
}
// التبديل عند تحميل الصفحة
const isDarkMode = getThemeCookie();
toggleTheme(isDarkMode);
// التبديل عند النقر على الزر
themeToggleButton.addEventListener("click", function() {
const isDarkMode = document.body.classList.contains("dark-mode");
toggleTheme(!isDarkMode);
setThemeCookie(!isDarkMode);
});
});
الكود الاخير css
- Spoiler:
- الكود:
.dark-mode {
background: #101010!important;
color: #d4d4d4!important;
}
body.dark-mode body{
background: #101010!important;
color: #d4d4d4!important;
}
.light-mode {
background: #fff!important;
color: #222!important; /* لون النص يجب أن يكون مختلفًا بين المظهرين */
}
body.dark-mode .profile-advanced-stats dt {
color: black !important;
background: #ffffff2e;
}
body.dark-mode #tabs li:hover, body.dark-mode .tabs li:hover {
background-color: #868686;
}
body.dark-mode .poster-profile {
color: #000000 !important;
background: #ffffffb5;
margin-bottom: 4px;
}
body.dark-mode .block-login .input,body.dark-mode .block-modal .input {
color: azure!important;
}
body.dark-mode .forumline > tbody > tr.post > td,body.dark-mode .forumline td,body.dark-mode .table1 th,body.dark-mode .table1 td,
body.dark-mode .forumline tbody tr,
body.dark-mode .table1 tbody tr,
body.dark-mode #tabs li a, body.dark-mode .tabs li a,
body.dark-mode #tabs ul, body.dark-mode .tabs ul,
body.dark-mode .mod-table-mobile-head,
body.dark-mode .forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right,
body.dark-mode .lp,
body.dark-mode .block-topics .block-topics-posts i {
background: #1f1f1f!important;
color: #d4d4d4!important;
}
body.dark-mode a {
color: #fff;
}
body.dark-mode a:visited {
color: #c99686 !important;
}
/* زر التبديل */
#theme-toggle-button {
background-color: #000; /* لون افتراضي للزر */
color: #fff; /* لون النص افتراضي */
border: none;
padding: 10px 20px;
cursor: pointer;
background-image: url('moon.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px; /* تغيير البادينج ليتناسب مع الصورة */
transition: background-color 0.3s, color 0.3s; /* تحويل الانتقالي */
}
/* تغيير لون الزر عند الضغط */
#theme-toggle-button.dark-mode {
background-color: #777; /* لون الزر في حالة المظهر الداكن */
color: #000; /* لون النص عند الضغط */
}
/* الستايلات للمظهر العادي */
.light-mode {
background: #fff!important;
color: #222!important; /* لون النص يجب أن يكون مختلفًا بين المظهرين */
}
/* زر التبديل */
#theme-toggle-button {
background-color: #000; /* لون افتراضي للزر */
color: #fff; /* لون النص افتراضي */
border: none;
padding: 10px 20px;
cursor: pointer;
background-image: url('moon.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px; /* تغيير البادينج ليتناسب مع الصورة */
transition: background-color 0.3s, color 0.3s; /* تحويل الانتقالي */
}
/* تغيير لون الزر عند الضغط */
#theme-toggle-button.dark-mode {
background-color: #777; /* لون الزر في حالة المظهر الداكن */
color: #000; /* لون النص عند الضغط */
}
ربما لن يعمل على جميع الاماكن
لان نسخة phpBB2 هي الاكثر تعقيدا
لهذا يحتاج تركيب الكود في منتداك اولا
ثم نضع التعديلات المناسبة له
رد: الوضع الداكن والعادي
اهلا اخيelmasry8214 كتب:مشتغلش
تاكد من تفعيل الجافا في منتداك ؟
Vito corleone يعجبه هذا الموضوع
رد: الوضع الداكن والعادي
هذا من كود الcsselmasry8214 كتب:حصل هو اشتغل على الفئات وخلي الخلفيه رقم 2 في المنتدى سودة تلقائي
انتظر حتى اقوم بالتعديل عليه ليناسب منتداك
Vito corleone يعجبه هذا الموضوع
رد: الوضع الداكن والعادي
منتظرككونان2000 كتب:هذا من كود الcsselmasry8214 كتب:حصل هو اشتغل على الفئات وخلي الخلفيه رقم 2 في المنتدى سودة تلقائي
انتظر حتى اقوم بالتعديل عليه ليناسب منتداك
رد: الوضع الداكن والعادي
اهلاelmasry8214 كتب:منتظرك
استبدل الcss السابق بالتالي
- الكود:
.dark-mode {
background: #101010!important;
color: #d4d4d4!important;
}
body.dark-mode body {
background: #101010!important;
color: #d4d4d4!important;
}
.light-mode {
background: #fff!important;
color: #222!important; /* لون النص يجب أن يكون مختلفًا بين المظهرين */
}
body.dark-mode .profile-advanced-stats dt {
color: black !important;
background: #ffffff2e;
}
body.dark-mode #tabs li:hover, body.dark-mode .tabs li:hover {
background-color: #868686;
}
body.dark-mode .poster-profile {
color: #000000 !important;
background: #ffffffb5;
margin-bottom: 4px;
}
body.dark-mode .block-login .input,body.dark-mode .block-modal .input {
color: azure!important;
}
body.dark-mode .forumline > tbody > tr.post > td,body.dark-mode .forumline td,body.dark-mode .table1 th,body.dark-mode .table1 td,
body.dark-mode .forumline tbody tr,
body.dark-mode .table1 tbody tr,
body.dark-mode #tabs li a, body.dark-mode .tabs li a,
body.dark-mode #tabs ul, body.dark-mode .tabs ul,
body.dark-mode .bodyline,
body.dark-mode .forumline .row1,body.dark-mode .forumline .row2,body.dark-mode .forumline .row3,body.dark-mode .forumline .row3Right,
body.dark-mode .lp,
body.dark-mode .block-topics .block-topics-posts i,body.dark-mode .inkor-sign-box{
background: #1f1f1f!important;
color: #d4d4d4!important;
}
body.dark-mode input.post,body.dark-mode textarea.post,body.dark-mode select {
background-color: #363636 !important;
color: #ffffff !important;
}
body.dark-mode .gen,body.dark-mode .genmed,body.dark-mode .gensmall {
color: #afafaf;
}
body.dark-mode a {
color: #fffefe !important
}
body.dark-mode .stat-in {
background-color: #4c4b4b;
}
body.dark-mode .stat-in span {
color: #ffffff;
}
body.dark-mode .li-ft a {
background-color: #000000;
}
body.dark-mode a:visited {
color: #c99686 !important;
}
/* زر التبديل */
#theme-toggle-button {
background-color: #000; /* لون افتراضي للزر */
color: #fff; /* لون النص افتراضي */
border: none;
padding: 10px 20px;
cursor: pointer;
background-image: url('moon.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px; /* تغيير البادينج ليتناسب مع الصورة */
transition: background-color 0.3s, color 0.3s; /* تحويل الانتقالي */
}
/* تغيير لون الزر عند الضغط */
#theme-toggle-button.dark-mode {
background-color: #777; /* لون الزر في حالة المظهر الداكن */
color: #000; /* لون النص عند الضغط */
}
/* الستايلات للمظهر العادي */
.light-mode {
background: #fff!important;
color: #222!important; /* لون النص يجب أن يكون مختلفًا بين المظهرين */
}
/* زر التبديل */
#theme-toggle-button {
background-color: #000; /* لون افتراضي للزر */
color: #fff; /* لون النص افتراضي */
border: none;
padding: 10px 20px;
cursor: pointer;
background-image: url('moon.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 40px; /* تغيير البادينج ليتناسب مع الصورة */
transition: background-color 0.3s, color 0.3s; /* تحويل الانتقالي */
}
/* تغيير لون الزر عند الضغط */
#theme-toggle-button.dark-mode {
background-color: #777; /* لون الزر في حالة المظهر الداكن */
color: #000; /* لون النص عند الضغط */
}
Vito corleone يعجبه هذا الموضوع
رد: الوضع الداكن والعادي
شكراً جزيلاً لك اخي elmasry8214 ^^elmasry8214 كتب:انا لما قلت انك مبدع مكذبتش تسلم يا صديقي
هذا يعني لي الكثير.
تم حل المشكلة & ينقل للأرشيف.
|
مواضيع مماثلة
» جديد: الوضع الداكن على لوحة إدارة المنتدى
» الوضع الليلي لنسخه الكمبيوتر
» الوضع الأمنى : +18
» طلب كود الوضع الليلي
» كود الوضع الليلي
» الوضع الليلي لنسخه الكمبيوتر
» الوضع الأمنى : +18
» طلب كود الوضع الليلي
» كود الوضع الليلي
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: دعم مشاكل التومبلايت و الأكواد :: أرشيف قسم "مشاكل التومبلايت و الأكواد"
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى