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

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

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