السلام عليكم ورحمة الله وبركاتة
كل عام وانت بخير يا اعضاء منتدى ذابست وجميع المسلمين
هذا كود حصري لمنتدى ذابست وممنوع النقل بدون ذكر رابط لمنتدى ذابست
المظهر الداكن والعادي لاصدار AwesomeBB لنسخة الكمبيوتر
كل عام وانت بخير يا اعضاء منتدى ذابست وجميع المسلمين
هذا كود حصري لمنتدى ذابست وممنوع النقل بدون ذكر رابط لمنتدى ذابست
المظهر الداكن والعادي لاصدار AwesomeBB لنسخة الكمبيوتر
يعمل بثلاثة اكواد
الكود الاول css
كود 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 .profile-advanced-stats {
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 th,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 .mod-news,
body.dark-mode .member-block,
body.dark-mode .post,
body.dark-mode .block-content,
body.dark-mode .forum-section,
body.dark-mode .posts-section,
body.dark-mode .container-imgs-list,
body.dark-mode .box-body,
body.dark-mode #block-online,
body.dark-mode #block-birthdays,
body.dark-mode .notification-row,
body.dark-mode #tabs .activetab,
body.dark-mode .container-imgs-list .text_overlay,
body.dark-mode .container-imgs-list .image_item:hover .text_overlay,
body.dark-mode .block-topics .block-topics-views i,
body.dark-mode .block-topics .block-topics-posts i {
background: #1f1f1f!important;
color: #d4d4d4!important;
}
body.dark-mode .forum-description h3:after,
body.dark-mode .posts-description h3:after,
body.dark-mode #comments_scroll_div:after {
box-shadow: 0 0 11px 11px #0000;
}
body.dark-mode blockquote {
background-color: #354147!important;
color: #d1d1d1!important;
}
body.dark-mode blockquote cite {
color: #fff!important;
}
body.dark-mode [style="color:#000000"] strong {
color: #2e3434;
background: #fff;
}
body.dark-mode .post-content font {
font-weight: bold!important;
color: #63839d !important;
}
body.dark-mode dd,body.dark-mode .dd_award.left {
background: #10101052 !important;
}
body.dark-mode .block .sub-head {
background-color: #383131;
border-color: #7e7e7e;
}
body.dark-mode .input-subtle,
body.dark-mode .inputbox,
body.dark-mode select,
body.dark-mode input.input-subtle,
body.dark-mode input.inputbox,
body.dark-mode select.input-subtle,
body.dark-mode select.inputbox,
body.dark-mode select {
border-bottom: 1px solid #fff;
background-color: #ffffffa3;
color: black;
}
body.dark-mode a {
color: #fff;
}
body.dark-mode .radio input {
opacity: 1;
}
body.dark-mode .member-block .member-details > div {
color: #98a19e;
padding-top: 2px;
}
body.dark-mode .btn-flat:hover,
body.dark-mode .btn-flat {
background-color: rgba(249, 249, 249, 0.11);
color: #f4f5f5!important;
}
body.dark-mode .post-footer,
body.dark-mode .post-aside,
body.dark-mode .block-footer,
body.dark-mode .mod-news-footer{
background-color: #607d8b40;
}
body.dark-mode .quick-reply-textarea-wrap .sceditor-container {
border: 0!important;
border-radius: 0!important;
}
body.dark-mode .quick-reply-textarea-wrap .sceditor-container iframe,
body.dark-mode .quick-reply-textarea-wrap .sceditor-container textarea,
body.dark-mode .sceditor-container textarea {
background-color: #00000026 !important;
color: #e5dddd !important;
border: solid 1px #fff;
}
body.dark-mode .rtl .sceditor-button {
background: #e1d3d3!important;
}
body.dark-mode input.quick-reply-btn.quick-reply-preview,
body.dark-mode input#quick-reply-send,
body.dark-mode .fa_like_list,
body.dark-mode .fa_dislike_list,
body.dark-mode .option_voters_list {
color: #bbb7b2;
}
body.dark-mode a:visited {
color: #c99686 !important;
}
body.dark-mode p.fa_like_list {
background-color: #000;
}
/* زر التبديل */
#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; /* لون النص عند الضغط */
}
/* CSS للجدول تحت الهيدر */
body.dark-mode .mod-table-mobile-head ~ table,
body.dark-mode table.tborder {
background-color: #1f1f1f !important;
color: #e5e1dd;
overflow: hidden;
}
/* الستايلات للمظهر العادي */
.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; /* لون النص عند الضغط */
}
الكود الثاني جافا واختارو جميع الصفحات
كود javascript :
الكود:
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);
});
});الكود الثالث html
كود html :
الكود:
<button id="theme-toggle-button">
المظهر الداكن
</button>كود الهتمل هو يحدد مكان ظهور زر الوضع المظلم
يعني لو وضعتو كود الهتمل بالهيدر راح يكون الزر بالهيدر
ضعوه في اي مكان يقبل الهتمل
واي احد يركبه في منتداه و واجهته مشكله مع الكود
لا تتردد اخباري بالرد
--------------------------------------
تمت كتابة هذا البرنامج التعليمي بواسطة كونان2000،
باستخدام الذكاء الاصطناعي
