الوضع الداكن والعادي

السلام عليكم ورحمه الله وبركاتة?


ممكن? طريقة لآضافة الوضع الداكن لمنتداي وشكرا

وعليكم السلام ورحمة الله وبركاته
اهلا اخي elmasry8214
ماهي نسخة منتداك

اهلا
اولا ضع الكود التالي بالهيدر

الكود:

<button id="theme-toggle-button">
    المظهر الداكن    
</button>

الكود الثاني جافا واختار جميع الصفحات

Spoiler:

الكود الاخير css

Spoiler:

ربما لن يعمل على جميع الاماكن

لان نسخة phpBB2 هي الاكثر تعقيدا

لهذا يحتاج تركيب الكود في منتداك اولا
ثم نضع التعديلات المناسبة له

مشتغلش

elmasry8214 كتب:مشتغلش

اهلا اخي
تاكد من تفعيل الجافا في منتداك ؟

حصل  هو اشتغل على الفئات  وخلي  الخلفيه رقم 2 في المنتدى سودة تلقائي

elmasry8214 كتب:حصل  هو اشتغل على الفئات  وخلي  الخلفيه رقم 2 في المنتدى سودة تلقائي

هذا من كود الcss
انتظر حتى اقوم بالتعديل عليه ليناسب منتداك

كونان2000 كتب:

elmasry8214 كتب:حصل  هو اشتغل على الفئات  وخلي  الخلفيه رقم 2 في المنتدى سودة تلقائي

هذا من كود الcss
انتظر حتى اقوم بالتعديل عليه ليناسب منتداك

منتظرك

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; /* لون النص عند الضغط */
}

انا لما قلت انك مبدع مكذبتش تسلم يا صديقي

elmasry8214 كتب:انا لما قلت انك مبدع مكذبتش تسلم يا صديقي

شكراً جزيلاً لك اخي elmasry8214 ^^
هذا يعني لي الكثير.

تم حل المشكلة & ينقل للأرشيف. يرجى مراجعة : قوانين منتدى الدعم