المظهر العادي و  الداكن لنسخة ModernBB

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

كود جفا يسمح لاعضاء المنتدى بأختيار  المظهر العادي او  الداكن,
المظهر العادي هو شكل الاستايل من غير تغيير اما المظهر الداكن يجعل الاستايل   مظلم ,
--
صوره للمعاينة
https://i.servimg.com/u/f30/20/35/61/89/feewr610.gif
طريقة التركيب لنسخة ModernBB
اول شيء اذهب الى لوحة الادارة > عناصر إضافية  > إدارة أكواد Javascript
اضف الكود التالي واختار جميع الصفحات كما في الصورة https://i.servimg.com/u/f20/16/85/77/67/ocia_a11.png

الكود:


(function() {
 // 3 = modernbb
 var version = 3; // forum version

 window.fa_theme_color = {
   version : version,


   // elements the selector is attached to
   attachTo : [
      '.نوار2000', // سبحان الله
      '.نوار2000', // اللهم صل وسلم على محمد
      '.نوار2000', // وفوق كل ذي علم عليم
      '.نوار2000'  // لا تنسى ذكرا الله
    ][version],

selected : my_getcookie('fa_theme_color') || 'اختيار', // selected theme

   // color palettes
   palette : {
'☼ العادي' : '',

   '☾ الداكن' : [],
   },



   // change the current theme
   change : function(color, select) {
     var head = $('head'),
         style = document.getElementById('fa_theme_style');

     my_setcookie('fa_theme_color', color, true); // update selected theme

     // remove old styles
     if (style) {
       head[0].removeChild(style);
     }



     // Random / Normal Themes
     if (!/Select a theme|Rainbow/.test(color) && fa_theme_color.palette[color=undefined]) {
        fa_theme_color.selected = color == '☾ الداكن' ? fa_theme_color.palette['☾ الداكن'][Math.floor(Math.random() * fa_theme_color.palette['☾ الداكن'].length)] : color;
        fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[fa_theme_color.selected][1];
        fa_theme_color.selector.style.borderColor = fa_theme_color.palette[fa_theme_color.selected][2];
 
        head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css() + '</style>');
 
      } else if (color == 'Rainbow') { // Rainbow theme
        if (fa_theme_color.stop) {
          fa_theme_color.selected = color;
          fa_theme_color.selector.style.backgroundColor = fa_theme_color.palette[select][1];
          fa_theme_color.selector.style.borderColor = fa_theme_color.palette[select][2];
 
          head.append('<style type="text/css" id="fa_theme_style">' + fa_theme_color.css(select) + '</style>');
        } else {
          fa_theme_color.rainbow();
        }
      } else { // No theme
        fa_theme_color.selector.style.backgroundColor = '#999';
        fa_theme_color.selector.style.borderColor = '#888';
      }
 
      // delete rainbow assets if it's not selected
      if (color != 'Rainbow' && fa_theme_color.stop) {
        if (!fa_theme_color.transition_all) {
          head[0].removeChild(document.getElementById('fa_rainbow_smoothness'));
        }
 
        window.clearInterval(fa_theme_color.interval);
        delete fa_theme_color.index;
        delete fa_theme_color.stop;
      }
    },
 
    // get and return the theme CSS per version
    css : function(select) {
      var palette = fa_theme_color.palette[select || fa_theme_color.selected],
          all = '::-webkit-scrollbar-track { background:#DDD; }'+
                '::-webkit-scrollbar-button:horizontal:increment { background-position:-51px 0  }'+
                '::-webkit-scrollbar-thumb:active, ::-webkit-scrollbar-button:active { background-color:' + palette[3] + ' !important; }';




 
      switch (fa_theme_color.version) {
 
 
 
 
 
 
 
        case 3 : // invision
        return'#wrap, body, html, h1.page-title, #cp-main .panel {
            color: #d4d0d0!important;
            background: #000!important;
          ' + palette[3] + '!important; }'+
                '#tabs ul a span,  .fa_like_div,  #picture_legend, .fa_dislike_list, .fa_like_list, .forumbg table.table1, .mod-news-footer,  .is-sticky#headerbar-top, #privmsgs-menu, .block-footer, .module-footer, .chatbox_row_1, #chatbox_header  {
          background-color: #2c353b!important;
            color:#d4d0d0!important; }'+
    'ul.forums, .block, dt label, .module, fieldset.polls dt, p.author, dl.faq dt, dd label, label, #cp-main .panel + h1, #cp-main h1, .panel, table.table1 td, .mod-news, .row1, .row2, .row3, li.row:hover  {
          background-color: #1f1f1f!important;
            color: #d4d0d0!important; }'+
              'a:link, a {
            color:#fff!important; }'+
  'li.row, .pagination span strong  {
          border-color: #444!important; }'+
 '.postbody .content, .content, .postprofile {
          color: #fff!important; }'+
 '#comments_scroll_div:after {
        box-shadow: 0 0 18px 9px #fff0 inset!important; }'+
  'body.chatbox {
  background-color: #101010;
    background-image: none;
    margin-top: 0!important; }'+
  '.navbar a:hover {
    background-color: #607d8b;
}'+
    '.block .h3, .h3, h3  {
            color: #d4d0d0!important; }'+
  'select {
    background-color: #fbfbfbe0;
    color: black;
}'+
 
 '#profile-tab-field-profil dl dt, #profile-tab-field-profil dl dt span, #ucp fieldset dl dt label, #ucp fieldset dt, #ucp fieldset dt span,.postprofile .label span, .postprofile .label  {
    color: #fff!important;
    font-weight: bold;
}'+
 
  'span.label {
color: #131107;
    display: inline-block;
    margin: 2px;
    background: aliceblue;
 }'+
  'dl.codebox {
    background-color: rgb(96 125 139 / 31%);
    border-color: #607d8b;
 }'+
  '.quick-nav-topics a, .inputbox, input[type="text"] {
color: #0e0e0e;
    background-color: #ffffffc2;
}'+  
                all;
 
 
        default : // unknown
          return ''+
                all;
 
      }
    },
 
 
    // get and return the transition CSS per version
    // helps make the transition in colors smooth
    applyTransitionRules : function() {
      switch (fa_theme_color.version) {
 
 
 
 
    
        default : // unknown
          return '';
 
      }
    },
 
    // setup the rainbow assets
    rainbow : function() {
      if (!fa_theme_color.transition_all) {
        $('head').append('<style type="text/css" id="fa_rainbow_smoothness">' + fa_theme_color.applyTransitionRules() + '</style>');
      }
 
      fa_theme_color.index = 0;
      fa_theme_color.stop = fa_theme_color.palette['☾ الداكن'].length;
      fa_theme_color.change('Rainbow', fa_theme_color.palette['☾ الداكن'][fa_theme_color.index]);
 
      fa_theme_color.interval = window.setInterval(function() {
        if (++fa_theme_color.index >= fa_theme_color.stop) {
          fa_theme_color.index = 0;
        }
 
        fa_theme_color.change('Rainbow', fa_theme_color.palette['☾ الداكن'][fa_theme_color.index]);
      }, fa_theme_color.transition + fa_theme_color.delay);
    }
  };
 
  var htmlStr = '', i;
 
  // put together the theme options and random array
  for (i in fa_theme_color.palette) {
    if (typeof fa_theme_color.palette[i] != 'undefined') {
      if (!/Random theme|Select a theme|Rainbow/.test(i)) {
        fa_theme_color.palette['☾ الداكن'][fa_theme_color.palette['☾ الداكن'].length] = i;
      }
 
      htmlStr += '<option value="' + i + '" ' + ( fa_theme_color.selected == i ? 'selected="true"' : '' ) + ' style="background-color:' + (/Random theme|Select a theme|Rainbow/.test(i) ? '#FFF;color:#000;' : fa_theme_color.palette[i][2]) + '">' + i + '</option>';
    }
  }
 
  // create the theme selector
  fa_theme_color.selector = $('<select  id="نوار20000" />').html(htmlStr).change(function() {
    fa_theme_color.change(this.value);
  })[0];
 
  fa_theme_color.change(fa_theme_color.selected); // apply the selected theme
 
  // add the theme selector to the document
  $(function() {
    $(fa_theme_color.attachTo).after([fa_theme_color.selector, $('<div class="clear" />')[0]]);
  });
 
  // basic styles for the theme selector
  document.write('<style type="text/css">نوار20000 {margin:3px;}' + ( fa_theme_color.transition_all ? fa_theme_color.applyTransitionRules() : '' ) + '</style>');
}());

ثاني شيء اذهب الى التومبيلات والقوالب > قالب overall_footer_begin
وابحث عن الكود التالي

الكود:

<div class="statistics">


ثم ضع الكود التالي فوقه مباشرة

الكود:


    <style>
       select#نوار20000 {
    background: #27424e!important;
    border: solid #9e9e9e 1px!important;
    border-radius: 11px!important;
    color: #f0ffff!important;
    float: right;
    margin-left: 5px;
}
.نوار2000 {
    margin: 7px 15px 5px 6px;
    float: right;
}
.اليل-و-النهار {
    width: max-content;
    margin-right: 3px;
    background-color: #4a6471;
    color: #FFF;
    font-size: 1.3rem;
    padding: 7px;
}
</style>
  
<div class="اليل-و-النهار">
<div class="نوار2000">المظهر</div>
</div>

ويمكن للمدير من خلال الجفا ان يغير  كما يريد من درجة الالوان في المظهر الداكن
و يمكنه ان يغير اي شيء لا يعجبه من المظهر الداكن من كود الجفا,

ملاحظة...
هذا الكود مناسب لنسخة ModernBB  فقط,
لكن ممكن من الجفا جعله مناسب لباقي النسخ واذا لا تعرف
افتح موضوع في القسم المناسب في منتدى الدعم,

ملاحظة اخرى
الكود لا يعمل بالشكل الصحيح مع الاستايلات المحوله وغيرت من القوالب الاصلية,

وفقكم الله
---------------------------------
تم عمل هذه الميزة بواسطة كونان2000,
وتم استعمال كود الجافا الخاص بالعضو Ange Tuteur,
وتم تغير الاوسمة بكود الجافا بواسطة كونان2000